Real-world template code samples

zem · 2006-03-24 22:38:49

Hi,

We could use some samples of real-world Textpattern template code, forms, and code snippets. They’re useful for testing, and also to help identify which new tags and attributes would be most helpful. (Tags are usually tested in isolation, but in the real world they’re often used in combination, with conditional tags, etc).

Samples don’t have to be complete templates or forms. You can strip off extraneous HTML and Textpattern tags and just post the important part. Ideally, we need a copy of the template code, a sample copy of the HTML it produces, and (if it’s not obvious) a quick description of its purpose. pastebin.com is the easiest way to post code.

To help out, just find some examples and post them here. If there aren’t any good examples in your own templates, you’ll find some examples at ~~textgarden.org~~, and in the How-to and Examples forum.

PS – examples including plugin tags are welcome, if they represent common things that can’t be achieved with built-in tags.

zem · 2006-03-24 23:00:48

To start the ball rolling..

This inserts an ad between articles on a list page, while leaving individual articles alone:

<txp:if_article_list>
<txp:article limit=2 pageby=10 listform="short" />
<!-- google ad -->
<txp:article limit=8 offset=2 pageby=10 listform="short" />
</txp:else />
<txp:article form="long" />
</txp:if_article_list>

Output depends on the “short” article form. On a list page, it resembles this:

<h3>article 1</h3>
<h3>article 2</h3>
<!-- google ad -->
<h3>article 3</h3>
<h3>article 4</h3>
..etc..

On an individual article page, it shows only the article, no ad, using the “long” form.

You can do this without the conditional tag, but only if you use separate pages for your front page and article sections.

It should work fine on all list pages: front page, section, category, search results, paging.

maniqui · 2006-03-25 00:43:29

zem wrote:

<txp:if_article_list>
<txp:article limit=2 pageby=10 listform="short" />
<!-- google ad -->
<txp:article limit=8 offset=2 pageby=10 listform="short" />
</txp:else />
<txp:article form="long" />
</txp:if_article_list>

You can do this without the conditional tag, but only if you use separate pages for your front page and article sections.

<small>sorry if the next comment is a bit offtopic</small>
I’m trying to find out how will you achieve the same thing without the conditional tags. If you use separate pages, I find no difference…
And without conditional tags, you will have the problem of 2 txp:article tags in an individual-article context (that will output the individual-article twice).
And that’s my introduction for a featura idea (<small>sorry again</small>):
A new txp:article attribute (possible name: “ignore”) to ignore the tag when in individual-article context.
So, if you put two txp:article in a page template, you can set one of them with ignore="yes".
I think it can be useful where you want to use a txp:article status="sticky" in a side-bar div, but you dont want to mess with conditionals…
Well… i’m re-reading the feature idea and not totally sure if makes sense or if it adds something interesting.

Now, some content on topic :D

I will post some “complex” article forms I use.

an article form

This is a real-world example, already posted.

<h3><txp:permlink><txp:title /></txp:permlink> | <small><txp:posted /></small></h3>
<div class="imagen"><txp:article_image /></div>
<txp:if_article_list>
<txp:if_excerpt>
<txp:excerpt />
<p class="leermas"><txp:permlink><txp:if_custom_field name="continue"><txp:custom_field name="continue" /> <txp:else />read more </txp:if_custom_field></txp:permlink></p>
<txp:else />
<txp:body />
</txp:if_excerpt>
<txp:else />
<txp:body />
</txp:if_article_list>
</div>

This will output an article with the title linked and the date. Then, if we are in an article list and have an excerpt, it will output the excerpt followed by a “read more” link. With some conditional magic, the read more link will be filled with custom text for the article if an article custom field has been filled. If not, it will simple show “read more”.
If there is no excerpt, it will show the body.
Then, if we are not in article list, it will show the body.
That’s all.

another article form

<h2><txp:permlink><txp:title /></txp:permlink></h2>
<txp:if_article_list>
<txp:if_excerpt>
<txp:excerpt />
<p class="leermas"><txp:permlink>read more</txp:permlink></p>
<txp:else />
<txp:body />
</txp:if_excerpt>
<txp:else />
<txp:body />
</txp:if_article_list>
<txp:comments_invite wraptag="p" />
<txp:if_individual_article>
<div id="comentario">
<txp:output_form form="comments_display" />
</div>
</txp:if_individual_article>

This one is very similar to the above one, but doesnt have the if_custom_field magic for “read more” links.
But it includes some tags related to comments.

Now some comment-related forms

comment_display form (this are very “thebombsite/mary” style)

<txp:if_comments_preview>
<txp:comments_preview form="comments" />
<txp:comments_form isize="30" msgrows="10" msgcols="50" preview="1" />
<txp:else />
<txp:if_comments>
<h3><txp:comments_count /> comentarios sobre <txp:title /></h3>
</txp:if_comments>
<txp:comments />
<txp:if_comments_allowed>
<txp:comments_form isize="30" msgrows="10" msgcols="50" />
</txp:if_comments_allowed>
</txp:if_comments_preview>

If we are in comment preview, show the comment preview using the “comments” form followed by the “comments_form” (so, users can correct their comments).
Else, if we are not in comment preview, check if there are comments, and if yes, show the comment count and the article title. Following, add the comments list.
Finally, if comments are allowed, show the comments_form.

comments form

<txp:if_comments_preview>
<div id="cpreview">
<p class="preview">This is how your comment will ape once you hit <b>Send</b></p>
<txp:else />
<div>
</txp:if_comments_preview>
<h4>Posted by <txp:comment_name /> on <txp:comment_time /> <txp:comment_permlink>#</txp:comment_permlink></h4>
<txp:comment_message />
</div>

This is simple: if we are in comment preview, it will show a paragraph with some text, wrapped by a div tag. Else, we open the div (but without any id).
In both case, following that, we show the comments.
This form interacts very fine with the above one, in the way that if we are in comment preview, we will only see one comment (the one about to be posted), and not the full list of comments.

That’s all by now. Hope this examples can be useful.

edit: the bc.. doesnt work very well.

Last edited by maniqui (2006-03-25 09:21:36)

marios · 2006-03-25 04:06:40

Here is an example, that I use to overcome inproper handling of CSS specifications of various Browser versions,
in order to style an article list output for a sidebar.

It uses zem_nth’s plugin instead of attribute selectors and CSS Level 3 class rules (Which IE doesn’t understand anyway), to match an active list Item and each second list Item differently in your Stylesheet.

<h2>In your article form:</h2>

<code><li <txp:zem_nth step=1 of=2>class=“odd</txp:zem_nth><txp:zem_nth step=1 >active </txp:zem_nth>”><txp:permlink><txp:title /></txp:permlink></li></code><br />

<h2>In your page template:</h2>

<code><h3>Featured articles</h3>
<ul>
<txp:article_custom form=“mrs_side_featured” limit=“5” sortby=“Posted” sortdir=“desc” listform=“mrs_side_featured” />
</ul></code>

<h2>Styles should go this way:</h2>

<code>#sidebar ul li.odd {background-color: gray;}
#sidebar ul li.oddactive {background-color: orange;}</code>

NOTE.:zem nths needs to be installed, <del>and sortby needs to be desc, else wrong article is matched as active</del>

EDIT.: The above example does not work completely,I wish there would be a way to prepend the actively selected article to the list,
but I haven’t found any yet, so the whole method becomes obsolete.

Which in turn would be a nice feature request, to have a sortby=“active” attr, or “firstitem” or something simular.
<hr />
EDIT.:problem solved, but not completely,because a wrong article match can occour in some circumstances.

So as a workaround, I am using this now:

<h2>In your article form 1)</h2>

<code><li <txp:zem_nth step=1 of=2>class=“odd</txp:zem_nth><txp:zem_nth step=1 ><txp:if_article_list>active</txp:if_article_list> </txp:zem_nth> <txp:zem_nth step=1 of=2>”</txp:zem_nth>><txp:permlink><txp:title /></txp:permlink></li>

</code><br />
EDIT.:updated a small mistake with above article form

<h2>In your article form 2)</h2>

<code>
<li class=“oddactive”><strong><txp:title /></strong></li>
</code>
EDIT.:Updated above form so active list item will not link back to itself

<h2>In your page template:</h2>

<code><h3>Featured articles</h3>
<ul>
<txp:if_individal_article><txp:article form=“mrs_side_active” limit=“1” listform=“mrs_side_active” />
</txp:if_individual_article>
<txp:article_custom form=“mrs_side_featured” limit=“5” sortby=“Posted” sortdir=“desc” listform=“mrs_side_featured” />
</ul></code>

<h2>Styles should go this way:</h2>

<code>#sidebar ul li.odd {background-color: gray;}
#sidebar ul li.oddactive {background-color: orange;}</code>

EDIT.:It seems to work fine now,but a couple of more attributes, would make that a olt easier

A live demonstration of this method can be seen here

(NOTE: But don’t take that for granted on all pages, since there are some more conditionals for some sections that might spoil the result, plus there is obviously no way to filter out the article from the custom list, if in individual articles page mode apart from sortbying it far away and limiting it off boundary by limit=“something”)

regards

Last edited by marios (2006-03-28 01:38:45)

Textpattern CMS

Textpattern CMS support forum

#1 2006-03-24 22:38:49

Real-world template code samples

#2 2006-03-24 23:00:48

Re: Real-world template code samples

#3 2006-03-25 00:43:29

Re: Real-world template code samples

#4 2006-03-25 04:06:40

Re: Real-world template code samples

Board footer