Jump to content
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

Have you set the image field to single image?

  • Like 1

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By stanoliver
      Hi! 
      The following code snippet is part of my markup simple navigation and the url_redirect (url field in the backend) just works fine when I put an special custom url into the url_redirect field.
      <?php $nav = $modules->get("MarkupSimpleNavigation"); // topnav $current = $page->rootParent(); // current root page // subnav echo $nav->render(array( 'max_levels' => 2, 'item_tpl' => '<h4><a class="g8-bar-item g8-hover-black" href="{url_redirect|url}">{title}</a></h4><hr class="sidenav">', 'collapsed' => true, ), $page, $current); ?>  In my seperated breadcrumb navigation I use the following code snippet
      <?php foreach($page->parents()->append($page) as $parent) { echo "<li><a href='{$parent->url_redirect|url}'>{$parent->title}</a></li>"; } ?> Now to the problem: In my first code snippet above the
      url_redirect|url 
      works just fine but when I try something similiar in the second code snippet
      $parent->url_redirect|url
      I produce an server error How do I have to change the second code snippet so that it works in the correct way as the first code snippet does?
    • By stanoliver
      My aim is to output a very basic xml document which should be styled with a few css-styles.
      <?xml version = "1.0"?> <contact-info> <name>Donal Duck</name> <company>Superducks</company> <phone>(011) 123-4567</phone> </contact-info> How do I implement it with processwire?
    • By gregory
      Hi everyone.
      I can't see the PDF uploaded via a field called "pdf".
      I get a url like this: http://localhost:8888/mywebsite/site/assets/files/1129/test.pdf%EF%BB%BF%EF%BB%BF
      Could anyone help me? Thank you.
      <?php foreach($page->case_studies as $item) { if($item->type == 'contenuto') { echo " <a class='btn btn-primary btn-sm' target='blank' href='{$item->pdf->first()->url}' role='button'>Download</a> "; } } ?>  
    • By ce90
      Hello everyone,
      hopefully this is the right place to ask and is not a duplicate question.
      I'm pretty new to processwire, so... if this question is kind of funny for some of you, you're welcome 😄 
      I have the following issue and can't find anything understandable about it. Maybe I'm searching the wrong way, but anyways.. here is my question:

      How is it possible to rewrite the URLs, that I'll get a *.php ending?
      Example:
      https://www.mysite.de/urlsegment/ -> https://www.mysite.de/urlsegment.php
      https://www.mysite.de/urlsegment/urlsegment/ -> https://www.mysite.de/urlsegment/urlsegment.php
      Because I've read a lot about "Why do you wanna do this or have that?" – here my answer for that in advance:
      I've built a processwire installation inside or around an existing website. Therefore, we want to keep the existing *.php Google entries. Sure, we could redirect via 301 Redirect, but would prefer to keep the *.php ending.
      If you have further questions, please do not hesitate to ask.
      Thank you in advance for your help.

      Best regards
      ce90
    • By Chris Bennett
      Not sure where I originally saw it while lurking around the forums, but someone, somewhere at some time was asking about styling Uikit checkboxes as toggle-style switches, much like the ones at the bottom of this post asking me if I want to be notified of replies.
      So here is my humble offering, rough and ready,  which can be thrown in at the bottom of your Uikit css as a starting point.
      Everything is based on ems and rems, so you can increase size as you desire by altering the single instance of font-size.
      It only targets single instances of labels within a specific field to a) try to limit unintended consequences and b) because in those cases it often seems more user-friendly to have an on/off binary switch rather than a checkbox. It's still totally a checkbox, just styled differently.
       
      .uk-form-controls-text label:only-of-type input.uk-checkbox { font-size:.8rem; margin-top:0; position:relative; -webkit-appearance:none; outline:none; width:4em; height:2.4em; border:2px solid #D6D6D6; border-radius: 3em; box-shadow:inset 5em 0 0 0 #DDD; flex-shrink: 0; } .uk-form-controls-text label:only-of-type input.uk-checkbox:after { content:""; position:absolute; top:.25em; left:.25em; background:#FFF; width:1.6em; height:1.6em; border-radius:50%; transition:all 250ms ease 20ms; box-shadow:.05em .25em .5em rgba(0,0,0,0.2); } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked { background-color: transparent; box-shadow:inset 5em 0 0 0 #4ed164; border-color:#67bba5; } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked:after { left:1.85em; box-shadow:0 0 1em rgba(0,0,0,0.2); } label:only-of-type input.uk-checkbox:checked + span { color:#008a00; transition:all 250ms ease 20ms; } .InputfieldCheckbox .InputfieldContent label:only-of-type {display:flex;} label:only-of-type input.uk-checkbox + span { color:#c3c3c3; display:flex; align-items:center; line-height:1.1; } /* Below is only necessary if you want the optional "tick" after items when selected */ label:only-of-type input.uk-checkbox + span:after { flex-shrink:0; margin-left:.5em;width:2em; opacity:0; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Ccircle cx='125' cy='125' r='125' fill='%23231F20' opacity='.1'/%3E%3Cpath fill='%230B8B44' d='M95.823 139.432l-32.492-32.56-31.872 31.883-.008-.008 63.72 63.732L218.549 79.116 187.494 47.52z'/%3E%3C/svg%3E"); } label:only-of-type input.uk-checkbox:checked + span:after { opacity:1; transition: opacity 250ms ease 150ms; }  

×
×
  • Create New...