CSS background-image

[NoDice]

Well, I guess this certainly would qualify as an embarrassing rookie-question, so at least I am in the right forum section. 

I am trying to call on a background-image from css (since this is the way the slider I am going to use is set up). I read this thread:

http://processwire.com/talk/topic/3924-passing-image-field-url-to-css/

But I can't get it to work.

One difference, I guess, is that I am calling on another page (hidden non template file site-setting page) for the image. Here is the working code I use in html to call on the image:

<div id="logo"><a href="/xxxx/"><img src="<?php echo $pages->get("/site-settings/")->top_menu_logo_01->url; ?>"></a>

What would be the syntax to set the same file as a background-image with css from a css-file? And do I have to do anything to the htaccess-file or such to enable php for that css-file? 

Any hint in the right direction on this would be much appreciated, since I don't want to resort to simply calling on the files from the /assets/files/ structure folder holding the image in question (works for now, but I feel it slightly defeat the purpose and workflow principle of using PW). 

[teppo]

You can't use PHP in CSS files by default. I'm sure you could find some discussions about that from the forums, but for now I'd suggest slightly different approach. Do something like this for the element you want to have a background-image for:

<div<?php if ($pages->get("/site-settings/")->background_image) echo " style='background-image: url(" . $pages->get("/site-settings/")->background_image->url . ");'"; ?>>

Rest of the settings (background-position, background-repeat, background-color etc.) you can define in your CSS file. This is probably the easiest way to get past this -- it adds a bit of inline style to your markup, but that's a very minor issue here.

[NoDice]

You can't use PHP in CSS files by default. I'm sure you could find some discussions about that from the forums, but for now I'd suggest slightly different approach. Do something like this for the element you want to have a background-image for:

<div<?php if ($pages->get("/site-settings/")->background_image) echo " style=''background-image: url({$pages->get("/site-settings/")->background_image->url})"; ?>>

Rest of the settings (background-position, background-repeat, background-color etc.) you can define in your CSS file. This is probably the easiest way to get past this -- it adds a bit of inline style to your markup, but that's a very minor issue here.

Ah, thanks so very much for that lightning fast reply! I was kind of hoping to avoid that (inline style), but if there is no way around it, I can probably live with it.  

[teppo]

Sometimes a bit of inline CSS is better than a whole lot of other hacks to get past it.

One of the discussions I mentioned is this: http://processwire.com/talk/topic/2210-help-getting-a-custom-styles-php-file-working/. In a nutshell you'd have to use a .php file for your CSS and send a header telling browser that it's actually CSS file. Not very difficult, but I'd still avoid it unless it's really necessary.

By the way, I replied too hastily (tried and true "reply fast, edit later" strategy) and that code there has a few issues. I've corrected them to my reply above, so you might want to check it out before trying this..

[dragan]

It's possible to create a PHP file that serves as CSS. Make sure you add something like this at the very top (headers)

<?php 

header("Content-type: text/css; charset: UTF-8"); 

?>

If you place such a file in site/templates/ (with .php suffix), PW will most likely guess this is a template file though. Maybe there will be conflicts when you (the browser) attempts to access this .php file directly. Guess it's worth a little test though...

edit:

sorry, teppo was faster than me

I agree - if you can avoid such "php serving as css" tricks, better stick to some other method...

[NoDice]

I have to say I am kind of still stuck on this topic, and the image-handling is the one thing I can't quite understand when it comes to pw.

It seems to shaky (and may cause other problems). 

My problem is that the classes for hover-states for the flexslider carousel that I need to set background images for are dynamically produced by the plugin. You only style it by going into the standard supplied CSS to make alterations, so that is where I can change the images link for navigation direction for instance, to something I have made that better matches the overall design. 

I am just not sure how to deal with that. To me, it seems extremely basic to be able to handle background images from CSS as intended from the perspective of separation of design and markup. That this basic thing is a problem for processwire just can't be good from my admittedly extremely uneducated perspective. 

So how would you handle this? So far, during construction, I have put the image in a page and linked the asset folder by number after looking for it in the folder structure. However, since that can change number, that does not seem robust enough for production.

At this stage, I am thinking of just making an image folder and just retreating images that the users will not touch from there completely outside the CMS. Since I use some background images for basic design, that could probably handle all of those so I could follow a principle (and separation of style guidelines) throughout; but, on the other hand, that would also kind of defeat the purpose of a CMS when it comes to handling all content.  

What does the forum suggest? And wouldn't it be reasonable to have at least one "fixed address" asset folder for files that can be called both from the CMS-framework AND from CSS for instance? 

Or am I still just missing something very basic here? 

[kongondo]

I am just not sure how to deal with that. To me, it seems extremely basic to be able to handle background images from CSS as intended from the perspective of separation of design and markup. That this basic thing is a problem for processwire just can't be good from my admittedly extremely uneducated perspective.

So how would you handle this? So far, during construction, I have put the image in a page and linked the asset folder by number after looking for it in the folder structure. However, since that can change number, that does not seem robust enough for production.

At this stage, I am thinking of just making an image folder and just retreating images that the users will not touch from there completely outside the CMS. Since I use some background images for basic design, that could probably handle all of those so I could follow a principle (and separation of style guidelines) throughout; but, on the other hand, that would also kind of defeat the purpose of a CMS when it comes to handling all content.

What does the forum suggest? And wouldn't it be reasonable to have at least one "fixed address" asset folder for files that can be called both from the CMS-framework AND from CSS for instance?

Or am I still just missing something very basic here?

Please ignore me if I seem to be rambling....I just quickly read this...Yes and Yes. You can have your CSS call images from an assets folder. No need to put those images in a page first...

[kongondo]

I am trying to call on a background-image from css (since this is the way the slider I am going to use is set up). I read this thread:

http://processwire.com/talk/topic/3924-passing-image-field-url-to-css/

The question on that post was about having a different background image per page. Since CSS is not dynamic, that could only be done via PHP. Do you want different background images for your pages? If not, just do it the normal HTML/CSS way. No PHP required. I have an images folder in my css folder (/site/templates/css/images). No PHP involved; just plain old CSS. Maybe am missing something?

[NoDice]

Well, then those images won't be visible or editable from the CMS, if I understand correctly? I certainly would have preferred to have them also visible and manageable from the CMS like other images. 

The first question was a while ago so this is more a follow up after still not having found a way that feels right. 

[kongondo]

Maybe you could elaborate more on the use case? In my example, the images I am referring to are for styling purposes. They do not need to be editable in PW. In your case, you are trying to implement a carousel? Can you give us the name of the plugin (I'm guessing it is jQuery based?). Who will be editing the images? You or the client?

Edit:

Just seen the name in your post above - flexislider...

Edit 2:

Is this the slider?

[kongondo]

NoDice,

I have re-read your post #6 and am still confused

1. By background images, you referring to the arrow images that control the "pagination" of the carousel? (e.g. bg_direction_nav.png).

If yes, why would you want to edit those in PW?

2. If by "background" images you refer to the images actually looped through (the carousel), then those are not supplied by CSS as far as I can see. They are directly in the HTML. I have not seen any requirement to use background images as you state in you OP?

My problem is that the classes for hover-states for the flexslider carousel that I need to set background images for are dynamically produced by the plugin. You only style it by going into the standard supplied CSS to make alterations, so that is where I can change the images link for navigation direction for instance, to something I have made that better matches the overall design. 

How is that a problem? Wont flexislider produce consistently produce the same classes (e.g. flex-next and flex-prev) that you can style by overriding in your own CSS file?

So how would you handle this? So far, during construction, I have put the image in a page and linked the asset folder by number after looking for it in the folder structure. However, since that can change number, that does not seem robust enough for production.

Quick clarification. The folder number is the ID of the page. That never changes....btw .

Anyway, I'll let you explain what you are after. 

[NoDice]

Yea that is the slider, I am changing the arrows to my own design and I may go with different arrows depending on class of "dark" and "light" for the main image. I would like to have them all visible and manageable with all the rest of the content. I have similar background arrow-images for things like links, and I wan't to have all my custom site specific content visible and manageable from my content management system. 

At first I had these arrows on my banner-configt-page, but after changing that around a bit once, they disappeared (don't remember what I did, may have recreated it with the same fields, but I got a new number on the asset folder anyway - which I found out after having spent some time trying to figure out why the did not display). 

Anyway, I thought the whole point was having the images on content related pages of that kind, and if so, then looking for the asset folder number and linking them that way seems like a bad solution even if you never recreate or move stuff (which I am sure I will do). 

Now I have moved these images to a dedicated image page instead (with other similar graphics files), since I felt I had to do that to make sure they would not be moved by mistake again during production re-structuring.

The image page setup will probably work, but if you have to do that anyway - and then make sure that page number stays the same for non managed part like CSS to work - why not have such a managed, non "changeable" asset folder (that is also an actual folder, say "media") where you always know the link from the start? To me it just makes more sense, but I am new at this so maybe I will see the light at some later stage. 

[kongondo]

The image page setup will probably work, but if you have to do that anyway - and then make sure that page number stays the same for non managed part like CSS to work - why not have such a managed, non "changeable" asset folder (that is also an actual folder, say "media") where you always know the link from the start? To me it just makes more sense, but I am new at this so maybe I will see the light at some later stage.

The discussion about an images "bucket" has been around for a while (can't find links atm). I still fail to see why you are treating CSS images as content though. But we all work differently I guess, so if that suits you, go for it

[NoDice]

The discussion about an images "bucket" has been around for a while (can't find links atm). I still fail to see why you are treating CSS images as content though. But we all work differently I guess, so if that suits you, go for it

Because, to me, it is nice to quickly asses what site specific graphical content I have created for a project; and to be able to easily manage and change that content on the server without having to access it with ftp (and make do without clear graphical representation of images and such). 

The longer since I actually did the work on the site - the happier I will probably be to have that quick easy access overview when I go back to manage/edit it. 

To me, that is part of the reason I wanted a CMS. 

[kongondo]

OK. So just make sure you do not delete that "settings" page . You can create it as a child of admin so that it is hidden from the frontend. 

[Soma]

To me it sounds more like you want a custom admin page to frame a pho ftp client to access and upload your design files from the admin instead over a IDE or coding tool ftp.

[NoDice]

To me it sounds more like you want a custom admin page to frame a pho ftp client to access and upload your design files from the admin instead over a IDE or coding tool ftp.

That is probably the case as I am developing for my own businesses and just want a nice overview of what custom assets are linked to that page. I would be kind of surprised if there are not more people that find such a fixed media area that does not change (with the same way of being called upon over more than one project). Of course, as stated, that may be just because I have not seen the light just yet. 

Thanks for all the responses though, I will ponder my alternatives, but guess I will stick with the image asset folder and make sure it is not changed! 

[NoDice]

I have to ask one more thing in relation to this. I have made a repeater with images that are supposed to line up in an evenly spaced row using the last technique described here (inline block and justified):

 http://css-tricks.com/equidistant-objects-with-css/

I have only gotten this to work using background-style which I can only set from CSS.

The point is to just being able to keep adding images (in this case logos) and having them line up evenly spaced without using percentages that change etc - and the repeater seems ideal for that. But then I can't use the repeater to set background images as I believe I need urls for the CSS inline style, and the asset folders get dynamically produced. 

What an I missing as far as how to solve this? Or is there no way to make it work as I planned? 

*** EDIT: Maybe I could instead generate div-classes depending on how many logos I put in, and then have different styles in the css for up to as many classes as I see as the maximum that would feasibly be used.

Seems a bit messier but if that is the only way, suggestions on how to generate class-names depending on number of repeater-items would be much appreciated. ***

[Martijn Geerts]

Lot of questions no answers:

Where you need the repeater for ?

And why not percentage ?

Should there be a max on images on 1 row?

Or always 4 next to each other for example?

[NoDice]

Lot of questions no answers:

1 Where you need the repeater for ?

2 And why not percentage ?

3 Should there be a max on images on 1 row?

4 Or always 4 next to each other for example?

1 Since more logos will be added with time and I just want the users to add images in the CMS and have them spread out evenly over the row. 

2 Since the numbers will range up and down from 3 to perhaps 6-7 images. The goal is not to have to touch the style or markup when you add images. 

3 No max per se, but of course there will be a limit based on space and it will be pretty obvious when that gets crossed, and I don't see that being reached anyway. 

4 No, that is the point, sorry for not making that clearer. The number of logos in the row will change. 

The goal would be to have it work 100% dynamically from the CMS, but if I give that up, I know I have lots of options. php in stylesheets could also handle the problem I guess, but I was advised against going that rout. 

[Martijn Geerts]

Maybe something like this.

<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {  display: block; }
    
    li {
        position: relative;
        display: inline-block;
        text-align: center;
    }
    
    img {
        max-width: 80%;
        height: auto;
    }
</style>
------------------------------------
$images = $page->images;
$count = count($images);
$width = 100 / $count
$width = floor($width * 1000) / 1000;

if($count) {
    echo "<ul>";
    foreach($images as $image ) {
        echo "<li style='width: {$width}%;'><img src='{$image->url}' /></li>";    
    }
    echo "</ul>";
}

Not tested.

grr editor....( How the ... can Kongondo make posts like they are printed from a book )

Edited August 16, 2013 by Martijn Geerts

[NoDice]

Thanks so much for that suggestion and taking the time to write it down, I will give it a try! (I did not think of the fact that the percentages could be altered by using inline style.)

**Worked great in my design! Still don't quite like he inline style, but I can certainly live with it. Thanks again!**

[diogo]

( How the ... can Kongondo make posts like they are printed from a book )

 

And have you seen the posts from Horst?

[Pavle]

I know that's it is not really relevant anymore as this topic is quite old already, but just for future reference, if somebody will stumble upon this

It might be possible with css attr() function. Main support is for fetching content for :before & :after content, but there are other properties (like uri()) that are in the time of writing still experimental, but will probably get supported shortly (I hope). Read more about it here.

[jomytago]

More about.....CSS Background Image

Jomy