Jump to content


Photo
- - - - -

Display iFrame as background image


Best Answer James B , 26 April 2013 - 02:37 AM

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.pagel...mization/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...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...tton-in-header/

 

Give it a go and see what happens :-)

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 tsalstrand

tsalstrand

    Advocate

  • Members

  • 255 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 25 April 2013 - 10:10 PM

I'm working on this website here: 

Please Login or Register to see this Hidden Content

 

Notice the background image?  We'll I want to have that same background but done with ThingLink (which you can see here: 

Please Login or Register to see this Hidden Content

)

 

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

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



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 25 April 2013 - 11:04 PM

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

Please Login or Register to see this Hidden Content

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 -

Please Login or Register to see this Hidden Content



#3 tsalstrand

tsalstrand

    Advocate

  • Members

  • 255 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 26 April 2013 - 12:55 AM

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: 

Please Login or Register to see this Hidden Content

, 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.



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 26 April 2013 - 02:37 AM   Best Answer

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 -

Please Login or Register to see this Hidden Content

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 -

Please Login or Register to see this Hidden Content

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 -

Please Login or Register to see this Hidden Content

 

Give it a go and see what happens :-)


  • tsalstrand likes this

#5 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 26 April 2013 - 02:48 AM

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

 

Please Login or Register to see this Hidden Content


  • tsalstrand likes this

#6 tsalstrand

tsalstrand

    Advocate

  • Members

  • 255 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 26 April 2013 - 04:41 AM

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.



#7 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 26 April 2013 - 04:44 AM

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