Article Excerpts with Thumbnails?

dada78 · 2005-12-09 01:55:04

Hi guys,

I have hunted through the resources page for plug-ins but was a little overwhelmed since I am pretty new to TXP…

What I am looking for is a plug-in that allows me to display schort excerpts of articles with a thumbnail like in an online magazine.
When you click on the thumbnail or excerpt it should take you to the full article.

Does anybody know some good plug-ins for that?

Thank you! I Appreciate your help in this!
Dada

Last edited by dada78 (2005-12-09 01:56:20)

RenJonsin · 2005-12-09 03:24:55

You could use upm_img_popper to do that or you could use the native tag <code><txp:article_image></code> here si the wiki article on it along with the article image field under the advanced options on the write page.

I just started playing with these myself so I don’t think I can tell you exactly how to use them. That should get you started though. I’ll bet there are other ways of doing it too, just that these are the ways that I would put an image with an excerpt.

dada78 · 2005-12-09 06:34:39

Thanks for the input, i will remember that, but what I would want to achieve is something similar like this: Durchgedreht24.de

dada

wet · 2005-12-09 07:43:08

I’d suggest to use an article form (“Baustein”) including a tag which invokes my plugin wet_article_thumb.

The article form would contain a snippet like that:

<txp:if_article_list>
<txp:wet_article_thumb />
<h2><txp:permlink><txp:title /></txp:permlink></h2>
<txp:excerpt />
<txp:else />
[ ...more tags for individual article display... ]
</txp:if_article_list>

You can observe wet_article_thumb in action on this site.

//w&

arkham · 2005-12-09 13:51:21

Nice… Does that work with txp:article and txp:article_custom?

Because I’m using a similar technique at http://www.ohword.com/ but with zem_article_image to do it and for some reason the thumbnails only show up with chh_article_custom.

I’d rather start eliminating plugins and this seems like a silly issue to require 2 plugins so I’ll switch to yours if I could use the regular article tags.

dada78 · 2005-12-09 15:22:02

Hey Wet!
Thank you a thousand times!
That is exactly what I am looking for! Nice work!!!
Love you for providing this!

But I have one more question how to implement it, since I am still new to TXP:

I have created a new article form and named it “thumbnail_article” and put the snippet code above in it within some divs:
<code>
<div id=“column-one”>
<h2><txp:permlink><txp:title /></txp:permlink></h2>
<div id=“column-padding”>
<txp:if_article_list>
<txp:wet_article_thumb />
<txp:excerpt />
<txp:else />
[ …more tags for individual article display… ]
</txp:if_article_list>
</code>

And in my page template I put:
<code>
<txp:wet_article_thumb />
</code>

<strong>Questions:</strong>
1. For some reason this is messing up my layout. Can I not have the snippet code wrapped in a div?
2. Also how would I assign ids to images? Have never done that…

Thank you so much!
Dada

Last edited by dada78 (2005-12-09 15:42:16)

wet · 2005-12-09 21:30:26

You’ve radically mixed up templates (which control the overall design of a webpage) and forms (which control, among other things, the design of one article). The plugin has to be called in the article form, not in the page template. As you did the opposite, your page display will certainly look kind of weird…

And now for some the basics of textpattern layout principles:

Article display is achieved by textpattern in two distinct steps:

1. Render one article, depending on context

This is done by designing a form which displays one article in the desired style. The article form is used to render each article, either in list view (on the home page, the section listings, or the search results page) or in individual article pages. If you do not specify something different, the form named “default” will be used. I’d suggest that you stick with that name until you get a bigger grasp of textpattern’s inner workings.

One way of distinguishing between list mode and single article mode is by enclosing the two alternative contexts between the conditional tags:

<txp:if_article_list>
 /*... display lists with thumbnails and excerpts */ 
<txp:else /> 
/* ...display single article with body ... */ 
</txp:if_article_list>

2. Render all articles for a specific context

This is done by calling <txp:article /> inside a page template.

Replace this sequence in your template

<txp:wet_article_thumb />

with

<txp:article /> , and you’re done ®.

Maybe you could gain a little more insight by looking at various Textbook articles like the one on the semantic model, the one on txp:article, or even my Textpattern-Beipacktext für Webmaster.

Last edited by wet (2005-12-09 21:31:10)

dada78 · 2005-12-10 18:53:42

Thanks Wet.

Okay, I think I am getting there.

In my page template I have the code
<code><txp:article form=“thumbnail_article” /></code> which calls the article form I created called “thumbnail_article”, which has the following code:

<code>
<txp:if_article_list>
<txp:wet_article_thumb class=“thumb” link=“1” />
<txp:excerpt />
<txp:else />
[ …more tags for individual article display… ]
</txp:if_article_list>
</code>

The excerpt of the article is diplaying, but not the thumbnail – that might be because I am not sure if I am missing something crucial here:

I have my images under the images category “news” and my articles in a category “news”.
Now in editing mode of one of my articles under “advanced options”, I placed the link to my image path: /images/10t.jpg in the Article image field.

I am not sure what kind of tag I have to add in order to display that thumbnail, or what else I need to do?

Thanks, any suggestion are appreciated!
Dada

Last edited by dada78 (2005-12-10 18:57:01)

wet · 2005-12-10 19:18:40

> dada78 wrote:

Now in editing mode of one of my articles under “advanced options”, I placed the link to my image path: /images/10t.jpg in the Article image field.

You only need to specify the image id in the article image field, i.e. “10”. wet_article_thumb will read this value, tries to find the image with the given id and displays the thumbnail of that image with a link to the article (article —> image id —> image —> thumbnail).

This is the same method as used by the built-in tags, e.g. txp:image.

dada78 · 2005-12-10 19:21:32

Excellent! Thanks man!

wet · 2005-12-10 22:14:41

> arkham wrote:

Nice… Does that work with txp:article and txp:article_custom?

It certainly does. See the form snippets I’ve posted above.

Textpattern CMS

Textpattern CMS support forum

#1 2005-12-09 01:55:04