PHP as background url

18 Posts

jamesgander posted this 27 January 2016

Not sure if this is possible, but I haven't found a way of doing it?

I'd like to be able to set the background image URL as php, for example to give a Layout Container or Section the background of a post's featured image. Eg, select the url option for background and then insert the following code, instead of a url:

<?php echo="" wp_get_attachment_url(="" get_post_thumbnail_id()="" );?=""?>

(This php won't format properly in this post for some reason, sorry)

The main reason I want this is so I can then apply the parallax extension to the container of section and use it as a post header. I also want to be able to place things like the post title inside this container, so a CMS code snippet containing a div (which is my current attempt) is no good.

This is what I have in a CMS code snippet at the moment, but it solves neither of the problems above:

  <div style="
               background-image:url('<?php echo wp_get_attachment_url( get_post_thumbnail_id() );?>');


                height:200px;
                background-position: center;
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-size: cover;"></div>

Can you give me a solution for this? Or if totally not possible, consider including it somehow in future releases?

Not sure if this is possible, but I haven't found a way of doing it? I'd like to be able to set the background image URL as php, for example to give a Layout Container or Section the background of a post's featured image. Eg, select the url option for background and then insert the following code, instead of a url: <?php echo="" wp_get_attachment_url(="" get_post_thumbnail_id()="" );?=""?> (This php won't format properly in this post for some reason, sorry) The main reason I want this is so I can then apply the parallax extension to the container of section and use it as a post header. I also want to be able to place things like the post title inside this container, so a CMS code snippet containing a div (which is my current attempt) is no good. This is what I have in a CMS code snippet at the moment, but it solves neither of the problems above: <div style=" background-image:url('<?php echo wp_get_attachment_url( get_post_thumbnail_id() );?>'); height:200px; background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover;"></div> Can you give me a solution for this? Or if totally not possible, consider including it somehow in future releases?

Last edited 27 January 2016 by jamesgander

post-image wordpress parallax url php

Vote to pay developers attention to this features or issue.

7 Comments

Order By: Standard | Newest

Support Team posted this 01 February 2016

Hi,

Unfortunately such option is not supported. I've added your request to our wish list.

In general, you can try the following workaround, but it requires some css skills:

add CMS Code control to the very top of the desired template in Themler.
this control should contain a div with desired DIV (like in your example).
<div style="background-image:url('<?php echo wp_get_attachment_url( get_post_thumbnail_id() );?>'); width: 100vw; height: 100vh;"> </div>
this div and CMS Code controls should be stretched to the screen width and height and positioned absolutely (or fixed).
the CMS Code control should be located on the very bottom layer in the page structure. You can control it with z-index under the Arrange section:

Please keep us posted about the progress.

Thank you,
Olivia

Hi, Unfortunately such option is not supported. I've added your request to our wish list. In general, you can try the following workaround, but it requires some css skills: - add CMS Code control to the very top of the desired template in Themler. - this control should contain a div with desired DIV (like in your example). <div style="background-image:url('<?php echo wp_get_attachment_url( get_post_thumbnail_id() );?>'); width: 100vw; height: 100vh;"> </div> - this div and CMS Code controls should be stretched to the screen width and height and positioned absolutely (or fixed). - the CMS Code control should be located on the very bottom layer in the page structure. You can control it with z-index under the Arrange section: !cms-code-arrange-2.png! Please keep us posted about the progress. Thank you, Olivia

cms-code-arrange-2.png

18 Posts

jamesgander posted this 01 February 2016

Thanks for your reply and adding this to the wishlist. Such an option would give the featured image for a post so much potential for use within the themes.

The solution you've given me seems to be for a background image, but what I'm looking for is to create a header image (full width above the post content) that I can add a parallax effect to and place other elements inside, such as the post header. When creating a div using the CMS Code element it's not possible to place other items within it, and that was pretty much what I had already (as shown in my previous post).

Can you re-read my question and suggest a solution please?

Thanks for your reply and adding this to the wishlist. Such an option would give the featured image for a post so much potential for use within the themes. The solution you've given me seems to be for a background image, but what I'm looking for is to create a header image (full width above the post content) that I can add a parallax effect to and place other elements inside, such as the post header. When creating a div using the CMS Code element it's not possible to place other items within it, and that was pretty much what I had already (as shown in my previous post). Can you re-read my question and suggest a solution please?

Support Team posted this 01 February 2016

Hi,

In fact, it does not matter. The idea is the same. In case of Header you need to add this CMS Code control inside Header, stretch it to the Header with and height (100%). Also you need to change CMS Code position from fixed to absolute. And z-index may be different depending on other controls inside header.

Thank you,
Olivia

Hi, In fact, it does not matter. The idea is the same. In case of Header you need to add this CMS Code control inside Header, stretch it to the Header with and height (100%). Also you need to change CMS Code position from fixed to absolute. And z-index may be different depending on other controls inside header. Thank you, Olivia

18 Posts

jamesgander posted this 01 February 2016

Ahh yes - I see what you mean. I'll give it a go and see what I can do. In the mean time, it would be great to see the wordpress featured image control integrated into Themler much more, as it would provide much more flexibility, particularly when working with custom post types and so on.

Thank you.

Support Team posted this 03 February 2016

Hi,

it would be great to see the wordpress featured image control integrated into Themler much more

Could you please explain in some details what exactly features you're referring to? Like the initial request about using featured image as header background?

Thank you,
Olivia

Hi, > it would be great to see the wordpress featured image control integrated into Themler much more Could you please explain in some details what exactly features you're referring to? Like the initial request about using featured image as header background? Thank you, Olivia

18 Posts

jamesgander posted this 08 February 2016

Image from file
Clipart
URL

Can there be the option to use the posts featured image? This would be very powerful.

Additionally, back to my original query - using the method you suggested, is there any way I can apply a parallax effect to the div with the featured image? I know I can just set the background as fixed, but it's not quite as nice looking.

Yes - that sort of thing. Adding an option to use a posts featured image in other situations. Currently when you select an image for something (as a background for an element or whatever), you have options such as: - Image from file - Clipart - URL Can there be the option to use the posts featured image? This would be very powerful. Additionally, back to my original query - using the method you suggested, is there any way I can apply a parallax effect to the div with the featured image? I know I can just set the background as fixed, but it's not quite as nice looking.

Support Team posted this 08 February 2016

Hi,

I've added your request to our wish list. Unfortunately I can't say whether this feature be implemented or not and when.

Additionally, back to my original query - using the method you suggested, is there any way I can apply a parallax effect to the div with the featured image? I know I can just set the background as fixed, but it's not quite as nice looking.

No, unfortunately, Themler parallax feature cannot be used in this case.
But you can try using third-party solutions.

Thank you,
Olivia

Hi, I've added your request to our wish list. Unfortunately I can't say whether this feature be implemented or not and when. > Additionally, back to my original query - using the method you suggested, is there any way I can apply a parallax effect to the div with the featured image? I know I can just set the background as fixed, but it's not quite as nice looking. No, unfortunately, Themler parallax feature cannot be used in this case. But you can try using third-party solutions. Thank you, Olivia

You must log in or register to leave comments