Jump to content

Passing Image Field URL to CSS


jasonelise1983
 Share

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

Link to comment
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.

Link to comment
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
Link to comment
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.

Link to comment
Share on other sites

  • 1 year later...
<?
$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
Link to comment
Share on other sites

  • 2 years later...
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 . ")'; " ?>>

 

Link to comment
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Liam88
      Hi,

      After years of just playing around with Processwire I have asked 3 q's in the same week. It's all about working with forms, parameters etc and so I'm hoping this ordeal is nearly over!
      I currently have a checkbox filter:
      <form id="abFilter" method="get" role="form" action="'.$page->url().'"> <div class="list-group"> <h3>Content Type</h3>'; $cont = $fields->get('ab_content'); $contents = $cont->type->getOptions($cont); foreach($contents as $ab_cont){ echo' <div class="list-group-item checkbox"> <input type="checkbox" class="" id="'.$ab_cont->title.'" name="content" value="'.$ab_cont->title.'"'; if (in_array($ab_cont->title, $contArray)){ echo "checked"; } echo'> <label for="'.$ab_cont->title.'">'.$ab_cont->title.'</label> </div>'; } echo' </div>'; //end of filter 1 //start of filter 2 echo' <div class="list-group"> <h3>Channels</h3>'; $chan = $fields->get('ab_channels'); $channel = $chan->type->getOptions($chan); foreach($channel as $ab_chan){ echo' <div class="list-group-item checkbox"> <input type="checkbox" class="" id="'.$ab_chan->title.'" name="channel" value="'.$ab_chan->title.'"'; if (in_array($ab_chan->title, $chanArray)){ echo "checked"; } echo'> <label for="'.$ab_chan->title.'">'.$ab_chan->title.'</label> </div>'; } echo' </div>'; ?> <button id="select">Get Checked Checkboxes</button> </form><!-- end of form --> I also have a piece of script which selects all the checkboxes and then outputs them into readable parameters for the URL which then passes into the $inputs. The reason for the script is to not have duplicate filters like ?ab=1&ab=2 and the script changes it to ab=1_2 which on the input gets exploded into an array. 
      document.querySelector("form").onsubmit=ev=>{ ev.preventDefault(); let o={}; ev.target.querySelectorAll("[name]:checked").forEach(el=>{ (o[el.name]=o[el.name]||[]).push(el.value)}) console.log(location.pathname+"?"+Object.entries(o).map(([v,f])=>v+"="+f.join("_")).join("&")); document.location.href = location.pathname+"?"+Object.entries(o).map(([v,f])=>v+"="+f.join("_")).join("&"); } Here is $inputs and so on on the page:
      //Default selector to get ALL products $baseSelector = "template='adbank_pages',sort=published,include=all,status!=hidden,limit=2"; $selector = "template='adbank_pages',sort=published,include=all,status!=hidden,limit=2"; $input->whitelist('channel',explode("_", $channel)); // Use this to append to the $items filter if($channel){ $chanArray = explode("_", $channel); $chan = $channel = str_replace('_', '|', $channel); $selector = $selector .= ",ab_channels=$chan"; } $test = $pages->find($selector); // This is just testing if the $selector choise returns and if not use page filter without filters. if(count($test) > 0){ $items = $pages->find($selector); // $items with the parameter filter // Example - "template='adbank_pages',sort=published,include=all,status!=hidden,limit=2,ab_channels=facebook-ads" // Example (multi choice) - "template='adbank_pages',sort=published,include=all,status!=hidden,limit=2,ab_channels=facebook-ads|instagram-ads" // Example (with other filters) - "template='adbank_pages',sort=published,include=all,status!=hidden,limit=2,ab_channels=facebook-ads,ab_content=video|static" }else{ $items = $pages->find($baseSelector); // Example - "template='adbank_pages',sort=published,include=all,status!=hidden,limit=2" } $total = $items->getTotal(); I have stripped out a few of the other filters from the above to try keep it a little more concise (haha). Now I appreciate the post may be long but here we are at the end!
      The URL I get on page 1 of the filter results would look like: example.com/blog/?channel=facebook-ads_instagram-ads
      If I click page 2 the url changes to - example.com/blog/page2/?channel=
      If I then click back to page 1 it changes to - example.com/blog/?channel=
      So I'm hoping you can see my problem and hoping someone can assist. I need to work out how to keep the parameters in the url but also if I remove that filter for that parameter to remove.
      This whole process works without pagination but with pagination it has a different behaviour.
      Thank you in advance
    • By Zendex
      Hi,
      I am trying to make a site for a studio, and I wanted to set a specific hover effect for my text. I want the background of the text to be lit up in the full height of the nav bar but it doesn't do it. I showed the expected result in the png in the attached files. I will also set the code here below, the top part is a css reset.
       
      HTML:
      <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>Zendex</title>
          <link href="style.css" rel="stylesheet" type="text/css">
          <link rel="preconnect" href="https://fonts.gstatic.com"> 
      <link href="https://fonts.googleapis.com/css2?family=Offside&display=swap" rel="stylesheet">
      </head>
      <body>
          <div id="nav_bar">
              <div id="Zendex">ZENDEX</div>
      <ul>
          <a href="contact.html"><li>CONTACT</li></a>
          <a href="films.html"><li>FILMS</li></a>
          <a href="about.html"><li>ABOUT</li></a>
          <a href="home.html"><li>HOME</li></a>
              </ul>
          </div>
          <div class="main"></div>
      </body>
      </html>
      CSS:
      @charset "UTF-8";
      /* CSS Document */
      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed, 
      figure, figcaption, footer, header, hgroup, 
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
      }
      article, aside, details, figcaption, figure, 
      footer, header, hgroup, menu, nav, section {
          display: block;
      }
      body {
          line-height: 1;
          background-color: #6A6969;
      }
      ol, ul {
          list-style: none;
      }
      blockquote, q {
          quotes: none;
      }
      blockquote:before, blockquote:after,
      q:before, q:after {
          content: '';
          content: none;
      }
      table {
          border-collapse: collapse;
          border-spacing: 0;
      }
      /*-------------------------------------------------------------------------------------------------------------------------------------------------*/
      #nav_bar{
          overflow: hidden;
          position: fixed;
          top: 0;
          width: 100vw;
          height: 125px;
          background-color: #484848;
          border: solid 1px black;
      }
      li{
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: right;
          margin: 45px 50px 0px 0px;
          height: 125px;
      }
      #Zendex{
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: left;
          margin: 45px 0px 0px 100px;
          color: azure;
      }
      #home{
          
      }
      #about{
          
      }
      #films{
          
      }
      #contact{
          
      }
      ul{
          margin: 0px 50px 0px 0px;
          color: azure;
          height: 125px;
      }
      a:link{
          color: white;
      }
      li:hover{
          height: 125px;
          background-color: #6A6969;
          color: white;
      }
       

    • By milo695
      Hello,
      I've added a class in ProcessPageEditLink but when I call it from Editor (attributes > class) nothing happens.
      Also, I've created the class in my custom.css, is there any other css file this class needs to be in?
      thanks
    • By wwwouter
      Some context: I want to use PHP variables in my CSS (more info below) and found a solution on CSS-tricks that looks fairly elegant and somewhat solid to me. It's pretty simple, I created a file style.css.php inside the site/templates/ directory and load that in my page head. In style.css.php is the following:
      <?php header("Content-type: text/css; charset: UTF-8"); header("Charset:utf-8"); if ($homepage->hero_image) { echo <<<CSS .hero { background: url($homepage->hero_image->url) no-repeat; } CSS; } ?> Because of the following RewriteCond (line 373) in the htaccess file the server sends a 403 error back when the file is requested:
      # Block access to any PHP or markup files in /site/templates/ or /site-*/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/.*\.(php|html?|tpl|inc))($|/) [NC,OR] (My htaccess file is @version 3.0 and @htaccessVersion 301)
      This is how I thought I could fix that (based on these answers on stack overflow) but it does not work:
      # Block access to any PHP or markup files in /site/templates/ or /site-*/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/((?!style\.css).)*\.(php|html?|tpl|inc))($|/) [NC,OR] I tested the rule with htacess tester and htaccess check and both worked for me, but on my site I still get a 403 instead of the file.
      I'm working on localhost, using MAMP (not sure if that's relevant).
      A bit more about what I want to do achieve specifically:
      I want to use an image as a background-image for an element, not place it as an image. This image is provided by the user via a field and can therefore change.
      I know I can achieve this like this:
      echo "<section class='hero' style='background-image: url($page->hero_image->url)'></section>"; But I would prefer a method other than inlining because of scalability and cleanliness. (I admit the extra link in the page head is not ideal either)
       
      P.s. this is my first post here, I hope it's submitted in the right forum and my explanation is clear.
    • By humanafterall
      Hi,
      I have a URL field that will sometimes have relative/local URLs on a multilingual site, for example /contact/ 

      However the URL field does not seem to pick up when I'm on another language, for example /fr/ so I'm taken to the default language page for /contact/ rather than /fr/contact/
      Is there a way to make the URL fields play well with a multi-language site?
      Thanks!
       
×
×
  • Create New...