Thumbnail Slider Gallery Appears Not To Recognise ACF Gallery Field

[whitemedia]

Hi,

Some great new features in the new beta! Looking forward to trying more of them.

I have been trying out the new Thumbnail Slider Gallery, but have hit a potential issue. On an Archive layout, I have the looper provider set to All Terms (also tried with Current Terms) and selected the taxonomy mill_location. Then, in both the stacked slider and the thumbnails I am trying to pull in the ACF gallery which has the ID mill_category_gallery

mill_category_gallery does not appear in the dropdown list of available fields, though all others do. I therefore selected specific field and manually entered the field’s name. The result is a blank slider and thumbnails. I am pretty sure I have done everything correctly, though…! Any ideas why it is not consuming the gallery images?

One other question, on the Image Lightbox Gallery, how is the parameter ID field meant to be used?

Thanks,
Christopher

[charlie]

So the ACF gallery field itself needs to be looped since it’s a collection of attachments. So for what you’re doing you actually want to double loop. I setup an example on your site. My plan was actually to have a secondary template for ACF galleries so you could just insert the template, and then enter your acf field name and get a gallery just like that.

To answer the question about the ID on lightbox gallery. That is so you can you link directly to the gallery to have it pop up. And so you can have multiple lightboxes on the same page since modals need to reference a specific ID and slider context isn’t really going to work nicely with that.

Thanks for the kind words. Have a great weekend!

[scotbaston]

On the gallery front @charlie, we have discussed in the past being able to pull acf galleries (or other dc content) into a masonry grid gallery. is this something that’s on the cards please?

Thanks

Scot

[spedney]

I second this. Something I’ve hoped for a while

[whitemedia]

Sorry for the late reply @charlie, but thanks for the explanations.

I have noticed a strange behaviour with the slider. For example, If I add a div containing a text element to either the main image, or the thumbnails, the images disappear from both. After refreshing the page CS displays everything normally. On the page you looked at, this happens every time a change is made to the text element. Can you replicate this unexpected behaviour at your end?

I also second the masonry grid gallery idea!

[charlie]

Still debating how we handle a masonry layout. Whether it be a CSS based solution combined with parameters and maybe Twig. Or a JS integration that utilizes the Div element.

Approaches for a CSS Masonry Layout | CSS-Tricks

https://masonry.desandro.com/

@whitemedia I see it on your site. I think because it’s a double looper it losses access to that dynamic content your using. I’m not sure currently though.

[scotbaston]

Hi @charlie, if you want someone to alpha test ideas for masonry let me know. As a Photographer and Website guy, this is an important feature for me. ( I would happily dump the plugin approach if I could get a looper/masonry grid working nicely)

[charlie]

What plugins are you using to create a masonry grid? It’d help to know what all we want to accomplish with this as masonry can have a number of different looks ranging from simple to more involved.

[whitemedia]

I use the bundled Envira Gallery where I need a masonry grid. Hope that helps!

[scotbaston]

Hi @charlie, I am mainly using Envira Gallery or NextGen (on older sites)

You can see how I am using envira here > https://cornerstone.photography/property-photography/
(further down the page)

[JvP]

It’s just too bad that the CSS grid masonry spec is nowhere near ready.

@charlie

Still debating how we handle a masonry layout. Whether it be a CSS based solution combined with parameters and maybe Twig. Or a JS integration that utilizes the Div element.

Which of these two options do you think would provide the easiest masonry layout building experience in CS?

[charlie]

That’s a great question.

If we’re going for the column approach like in Envira or others I’ve seen. Adding a “masonry” toggle to the Row element would probably work. Then behind the scenes the resizing that’s needed could happen. You can already setup a masonry layout like my 2nd screenshot with a div using flexbox. You just need to set a static height for it to work at all and there’s a couple of other issues. It would be better suited for the row element since the layout is already defined through the “template” control.

For my first screeshot. This would probably need be another element that just extends from the div and uses a masonry JS library. Then the child elements need to be manually set at 33% width for a 3 column width or if your using something like an image, the layout would autocorrect based on your screen size and the element size. It’s a little more work on the building end, but we could always setup some prefabs. I’d really need to start playing with these libraries before I could say what could and couldn’t be possible with either library though.

[JvP]

Sounds like option 1 is better with potentially less JavaScript? Curious to know what you think after investigating the options more.

[charlie]

The difference in JS is about 20kb for each approach, which is negligible imo. Magic Grid worked pretty well with our Row element with minor changes on our end. Although it only works if your row layout is equally sized which is probably going to be a problem with most of them. I think I’d rather start with option 1 since we already have the UI figured out with the Row Element and if we really need a solution where the bricks can span columns we can cross that bridge later. Still need to look at all options.

[whitemedia]

Hi @charlie,

Given the many thoughts on the masonry topic, what do you reckon is the timescale for releasing this in whichever form is decided upon? I have a current project which is going to need masonry image layout, so would love to be able to plan to use a native solution, rather than a third party one!

Thanks,
Christopher

[scotbaston]

I am loving that masonry is getting some attention, this will be a big improvement for my use case.

The only thing I have against the column approach is it leaves the bottom of the grid a little ‘ugly’ at times. There are definite use cases for it. In my personal use case I go more for a ‘bricks’ approach

The nice thing with this approach is that it can hide the last row if it doesn’t fill the width

Thank you @charlie for looking at this, whatever approach you go for is a big step up and much appreciated

[charlie]

Realistically probably a Pro 6.6 thing. I would like to start doing betas on point releases so we might see it sooner, but it’s definitely a feature that needs to get more eyes on it then Themeco internally. If we start with a column approach then a ‘bricks’ approach would be soon to follow. Although it might be easier to just do a ‘bricks’ approach to start as those libraries that support that are a little more advanced in general. Have a great day.

[JvP]

@charlie

Although it might be easier to just do a ‘bricks’ approach to start as those libraries that support that are a little more advanced in general.

That’s probably the best approach.