Custom Gallery

tstrack · ‎Jan 30, 2017

Is there a way to customize the HubL Gallery module? Basically removed all of the styling, wrappers, etc. so it just spits out the images? Then take those images and wrap them in some HubL code like so:

<div class="slider">
  <div><img src="this.jpg"></div>
  <div><img src="that.jpg"></div>
  <div><img src="andthis.jpg"></div>
</div>

Then I could trigger the slider with my own custom JS? Like so:

$('.slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

I'm just not a fan of how the Gallery Module looks out the box. I'd like to do my own thing with it.

Has anybody ever did this or know of a way how to? Thanks in advance!

Jsum · ‎Feb 8, 2017

Hi,

You can customize the image gallery/slider modules using HubL:

{% gallery "crm_gallery"  label="CRM Gallery", export_to_template_context=True %}

The "export_to_template_context" part releases all of the data for the module into the template for you to play with. The data that is available for the gallery module is:

"slides": [{
               "img_src": "",
                 "alt_text": "",
                 "href": "",
                 "link_url": "",
                 "open_in_new_tab": true,
                  "show_caption": false,
                  "caption": ""
               }]

You set this data up by adding images to the gallery on the editing page, so you would go to the page editor and add an image, the alt text for the image, a link if needed, and a caption.

Then you can fully customize the gallerys markup by looping through it:

{% gallery "crm_gallery"  label="CRM Gallery", export_to_template_context=True %}
{% for item in widget_data.crm_gallery.slides %}

    <img src="{{ item.img_src }}" alt="{{ item.alt_text }}">

{% endfor %}

I create the gallery widget, exporting the data to the template. I then make a for loop that says for each slide in the image gallery I want to output this image tag.

The code inside the for loop can be as simple or complex as you can make it. you can use divs or other wrappers, paragraphs, ids, classes, you name it. It will print whatever you put here per slide, so if you add 100 images to the gallery it will out put the code 100 times on the page.

You can use any of your own js to do what ever you want with the images because you have full control of how the data is output.

To use the data just use

{{ item.img_src }}
{{ item.alt_text }}
{{ item.caption }}
{{ item.href }}
etc.

Where Item is the name given in the for loop:

{% for item in widget_data.crm_gallery.slides %}

You can change "item" to pretty much anything like "slide", "image", "block". just make sure you change that identifier in the data tokens and your good to go.

crm_gallery is my system name for the gallery widget:

{% gallery "crm_gallery"  label="CRM Gallery", export_to_template_context=True %}

so make sure that

{% for item in widget_data.crm_gallery.slides %}

reflects what ever you use as a system name for your widget.

You can place all of this inside a hubl module in the drag and drop editor or right in the page of a coded page.

View solution in original post

stefen · ‎Jan 31, 2017

I think the easiest way is to use a flex column with image modules. For example, a flex column with a custom class "my-custom-slider" can be used with Flickity by initializing it like so:

$('.my-custom-slider').flickity({
    cellSelector: '.hs_cos_wrapper_type_linked_image'
});

that's how we created the partners carousel on our homepage: https://www.growwithsms.com/

The only issue with this is you have to deal with HubSpot's markup. Slick.js requires all slides to be the direct child of the parent category, so you would need to initialize it like this:

$('.my-custom-slider > span').slick({
// options
});

Stefen Phelps, Community Champion, Kelp Web Developer

tstrack · ‎Jan 31, 2017

That's an interesting solution. I think it would accomplish what I'm looking to do. And maybe adding the no_wrapper = true to the modules would help alleviate some of the parent/child issues.

Thanks, Stefen. I'll give this a try!

CMS Development

Custom Gallery

Custom Gallery

Custom Gallery

Custom Gallery

Sign up for the Developer Newsletter