Skip to main content

The trouble with iframes

Greetings!

For my current project, the client wanted four Featured Content Sliders on the home page. After thinking for a while, I found a way to do this. My solution has the added bonus of giving the client the ability to easily change the text or the images without my help. It has been a long-time goal of mine to give clients more control over their custom content areas (the ones that fall outside the Yield), so, win-win! 

As you probably guessed from the title, I'm using iframes for this: four of them, side by side. It actually kinda almost works! Almost. 

Here's the kicker: In order for the iframe page content to display properly on the home page, I have to detach it from the template ([x] Ignore theme layout template). However, detaching the iframe page from the template also disables the Featured Content Slider on the page.

Logically, this makes complete sense to me. The thing which powers and styles the Featured Content Slider is in the template and if the template is detached from the page, the FCS will not work. 

So, my question: what liquid bits and parts do I put back into the iframe page template to re-enable the Featured Content Slider? I spent half the day yesterday experimenting but came up empty, so I am reaching out for a little help. 

Here's the site where I am developing the theme. (note: in the future, this theme will not be visible here, it will be on educateourstate.org). And here's one of the sample iframes.

Thanks!

 

Official response from

Hello Tim, the suggestion using liquid subpages from Will below is probably a better way to address this issue.

That said, in order for the slider to work the page needs to load javascript that is included in {{ content_for_footer }} as well as have a page that has images uploaded into the Featured Content Slider settings. The slider will not work unless there are images included to populate it and the javascript loads. Depending on what else you're loading, you may also want to keep   {{ content_for_header }} in the page header. 

Share this post

Showing 6 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.