Hi,
Sorry this may sound like a very silly question…
I have built a page that lists the title and small image of a group of custom posts. Each custom post has 1 - 3 large images that I want to display when a user clicks on one of the titles from the list.
How do I do that again?
I’m showing the images in a grid.
Thanks,
Darren.
Hello Darren,
Thanks for writing to us.
I would suggest you please insert the Post element to display the post title, featured image, and excerpt, and link the title with the permalink. You need to set the Looper provider as a Query builder and set the Post as a custom post type. You need to create a single layout for the custom post type using the layout builder where you can display the images.
Thanks
Hey Prakash that’s exactly what I needed thank you.
Is there a way I can show the images on the same page as the Title Permalinks?
thanks
Hey @DesignMunky,
To better assist you, we would love to check the custom post type and learn how this images where added. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site
To know how to create a secure note, please check this out: How The Forum Works
Best Regards.
Hey Ruenel,
Thanks for looking into this for me.
Ultimately what I’m trying to do is create a section on the page where users can select different options for the interior finiwshes of a motorhome.
I created a custom post called Interior Options which has categories like Splashback.
I have created multiple images of each different coloured splashback, all are exactly the same sized image and are transparent so they will overlay on the base image.
Now I want to list the different type of splashback titles and when clicked on show only the image from that post over the base image.
I have made a start on it on this page:
If you scroll down towards the end of the page you will see the list of finishes there.
If you think there’s a better way to do this please let me know.
Thanks!
Hello @DesignMunky,
Thanks for updating in!
You will have to add a Meta Value in the Query Builder just like this:
Can you please provide how it should look like or at least a mock layout so we can suggest an element structure as well?
Thanks.
Hi Ruenel,
So here’s an example of the base image and an overlay. I initially looked at using a stacked slider fore the job but that wont work because it wont leave the other elements visible.
Thanks
Darren.
Hello @DesignMunky,
You will need to run a Looper and then use the Looper Consumer for both sides, the navigation and the slider on the right side. Please check out the demo I managed to create as an example.
Thanks,
Hey Reunel,
Thanks for going to the trouble of doing that. This is actually kinf of like the first thing I tried (based on Josh’s video on vertical tabs - https://www.youtube.com/watch?v=Y5YIrYfBipk)
It works fine for one item (Like splashback) but I couldn’t get it to work for more than one type of item. So for example, how would I create another slide that showed the selection of say the Cabinets over the splashback image?
Hey Reunel,
I think I may be able to get it to work if I sliders on seperate cells and position the cells on top of each other. I am just stuck on how to get the title elements linking to the correct slider. I noticed you were using the goto slide custom attirbute. Is there any way I can use that to link to a particular slider?
Thanks
Hello @DesignMunky,
We would love to see a mock layout of how this plays out. At the moment, we do not have a clear idea of how the “splashback” and the other items relate to the slide or the page. We cannot formulate a good element structure if we are not on the same page. If you have a designer, please send to us the design layout so that we can think of how we can implement it on your page using Cornerstone elements.
Hope this makes sense.
Hey Ruenel,
Thank you again for going to such lengths to understand this project.
I’ve attached an example kitchen image and some of the layers that go over to make up the image. You will notice that with say the Benchtop overlays, it only has to show one bentop overlay at a time - so this works fine when using a slider.
All the images are created so they fit exactly over each other. and sit over a base image.
However, when the user wants to select different coloured cabinets, we need the benchtop to remain the last chosen by the user.
My thoughts were to have a slider for each group (Benchtop, cabinets, splashback etc) and stack the sliders on top of each other in a grid.
I’m not sure if that will do the job though and I also need to connect the various selectors for each slide to the respective sliders.
Hi again Ruenel,
I should say that showing it on stacked sliders means i’d need to create multiple sliders (one for each group - benchtop, cabinets etc) and sit them on top of each other. That’s the only way I can see being able to set say the benchtop to blue, then change cabinet to lime ash but keep benchtop blue.
If I did it this way, I’m unclear on how I would link the selections to each slide. If I use the data-x-slide-goto attribute, how do I link each group to the correct slider?
THanks,
Darren.
Hey Ruenel,
I’ve worked it out - thanks. Was stuck on the Slider Context function but realised that as long as I kept the switches for each element in the same container then they worked for the associated slider.
Thank you again for all you help.
Cheers,
Darren.
Glad to hear that, Darren.
Thanks Ruenel,
If you look at the page now its more or less doing what I want it to do.
However, I"d like to work on presenting the controls of the section looking and functioning better. One of the issues I face is that in using the data-x-slide-context attribute to ensure the dropdowns are affecting the right Slider, means I need to keep the sliders and controls in the same containers.
If I was to use data-x-slider-id as mentioned in the docs, would this allow me for example to keep all the drop downs in one container and link them to the various sliders by assigning them the appropriate data-x-slider-id ?
If so, can you give me a quick example of how to use data-x-slider-id ? I’ve tried assigning a slider a unique value in custom attributes but am unsure how to link the dropdown at the other end.
thanks,
Darren.
Yes using data-x-slider-id would mean you would not need to keep the dropdowns in the same container.
The template Image Lightbox Gallery in the Themeco templates tab uses the data-x-slider-id property. The slide container should have it’s ID set in the Customize tab, and your items in your dropdowns would utilize the data-x-slider-id attribute. Let us know if this helps.
Hey Charlie,
I had a look at the Image Lightbox Gallery template thanks.
I tried setting things up the way you instructed but wasn’t able to get the drop down items to connect to the slider.
I set the slider id to “splashback” and for each dropdown element I used custom attributes to set data-x-slider-id to value splashbacks and then set data-x-slide-goto to the relevant slide in the slider…
The slider was in the same section as the dropdown but in a different Div.
Regards,
Darren.
Hi guys,
Just following up on this ticket.
Thanks,
Darren.
Hi Guys,
Maybe this ticket has fallen between the cracks?
Cheers,
Darren.
