One of the best features that CataBlog offers is the ability to control exactly how your catalog HTML is rendered on your blog pages. It is also one of the more mysterious features for beginners, since it isn't incredibly well documented and you need to have a good understanding of what html is and how to use it. This post came about from offering support and realizing that the current default template does not work with both the LightBox and a title link. The code below may be used instead of the default, it makes sure that the LightBox link is always created properly for each thumbnail, even if the catalog item's link value goes to a non-image file.
You may also read more about CataBlog templates and the token system at Making Custom Templates.
<div class='catablog-row'> <div class="catablog-images-column"> <a href="%IMAGE-LIGHTBOX%" class="catablog-image" %LINK-TARGET% %LINK-REL%> <img src="%IMAGE-THUMBNAIL%" alt="" /> </a> %SUB-IMAGES% </div> <h3 class='catablog-title'>%TITLE-LINK%</h3> <div class="catablog-description"> %DESCRIPTION% %BUY-NOW-BUTTON% </div> </div>