And once more with comments (also attached as html):

-----

<div id="[assetname]<tmpl_var assetId>" class="[assetname] [specific asset]">
//id with assetname and assetID
//class with assetname and optional specific version of asset (e.g. article with image)
//example: <div id="article<tmpl_var assetId>" class="article withImage">

<a name="id<tmpl_var assetId>" id="id<tmpl_var assetId>"></a>
//anchor tag

<tmpl_if session.var.adminOn>
    <tmpl_var controls>
</tmpl_if>
//controls

<tmpl_if displayTitle>
    <h3><tmpl_var title></h3>
</tmpl_if>
//title is always h3 for assets (h1 is title in style template, h2 is title in page layout)

<tmpl_if description>
    <div class="description">
        <tmpl_var description>
    </div>
    <!--/description-->
</tmpl_if>
//description in class, since description is not always in p tags
//makes it possible to design a general description (.description) or an asset specific one (.article .description)
//note: comment at the closing tag

<tmpl_loop attachment_loop>
    <tmpl_if __FIRST__>
        <div class="attachments">
        <ul>
    </tmpl_if>

    <tmpl_if isImage>
        <li><a href="<tmpl_var url>"><img src="<tmpl_var thumbnail>" alt="<tmpl_var filename>" class="wg-attach" /></a>
        <a href="<tmpl_var url>"><tmpl_var filename></a></li>
    <tmpl_else>
        <li><a href="<tmpl_var url>"><img src="<tmpl_var icon>" alt="<tmpl_var filename>" class="wg-attach" /></a>
        <a href="<tmpl_var url>"><tmpl_var filename></a></li>
    </tmpl_if>

    <tmpl_if __LAST__>
        </ul>
        </div>
        <!--/attachments-->
    </tmpl_if>
</tmpl_loop>
//recurring attachments class
//opening and closing div and ul are inside the loop to prevent empty tags
//class "wg-attach" replaces inline styles, css is .wg-attach{border:0;vertical-align:middle;}
//"wg" prefix indicates that styles are defined in general webgui.css stylesheet
//note: comment at the closing tag

<div class="wg-clear"></div>
//strategically placed clearing div for clearing floated elements
//class "wg-clear", css is .wg-clear{clear:both;}
//"wg" prefix indicates that styles are defined in general webgui.css stylesheet
//note: comment at the closing tag

<tmpl_if pagination.pageCount.isMultiple>
    <div class="pagination">
        <tmpl_var pagination.previousPage> &#183; <tmpl_var pagination.pageList.upTo20> &#183;<tmpl_var pagination.nextPage>
    </div>
    <!--/pagination-->
</tmpl_if>
//recurring pagination class
//note: comment at the closing tag

</div>
<!--/[assetname]<tmpl_var assetId> /[assetname] [specific asset]-->
//closing tag for asst container div
//note: comment at the closing tag

-----

Please let me know what y'all think. Does the above make sense to you? Is this a good way of going about these things or is posting template code confusing?

Rogier | United Knowledge
www.unitedknowledge.nl · www.webgui-help.nl

* Is the div surrounding the attachments ul just for a 'hook' for css?

That, and for positioning of the attachments as well. It's not really necessary, but I think that designers would find it easy to have each element (or at least many elements) of a template in a containing div.

If you're worrying about divitis, we could remove the div and add the "attachments" class to the ul and that'll work as well.

* Instead of clearing with a div, I suggest changing that to a br element. It's not really a page division.

Fine by me.

* What template is this?

I just picked the pieces of code that reccur in many, if not all, templates. Together it's allmost an article template. I didn't want this to be a discussion just about the article, but more about setting some general rules for asset templates.

Rogier | United Knowledge
www.unitedknowledge.nl · www.webgui-help.nl

I can see how the div would be useful. It's fine. I just want to keep an eye on markup overuse.

And I'm glad you do! Other comments, anyone?

Rogier | United Knowledge
www.unitedknowledge.nl · www.webgui-help.nl

It's a detail, but after doing some more reading on accessability, I realized that using two a tags for attached files does not go well with text (-to-speech) browsers; it doesn't comply with WCAG.

The html for a file in the attachment loop now looks like this:

<a href="<tmpl_var url>"><img src="<tmpl_var icon>" alt="<tmpl_var filename>" class="wg-attach" /></a>
<a href="<tmpl_var url>"><tmpl_var filename></a>

This is done to prevent the underline of the link to appear below the image. However this will result in two links to the same location. I'll be changing the attachment loop code to this:

<img src="<tmpl_var icon>" alt="<tmpl_var filename>" class="wg-attach" /> <a href="<tmpl_var url>"><tmpl_var filename></a>

Which is shorter and easier to comprehend anyway. Also the alt attribute of the image should not be the filename, but the file extension (RFE posted).

Rogier | United Knowledge
www.unitedknowledge.nl · www.webgui-help.nl