Display iFrame as background image

[tsalstrand 8]

I'm working on this website here: http://hahayoo.com/

 

Notice the background image?  We'll I want to have that same background but done with ThingLink (which you can see here: https://www.thinglink.com/scene/384076621813907457#tlsite

)

 

ThingLink gives and iframe or <img src="....> 

Is there any way that I can setup that as the background to the page?

[James B 436]

Hi Steve

 

If the image source link it gives you is purely a url you should be able to assign this using css.

 

I'm not sure how you would be able to assign the iframe. I'm guessing you could use either a plugin like http://wordpress.org/extend/plugins/advanced-iframe/ which would give you a shortcode that you could insert using a hook into the page background container. Or use jquery to insert it into the page - http://stackoverflow.com/questions/3236430/how-do-i-dynamically-insert-an-iframe-in-a-div

[tsalstrand 8]

Hi James,

 

Thanks for the feedback.  Unfortunately, it can't just output a URL, otherwise I'd just do background: url('...');

 

I like your idea of using a shortcode placed in a hook.  And I know how to create my own shortcode in functions.php  However, I'm not at all familiar with Pagelines Hooks.  I understand why they are used, but I'm not familiar with how to utilize it.  I was looking over the hooks here: http://api.pagelines.com/hooks, would I use the body_bg hook?  And if so, how would I take my shortcode (say, [thinglink]) and insert it via a hook into the page background container?  Where would I put that code?

 

Sorry for what probably seems like n00b questions!  Thanks in advance.

[James B 436]

I'm been trying to think of the best way around this for you, it seems more complicated the more I think about it.

 

For info on hooks see - http://support.pagelines.me/docs/customization/hooks/ basically the hook is an area in the page that you can insert content into. So you're choosing a place on the page and then adding your code into that area. The easiest way to do this is using the hooker plugin - http://www.pagelines.com/store/plugins/hooker/ otherwise you'd need to add a hook into the functions.php

 

Basically if I was adding a hook to place a div into the background area I'd do it like this, (which might not be the correct way as I'm not a developer) but I've tested this quick with a background image to see if it works and it did.

 

Using the hook Pagelines_Page, I inserted basic html in a div with the image in. Then using css on that div, gave it absolute positioning, 100% width and height so it spanned the entire background area of the page.

 

Problem you'd have is that its going to be a shortcode, or a iframe. I'm not sure if the same rules would apply there with an iframe. You can insert a shortcode into a hook using the method described here by one of the developers - http://www.pagelines.com/forum/topic/25340-add-shortcode-for-button-in-header/

 

Give it a go and see what happens :-)

[James B 436]

Actually just tried it with an iframe directly into the hook and it worked first go.

 

http://screencast.com/t/23IdIZme5f

[tsalstrand 8]

Works great!  Took me a little bit of tweaking to get the div right and apply the CSS to the right element, but you hit the nail on the head!  

It really achieved the effect that we were looking for, thanks!  I couldn't have done it without your help, James.

[James B 436]

Excellent, you're welcome. Glad it worked :-)