Forum
How do I setup content duplication on a single page?
I was not sure how to word this. But what I am trying to achieve is on a responsive template. There will be a slider with images in the gallery. Upon changing to a mobile or i pad, I would like to have the slider disappear using media queries and have the same images appear stacked upon each other so they will be viewed by scrolling up and down. Is there a way that I can add these images via the bucket and have it delivered to two regions on the page, 1) The slider 2) The stacked images in another div which will be controlled via media queries.
If there is a cleaner and better way about going about this please let me know. Otherwise what perch content tag or layout do I need to add to make this work?
Thanks. M
The problem with hiding a div is the images will still be downloaded even if hidden, so if your second div contains different images (smaller size) then you'll actually be downloading double the images and hiding half of them. So, if your images are well optimized then this will work, but (2) different size images will only make the page heavyweight.
I thought about that... Any suggestions?
Is there a way to turn a slider div into a stacked image pane. Like disabling the .js to have it stack? Like a code to enable that?
The only way I would know how is to use jquery to control which images are downloaded. Also jquery could swap classes on divs to enable slider or stacked images. I however am not that well versed in js to advise you on design. But it can be done.
You probably want to think about this the other way around and start mobile first. So start with your optimized mobile view of stacked images then - as the screen gets wider - go to a slider.
You could use something like matchMedia to detect the breakpoints: https://github.com/paulirish/matchMedia.js/
I'd suggest working out the HTML that you need to get this working in a good way and then figuring out how to create a Perch template for it.
To answer your initial question you could repeat the images on the page using perch_content_custom, but that wouldn't be an ideal way to go about it.