Can Liquid Photo Gallery module template be used but called up with simple module tag?

[Kulsha_DWD]

Hi, please excuse my lack of knowledge on Liquid markup but I have a basic question.

Is it possible for my clients to add their own photo gallery to their website, and for custom template to be generated for the layout (ie a Liquid Markup template to make the photo gallery mobile responsive)?

As a CMS, the Gallery module is requested for almost every website and client like to add their own galleries, it's expected of CMS sites these days and I'd like to be able to offer this to my clients. If they use the insert module menu in the editing area that BC offers and makes look easy, the tag generated looks something like {module_photogallery id=“1759”} which of course renders the old table based layout. Is there a way to make this tag use a customised template instead? Even if I have to teach the client to edit that tag slightly to add a template name to it eg: {module_photogallery id=“1759” template="/custom.tpl"} or similar? I know that's not ideal for some clients, but I have a few savvy clients that I'm sure could handle copying that little line of code and editing the gallery reference number.

I'm not asking HOW to do this, simply IF it is possible at all please, eg could I make this tag work: {module_photogallery id=“1759” template="/custom.tpl}. If I know it's possible I'll get a developer to do this for me and take the next steps. I've searched through the forums and there seems a lot of people want to do this but I haven't found the answer, everything I've found looks really code heavy and not usable for the client themselves.

Thanks, Eva.

[Mihai_Stoichitescu]

Hi Eva,

Sorry for the late reply first of all!

Yes you could definitely do this using Liquid and you would need to go about it almost as simple as you said it. The client would only need to change the ID of the code snippet and paste it where he wants it (that is if you'll have just one template).

Two easy steps:

1. Use module_photogallery | Business Catalyst Developers new named parameters

e.g {module_photogallery render="collection" id="33626" template="/widgets/misc/photo-gallery-template.tpl"}

2. In /photo-gallery-template.tpl , using Liquid, go through the items object and create you responsive template.

Hope this helps and please let me know if you want me to go into more detail.

Stoiky

[Luke Grayson]

Just to add to Mihai's answer, I've got a Liquid photo gallery set up as follows:

{module_photogallery id="xxxxx" render="collection" collection="photoGallery" template="/path/to/custom/template.tpl"}

And on your custom template:

<div class="flex-container">

{% for item in photoGallery.items -%}

<a class="flex-box" onclick="myLightbox.start(this);return false;" rel="lightbox[{{item.photogalleryId}}]" href="{{item.link}}">

<img src="{{item.link}}" alt="{{item.description}}" />

</a>

{% endfor -%}

</div>

As you can see,  I'm using flex-container and flex-box to display my gallery thumbnails. I don't set the thumbnail width or size or the thumbnail setting itself (proportional, fill, etc), although you could do this.

I use item.link to get the actual photo gallery image and use this for the thumbnail (instead of the available item.thumbnailLink) and let my flex-container and flex-box do the resizing. Be aware that when dealing with photo galleries with many items this could have a negative impact on performance as you are loading all the full size images on page load.