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

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

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
<?
$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
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 Peter Knight
      Playing around with the UIKit theme this morning and tweaking it.
      It's called UIKit Classic and it's a nod to the Classic theme. 
      For me the Classic theme always sticks in my mind as being most definitively Processwire-ey because
      It was my fist intro to PW I thought the colours were quite unique and like the mix of blue, pink and green. They're very distinctive and I'd hate for PW to look like just another WP install. In a crowded CMS marketplace I think it's good to differentiate visually. The two screengrabs are just the same screen. A before and an after. 
      I put this together using the Chrome the web inspect tool so there's no fancy mixins or LESS etc. Actually there's not even any CSS now that I've refreshed the page.
      I do think there needs to be a detailed comprehensive through tutorial for people wishing to make their own themes. Probably 85% here don't need it and understand the directory structure and how it's all compiled but equally I think there's another 15% here with the design skills but not the tech chops to get this done. If we want designers to design themes then we need the process with screengrabs, list of software (I have CodeKit, Dreamweaver, Sublime etc).
      Anywho - just my 2€ worth

       
      The before shot below...

    • By louisstephens
      Perhaps someone can help me on this. I recently started poking around at uikit (I have used bootstrap and foundation previously) as I liked the admin theme and a few of the components. However, their documentation is a bit confusing and I can never get the desired results. I am sure I am doing something wrong, but I did not want to digg into v2, if things will be changing (for better or worse).
       
      I have the following:
      <div class="uk-section"> <div class="uk-container uk-container-large"> <div class="uk-child-width-1-1@s uk-grid-small uk-grid-match" uk-grid> <div class="uk-width-1-2"> <img src="images/logo.png" alt="" width="1183" height="167" /> </div> </div> </div> </div> <div class="uk-section"> <div class="uk-container uk-container-large"> <h3>Section</h3> <div class="uk-child-width-1-4@m uk-grid-small uk-grid-match" uk-grid> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Default</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Primary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Secondary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Secondary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> </div> The cards at the bottom stack on mobile which is the desired effect. However, the logo at the top is squished and on mobile does not seem to be resizing to take on the .uk-child-width-1-1@s. Is there a way to prevent the logo from squishing, and for it to resize with the browser? 
      I have noticed when I do 
      <div class="uk-section"> <div class="uk-container uk-container-large"> <div class="uk-child-width-1-1@s uk-grid-small uk-grid-match" uk-grid> <div class="uk-width-1-2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="uk-width-1-2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> that the grid also does not collapse to full width either. I am positive I have just missed something in the documentation, or how uikit is supposed to work. However, for the life of me I can not find it.
       
    • 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?