Use default Lightbox anywhere in website for image | Adobe Business Catalyst

<link type="text/css" href="/CatalystStyles/lightbox.css?vs=b1951.r480527-phase1" rel="StyleSheet">
<script type="text/javascript" src="/CatalystScripts/Cache/lightbox2022.js?vs=b1951.r480527-phase1"></script>


<a onClick="myLightbox.start(this);return false;" rel="lightbox[2451]" href="{tag_image}">
<img src="{tag_image}?Action=thumbnail&Width=250&Height=150&algorithm=fill_proportional">
</a>

Liquid photogallery | Adobe Business Catalyst

{module_photogallery id="15301" collection="photogallerys" template="" }
{% for item in photogallerys.items %}
<img src="{{item.thumbnaillink}}">
{% endfor %}

Compress image size | Adobe Business Catalyst

( proportional, fill_proportional, fill )

<img src="{tag_logo_value}?Action=thumbnail&Width=170&Height=70&algorithm=proportional" />

Lightbox Responsive css | Adobe Business Catalyst

#outerImageContainer { max-width: 90%; overflow: hidden; height: auto !important; font-size:0!important; }
#imageDataContainer { max-width: 90%; overflow: hidden; }
#lightboxImage { max-width: 100%; }