Selecting images per document

I am using the same template for a set of documents (pages). Each page uses a different image in a left-hand div. May I use template variable or chunks or both or to associate the correct image with the correct page; all pages using the same template.

Sample syntax appreciated too.

Piece of cake. Use a TV where you want the image to be, set the TV to give access to your template, and edit for each page as desired! The way I did it was to make a <img> tag as usual, with the relative path to where my images are stored, only I replaced the actual image file’s name with the TV. The TV is set to use Text for its input, so for each document you get a regular text input field for the filename of the image for that page.

In this case, I used it in a css document for different background images for the top banner:



The TV (the Input type is Text, and the Default value is default.jpg; this presumes default.jpg is actually a default image in the assets/images/header folder):


Editing the document (just change the image name):

Quote from: sottwell at Mar 27, 2006, 11:44 PM

In this case, I used it in a css document for different background images for the top banner:

#headerImageUL{
background:url(assets/images/header/[*upperLeftImage*]) top left no-repeat;
}

Is your CSS file is a document object of ModX ? I don’t think the TV can be inserted in a simple CSS file.

Yes, that’s what I meant by "css document" as opposed to "css file".

An other way would be to use a TV with input and output type set to image. Because of input type image you get an imagebrowser to select the image when editing the TV in the manager. And because of the output type image you just put [*tvname*] in your template and MODx will generate the <img> tag for you.

Yes, that too. I’m just not familiar with the TV widget set.

Susan - works like a charm.

Mitch - seems wicked cool. I tried it but only got part of the way there:

1. Defined the template variable as per your instructions.
2. Inserted the template variable (not in CSS defs but directly into the html.
3. Selected the image in my document.
4. It displayed the image with a scroll bar. Displaying on my web page under the image was the full path to the image that was inserted into the document after grabbing the image using the TV widget - the long (displayed) path triggered the scroll bar.

Please advise.

Now you know why I use the method I do; "wicked cool" is nice, but I much prefer "works like a charm"

Maybe the follow-up to this thread will help me understand this TV widget as well.

Ho

I know this thread is pretty old, but i just wanna do the very same thing so i found this thread ....

I just want to ask what a document object CSS is and how can i use it?
In which CSS document do i have to call the TV?

anyone can help me?

please, help :]