How to add <li> element in a ipsGrid.

[Matteo Casasanta]

Hello guys, I'm trying to modify my gallery theme. I just want to add a centred button under each photos. 

{{foreach $images as $image}}
    <li class='ipsGrid_span4 data-role='patchworkImage' data-json='{$image->json()|raw}'>
        <div data-grid-ratio='65'>
            <a href><img src=... alt='' class='cGalleryThumb'>&nbsp; </a>
            {{if $table->canModerate()}}  [...]
        </div>
        <ul class='ipsList_inline ipsType_medium ipsClearfix'>
           [...]
        </ul>
    </li>
<!-- WHAT I ADDED-->
    <li>
        <a href='www.google.com' class='ipsButton ipsButton_overlaid ipsButton_verySmall' title='ciao' data-ipsTooltip><i class='fa fa-download'></i></a>
    </li>
{{endforeach}}

 

what am I missing? do I have to create a custom css for it? Or maybe do I need to change the grid template?

 

[ehren.]

Seems like you're over complicating things. Just add the button inside your grid item

{{foreach $images as $image}}
    <li class='ipsGrid_span4' data-role='patchworkImage' data-json='{$image->json()|raw}'>
        <div data-grid-ratio='65'>
            <a href><img src=... alt='' class='cGalleryThumb'>  </a>
            {{if $table->canModerate()}}  [...]
        </div>
        <ul class='ipsList_inline ipsType_medium ipsClearfix'>
           [...]
        </ul>
        <div>
            <a href='www.google.com' class='ipsButton ipsButton_overlaid ipsButton_verySmall' title='ciao' data-ipsTooltip><i class='fa fa-download'></i></a>
        </div>
    </li>
{{endforeach}}

 

[Matteo Casasanta]

I tried it, but it simply doesn't not appear on my layout. If you inspect the page there is now sign of it, except in the source elements.

This is what I see after adding the button. After the div there is just the following picture.

[bfarber]

When you use the 'patchwork' layout (where blocks of images are shown side by side), javascript ends up taking each image and reformatting it based on the Gallery patchwork javascript template. Basically, you won't be able to easily do this unless you write a javascript mix in (or find a way to modify the javascript template, which isn't possible through the interface).

Specifically the js template or templates you would want to look at are gallery.patchwork.indexItem and gallery.patchwork.tableItem

[Matteo Casasanta]

Thank you very much. Where are these templates located?

[bfarber]

Well, while developing I access them via applications/gallery/dev/js/front/templates/ips.templates.browse.js

But with IN_DEV disabled, they would only be stored in core_javascript in the database (if you edited the record, you would need to clear your caches to get javascript to rebuild).

[ehren.]

For future versions, maybe css-grid would be a better alternative to javascript, with a flexbox fallback for older browsers.

[bfarber]

Possibly, although it doesn't actually use a grid style layout so that may not work well. We'd have to test.