Forums / Setup & design / using texttoimage in stylesheet

using texttoimage in stylesheet

« 
Previous topic
|
Setup & design
|
Next topic
 »
Author Message

Alberto Perni

Saturday 19 November 2005 12:59:46 pm

Hi there!

Is there any way to use texttoimage within a css style? Be it within an external .css or within a template. I've been searching for any similar case but so far I haven't found anything :(

I'm using xhtml & css to build a site, so I basically want to 'substitute' text headers for images (using css). This way my xhtml is keeped clean, without these headers as img tags, but with simple <h[1-6]> tags overridden by a background-image for instance.

Example:

<h3>title</h3>

and in the css:

#h3 {
background: url("GENERATED_USING_TEXT_TO_IMAGE");
}

Thanks in advance!

Roy Bøhmer

Saturday 19 November 2005 2:46:20 pm

I'm on really thin ice here, but I think it should be possible. But you have to write the css-statement directly in the template - not in an external .css-file.

The styles have to be surrounded by {literal}{/literal} so the curly brackets wont be interpreted by ez-template engine. 

<style>
{literal}
h3 { 
{/literal}
{"Your text"|texttoimage('h3')}
{literal}
}
{/literal}
</style>

I've not tried the above code. Hope you'll work it out!

Roy

Alberto Perni

Saturday 19 November 2005 3:04:11 pm

Thanks for you reply Roy! :)

Alas, AFAIK, that would create an <img> tag within the css statement.

I guess I'm looking for something that could generate the texttoimage image, and return me a string containing the url to it, instead of dynamically writing the html code.

Any help on this?

Roy Bøhmer

Saturday 19 November 2005 3:50:03 pm

Oops... was a little to quick there, I guess.

A little resarch found: design/standard/templates/image/layer.tpl is used as template for the texttoimage. (You should copy the file to your own design...)

But if your using this for other purposes than css I'll guess you have to do some serious overrides or perhaps some if-statements in the template. I've no ides which other functions in ez that relies on the above mentioned template.

Roy

Alberto Perni

Saturday 19 November 2005 6:09:29 pm

Thanks for the tip Roy!

I have succesfully managed to adapt layer.tpl to make it return only the full url to the image generated by texttoimage:

content of layer.tpl:
{$layer.imagepath|ezroot("single")}

The "single" parameter adds single quotes to the url. Handy for applying this to the css statement.

However, as you've mentioned, it has its drawbacks. I've seen that Imagefile() also makes use of this template.

Sorry if this sounds crazy, but is there any way to create an override just for the texttoimage function?

The perfect solution would be a method, function or a parameter to either image() or texttoimage() telling I only want the url of the image. So far I haven't found anything :(