jasonelise1983

Passing Image Field URL to CSS

Recommended Posts

So I'm new to this. But i'm trying to set up a site, and I want to have a different background image for every page. My plan was to put an image field on on every page in the template and then pass that image url to the background-image style for that page. Maybe there is an easier way to do it, but it seemed like a good place to start. Anyone have any advice on how to do what I'm saying or to do something similar. Thanks

Share this post


Link to post
Share on other sites
kongondo    5,014

Hi jasonelise1983,

Welcome to ProcessWire.

I think it is better to do this with CSS. Set a different ID for each page using your template file. E.g.

<body id ="<?php echo $page->name;?>"> 

You can then target those IDs with your CSS. Just make sure you choose a PW field that will return a value that will form a valid HTML ID.

Share this post


Link to post
Share on other sites
apeisa    3,543

That solution doesn't scale, if client adds new page each day...

I would add new image field called background image, set it to have only one image and then add this to template file:

<style>

body {

background: url(<?= $page->background_image->url ?>;

}

</style>

(written in mobile)

  • Like 4

Share this post


Link to post
Share on other sites

Apeisa... that is exactly what i wanted. That's perfect. I'll try that out and see if it works. 

Kongondo, That was my initial plan too... was base everything on the body id, and pass the page name to it. But it was the scalability i was thinking didn't work. Thanks for your input though. ProcessWire is a dream to work with so far.

Share this post


Link to post
Share on other sites
naldrocks98    2
<?
$topleft = $page->topleft_header;

?>

<div<?php echo " style='background-image: url(" . $topleft->url . "); " ?>>

Can't make it right...what is the problem here..

any solution here....

thanks in advance.....

Edited by LostKobrakai
Please do not just paste code as text

Share this post


Link to post
Share on other sites
Marcel Epp    10
On 4.5.2015 at 10:15 AM, naldrocks98 said:

<?
$topleft = $page->topleft_header;

?>

<div<?php echo " style='background-image: url(" . $topleft->url . "); " ?>>

Can't make it right...what is the problem here..

any solution here....

thanks in advance.....

I think there is a missing '

<div<?php echo " style='background-image: url(" . $topleft->url . ")'; " ?>>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By EyeDentify
      Simple example for loading template specific CSS file.
      This example asumes that you have your CSS file in a directory relative to template root.
      Like:
      templates/css/my_template_specific.css
      Also i use in the template a simple text field to hold the name of the CSS file i want to load.
      I call this field 'css_file'
      Use what you feel comfortable with.
      So in your header section of the DOM notice the "page specific CSS" part?
      Thats were the magic happens. What happens is that we check to see if the file exists in the CSS dir relative to template root.
      And if it does we load it. Simple and effective.
      I load all other CSS that is used all over the site in global_styles.css first.
      And make sure you load template specific last, because then you can easily override CSS in global.
       
      DOM header example:
      <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><?PHP echo($page->title); ?></title> <!-- main CSS --> <link rel="stylesheet" href="<?PHP echo($config->urls->templates); ?>css/global_styles.css"> <!-- page specific CSS --> <?PHP /* Use relative path in file_exists() */ if(file_exists('css/' . $page->css_file)) { echo("<link rel=\"stylesheet\" href=\"{$config->urls->templates}css/{$page->css_file}\">"); } ?> </head> <body> Thats my way of doing it. I am sure there is plenty of more ways to do it. This is for the newbies or anyone that wants more options.
      Good luck with your CSS out there in Cyberspace.
      Cheers from EyeDentify
    • By devatgwl
      Hello,
      I'm wondering how to add the value of a field to a URL when submitting a form, while also processing the form with FormBuilder and storing the entry in the CMS. Is this even possible with the versions below?
      FB 0.2.5 | PW 2.7.2
      Is there still a dedicated Form Builder forum here anymore?
    • By helmut2509
      Hello,
      I am just working on a multi-language pw app. Default language is german, then comes english.
      the language segment for english in the url is 'en-home' , eg. '../en-home/products', I think this was taken as a default option.
      (this happened several months ago, so I do not remember exactly...).
      Now I want to change this segment simply to 'en'. However, in 'Pages...Settings', only the part AFTER 'en-home' is editable, so I do not see any possibility
      to change this segment. Neither do the Languages Settings offer such a possibility ;-((
      Or do I miss something?
    • By Roych
      Hello,
      I need some help with changing the URL for default language pages. I have two languages one is hidden at the moment for future use. Now I would like the default language URL to be only the site name and a page without /en how can I achieve that.
      I want my URL to be like www.mysite.com/jobs and not www.mysite.com/en/jobs. Now only the home page has the right URL all other have /en. ...
      I looked through the forum but no luck so far.
      Thank you
      R
       
      Ok, I got it, I just had to delete the EN in my homepage setting and now it is working, I found it on a forum. Thank you anyway   
    • By dweeda
      I put a CSS file in the /templates/styles/ folder and try to link from a published file in the /templates/ folder:
          <link rel="stylesheet" type="text/css" href="./styles/NavUserHdr.css">
      Doesn't see the file.
      What am I doing wrong?