Display the next article with an associated image

In a first tip we saw how to output an article on top of a list if it has a status of “sticky”.

We’ll see now how to output an article if it has an image assigned. If not skip to the next article that has an image.

Scenario:

  1. If one article in the current level, home, category or section has no image, skip it.
  2. Else display the next live article with an image

Why would you like to do this?

If a user forgets to fill the required image field when posting an article, it will break the whole page layout and fire the usual cascading layout mess. We want to avoid this situation.

Jeff (jsoo) fires a very simple and clever solution in a discussion we had in the Txp forums.

He creates a variable and tries to fill it with the result of a <txp:if_article_image> and performs it over 5 articles. The amount of articles you’d like to perform this depends on your appreciation. We assume in this case a user will not forget more than 5 times to add an image to an article. You could push this value up, although I would not recommend to do this over all your articles!

If an image is found in an article, we set the value of the variable to 1, so it stops.

Here’s the full snippet:

<txp:if_article_list>
<!-- We are in an article list context -->
<!-- Step: 1 -->
<!-- Does the article have an image associated ? -->
		<txp:variable name="art_img" value="" /> <!-- Edit: need to initialize the variable -->
		<!-- Let's try over the next 5 articles to check if at least 1 has an image associated -->
		<txp:article limit="5">
				<txp:if_variable name="art_img" value="">
					<txp:if_article_image>
						<!-- If an article with an image is found display the article details -->
						<txp:title />
						<txp:body />
						<txp:upm_article_image form="image_details">
						<txp:variable name="art_img" value="1" />
					</txp:if_article_image>
				</txp:if_variable>
		</txp:article>
</txp:if_article_list>

Bon appetit !

This tip was covered in the forum here.

comments powered by Disqus