Thread

Hi, I have a requirement whereby I need images added within EE posts to be outputted as backgrounds within a CSS class.

I have tried to think this out and get this done but have drawn a blank each time and not so sure EE is capable of achieving this.

Below is how I have it at the moment, which is placing an image AND the text within an unordered list along with some inline styles to force alignment - plus the image resizer to resize to the exact size:-

{exp:channel:entries channel="dj_charts" orderby="title" limit="10"}
<li class="djs">{exp:imgsizer:size src="{dj_photograph}" width="40" height="40"}
{sized}
{/exp:imgsizer:size}
title}</li>
{/exp:channel:entries}

Not only is this clunky but it doesnt allow me to pad the text out and fit nicely inline with the image. Is there a method where I can output this so that the image is placed and resized as a background image within the CSS instead, say like below which would output the relevant image?

li.djs {background:url("{dj_photograph}") no-repeat #fff;display: block;height: 40px;line-height: normal;margin: 0 10px 1px 10px;padding: 0;}

As far as Im aware, you cant add EE tags in CSS, is this the case?

Any help would be appreciated.

Thanks

Scott

Who says you can’t?  😉  In fact you can run your whole css file in a template.  Just add an inline style with those properties to your list item.

Hi I tried that but it doesnt work. I do have my whole CSS file within EE as a template but have also tried what you suggested, inline but I need to use the image resizer to output the right sized image, which just doesnt work.

Can you post how you did your inline style?

Sure thing;

{exp:channel:entries channel="dj_charts" orderby="title" limit="10"}
<li class="djs">{title}</li>
{/exp:channel:entries}

Not only did that not work but I would also need the image resizer to resize the image to 40px x 40px, surely that cant be included within the CSS can it, inline or linked?

Thanks for your help

Oh, I see what you did.  I mean something like so:

{exp:channel:entries channel="dj_charts" orderby="title" limit="10"}
{exp:imgsizer:size src="{dj_photograph}" width="40" height="40"}
<li class="djs" {sized} ") no-repeat; height: {height}px; width:{width} " alt="{title}">{title}</li>
{/exp:imgsizer:size}
{/exp:channel:entries}

Darn it!  it stripped my style

what the Hezzy!  keeps striping out my code:

{exp:channel:entries channel="dj_charts" orderby="title" limit="10"}
{exp:imgsizer:size src="{dj_photograph}" width="40" height="40"}
<li class="djs" styl+e ="background: url("{sized}") no-repeat; height:{height}px; width:{width}px" alt="{title}">{title}</li>
{/exp:imgsizer:size}
{/exp:channel:entries}

Remove the + from style…

Thanks, this worked and although Im not a fan of using inline styles I think this is the only and best method 😉

Works well,

Scott

Glad to help!

Thanks again for this - works brilliantly