How to place one image per article in template's div-container?

Hello,

I did my first table-less template, which works fine. Now I want to place content and one image into it. I know that there is a tv called "content", but I guess I would need s.th. like "default-image" too. As I’m quite knew to modx, I maybe understood it wrong. If not, I think I had to do an own tv?

To make my problem more clear, here is a part of my template:

<DIV id=left>
<!-- Bild links -->
^^^^^^^^^^^
<img width="375" height="400" src="">
</div>
<DIV id=content>
[*content*]


</DIV>

At the line marked with ^..., the image should be inserted.

How can I do this?

Any help is greatly appreciated!

Frisco

Personally, I would certainly use a TV to place the image in there, and use the @INHERIT binding so that all documents/articles would adopt a default image that you could alter on a per-page basis if required.

I’m not a template king though, perhaps one of the more experienced templaters could give their thoughts?

Cheers, Garry

Exactly what Garry said above.

Additionally here is a quick review:

Create a TV named [*default-image*] from resource section, select URL from Input type, and insert it in your template like this:



Hope it helps.

regards,

zi

Quote from: zi at Mar 16, 2006, 02:52 PM

Create a TV named [*default-image*] from resource section, select URL from Input type, and insert it in your template like this:

Any special reason why you use the URL type here instead of the image type? I use this with a TV that has input and output type "image" and it gives me the nice imagebrowser in the manager and I just put [*tvname*] in my document.

Quote from: Mitch at Mar 16, 2006, 02:56 PM

Any special reason why you use the URL type here instead of the image type? I use this with a TV that has input and output type "image" and it gives me the nice imagebrowser in the manager and I just put [*tvname*] in my document.

Nothing special, but never used myself actually .. There are always multiple ways to do same stuff in MODx .

But I think yours is better. Thanks for sharing

regarsd regards,

zi

Quote from: Mitch at Mar 16, 2006, 02:56 PM

Any special reason why you use the URL type here instead of the image type? I use this with a TV that has input and output type "image" and it gives me the nice imagebrowser in the manager and I just put [*tvname*] in my document.

Thanks alot,

I did it that way, and it works great, exactly what I want. I have to have a closer look at @inherit, although I don’t need it here, as every article gets its own image. With "default" I meant that each article should have at least on image at a given place. Anyway, default elements like images which could be overwritten on article basis are a great design opportunity, thanks for the hint!

BTW, I defined the TV with input type image, how about the output type? Is that the select-box with entries like "Data Grid" or "Floater"? What would be the difference - that it outputs the whole image-tag and not only the src=-part?

For now I have to fight browser specific CSS, it looked great in IE but with Firefox 1.5 it’s a bit scrambled Are questions regarding CSS-problems welcome here?

Thanks alot so far,
Frisco

Quote from: Frisco at Mar 16, 2006, 04:07 PM

BTW, I defined the TV with input type image, how about the output type? Is that the select-box with entries like "Data Grid" or "Floater"? What would be the difference - that it outputs the whole image-tag and not only the src=-part?

You got it, you can set the properties in the widget and that controls the output, in this case it would render the <img> tag for you.
Quote from: Frisco at Mar 16, 2006, 04:07 PM

it looked great in IE but with Firefox 1.5 it’s a bit scrambled Are questions regarding CSS-problems welcome here?

Well, makes a change from IE being the culprit As for CSS questions, don’t see why not

Quote from: garryn at Mar 16, 2006, 04:15 PM

Quote from: Frisco at Mar 16, 2006, 04:07 PM

BTW, I defined the TV with input type image, how about the output type? Is that the select-box with entries like "Data Grid" or "Floater"? What would be the difference - that it outputs the whole image-tag and not only the src=-part?

You got it, you can set the properties in the widget and that controls the output, in this case it would render the <img> tag for you.

Ah, nice to know - I had some difficulties with the documentation, know it’s more clear to me. I always thought custom TVs would give elements for the user side (i.e. like a ticker), didn’t know that they can be used for the admin-part as well.

Quote from: garryn at Mar 16, 2006, 04:15 PM

Quote from: Frisco at Mar 16, 2006, 04:07 PM

it looked great in IE but with Firefox 1.5 it’s a bit scrambled Are questions regarding CSS-problems welcome here?

Well, makes a change from IE being the culprit   As for CSS questions, don’t see why not 

Well, nice to here, I’ll make a new topic for my css-problem then. BTW, I had to do it for IE first, since this is the only browser I’m allowed to use at work

Thanks for helping!
Frisco

BTW, I defined the TV with input type image, how about the output type? Is that the select-box with entries like "Data Grid" or "Floater"? What would be the difference - that it outputs the whole image-tag and not only the src=-part?

Just to make clear:

Select "Image" as input type and "Image" as widget. Here you can define more attributes for this image. You can also mix up several TVs. For example use for the image description (alt-Tag) an extra created TV, for example [*image_description*], this you can put into the field "alternate text". So you don´t have always the same alt text defined for your image TV.

The only problem I have with this widget is the use of "attributes", see here. I actually don´t know how to add attributes (liken an "id") to the image.

Gruß Marc