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>
Hi Zach. Have you tested Catablog with WordPress 3.1.2 yet? TIA
Yes, this site is WordPress 3.1.2. I don’t think there are very many changes in the new WordPress version, other then a security patch, so plugins are less likely to be affected.
Hello Zach, is there a way to change the text color for the photo title within the lightbox?
Yes, look into CSS and stylesheets. Perhaps a tool such as Firebug could help you more, or w3schools. Good luck.
I’m having an issue displaying the sub-images. If I have only one sub-image, it doesn’t display it, but instead displays “>. If I have more than one sub-image, it will display “> instead of the first image, but then will display the other images. Also, the main images are opening in a new window/tab, but the sub-images are not.
This is the code on my template:
%TITLE%
%DESCRIPTION%
%BUY-NOW-BUTTON%
So i want to make sure you are using the %SUB-IMAGES% token for displaying sub images. Also you might try reloading the default template and seeing if that fixes your problem.
Since I can’t read you template code on my iPhone, maybe it will be different on my computer, I’ll have to try and help you out tomorrow.
The code didn’t show up properly. Let me try again…
%TITLE%
%DESCRIPTION%
%BUY-NOW-BUTTON%
Hi Lily,
Make sure that you escape all the HTML template code before posting it in a comment. I do this with a text editor and a simple find and replace. Just find and replace these two characters
< replace with <
> replace with >
In case you are trying to use the %MAIN-IMAGE% and %SUB-IMAGES% tokens, they will automatically create the correct anchor tag around the thumbnail for the LightBox. Try sending me the template code one more time please 🙂
I am trying to post a catalog that looks like the photo gallery on the demo page. Mine looks like the products category and I can’t figure out how to change it. Can I make it like the photo gallery with the plug in….how?
love the plugin! thank you!
Terri
Please refer to this page in the documentation section of the blog.
http://catablog.illproductions.com/documentation/displaying-your-catalog-in-posts/
You will want to set the template parameter of the shortcode to gallery.
Good luck.
<div class='catablog-row'> <div class="catablog-images-column"> <a href="%IMAGE-LIGHTBOX%" class="catablog-image" %LINK-TARGET% %LINK-REL% target="_blank"> <img src="%IMAGE-THUMBNAIL%" alt="" /> </a> <a href="%IMAGE-LIGHTBOX%" class="catablog-image" %LINK-TARGET% %LINK-REL% target="_blank"> <img src="%SUB-IMAGES%"></a> </div> <h3 class='catablog-title'>%TITLE%</h3> <div class="catablog-description"> %DESCRIPTION% %BUY-NOW-BUTTON% </div> </div>Now I can see the problem loud and clear Lily, The %SUB-IMAGES% token is not meant to be used in an image tag’s source attribute. Instead it should be the only thing on its line of code. This is because the %SUB-IMAGES% token needs to possibly make more then one image tag, if you want to style the sub images, I would recommend wrapping the %SUB-IMAGES% token with a div tag that has a specific class. Also each sub image will automatically be wrapped in the appropriate anchor tag for the LightBox.
Example:
<div class='catablog-row'> <div class="catablog-images-column"> <a href="%IMAGE-LIGHTBOX%" class="catablog-image" %LINK-TARGET% %LINK-REL% target="_blank"> <img src="%IMAGE-THUMBNAIL%" alt="" /> </a> <div class="catablog-items-sub-images"> %SUB-IMAGES% </div> </div> <h3 class='catablog-title'>%TITLE%</h3> <div class="catablog-description"> %DESCRIPTION% %BUY-NOW-BUTTON% </div> </div>I hope that has helped, cheers!
Thanks, that fixed it. But now is there any way of getting the sub-images to open in a new tab or window when someone clicks on them?
Hi Lily,
Since each sub image does not have its own link value, the only thing you could open in another tab or window would be the same link as the primary image or the full size version of the sub image. Perhaps you want to create more catalog items, each with their own link and use categories to separate out your catalog even more? You may filter by multiple categories allowing you to create some pretty powerful organizational schemas. Good luck and let me know if you have any more questions.
Hi Zach,
I’ve just used the code that you gave to Lily as I couldn’t get the sub-images to show. That’s now sorted out my sub-image problem however now the images don’t open in a lightbox. Do I need to alter the code somehow?
Thanks,
Adelle
Are you sure the LightBox is enabled and the jQuery selector is set to
.catablog-image?Hi Zach,
I’ve followed this thread (and other ones) but couldn’t solve my LightBox problem.
It worked fine till couple of weeks. Since then few things happened:
1. LightBox was gone
2. I’m almost positive that the fonts were changed…could it be?
Today I also updated the Catablog plugin as well to the latest.
I made sure jQuery selector is set to .catablog-image
I tried few templates (default) you’ve posted above.
I’m currently using this:
%MAIN-IMAGE%
%SUB-IMAGES%
%TITLE% [%PRODUCT-CODE%]
%DESCRIPTION%
%BUY-NOW-BUTTON%
Can you assist on this please?
Thanks,
Dave
Hi Dave, can you please give me a link to your broken page, thanks.
Also could you please follow the instructions I gave to Lily to repost your template code so I may read it properly. Thanks
Hi,
Thanks.
I’ll try posting the code in here:
<div class='catablog-row'> <div class="catablog-images-column"> %MAIN-IMAGE%<br> %SUB-IMAGES% </div> <h3 class='catablog-title'>%TITLE% [%PRODUCT-CODE%]</h3> <div class="catablog-description"> %DESCRIPTION% %BUY-NOW-BUTTON% </div> </div>Result can be seen in here:
http://www.depeche-mode-forum.com/?page_id=10
Much appreciated,
Dave
BTW I also tried
<div class='catablog-row'> <div class="catablog-images-column"> <a href="%IMAGE-LIGHTBOX%" class="catablog-image" %LINK-TARGET% %LINK-REL% target="_blank"> <img src="%IMAGE-THUMBNAIL%" alt="" /> </a> <div class="catablog-items-sub-images"> %SUB-IMAGES% </div> </div> <h3 class='catablog-title'>%TITLE%</h3> <div class="catablog-description"> %DESCRIPTION% %BUY-NOW-BUTTON% </div> </div>with no luck…
Hi Dave,
You can play with the CataBlog template all you want, but it won’t fix your problem. After looking at your page in a debug console (firebug, chrome developer tools) it is plain to see that all your jQuery functions are failing. This is most likely due to your WordPress theme or other plugins you have enabled.
Please try disabling all other plugins and switching to the twentyten theme to verify this.
The thing that sticks out to me the most is that you are loading jQuery twice, this is very bad. You are loading a version from google and you are loading a version from your local server. I would only load the version from your local server, if it was me.
Let me know if fixing that issue fixes all your JavaScript issues. Also I would highly recommend learning about a tool such as Firebug to test and debug your sites CSS and JavaScript.
I actually disabled some recently installed plugins and it went back fine. I now need to know which is the interfering one…
Thanks a lot
Dave
Thanks v much Zach – will take action on that.
Zach
It looks like the main catalog page and category pages might be using different stylesheets. The Category pages seem to look fine and mirror the styles in my WordPress theme, but the page with the entire catalog presents the text in a different font (the main catalog page displays in a serif font similar to Times New Roman, and the category catalog pages display in a sans-serif font similar to Arial). Any ideas if this a a setting I can fix in Catablog or if it is a theme issue?
Mark,
CataBlog does not set any font-family CSS properties, so your problem most likely lays within your theme’s stylesheet. Perhaps you could use a tool such as Firebug or Chrome’s developer tools to better troubleshoot your CSS issues. Good luck 🙂
Is there a way to customize the catalog in such a way that only around 5 items display in one page and the next set of products go to next page?
Hello Zach! Awesome Plugin!! I’m working on modifying it for a sweet book store application. Check out the work in progress at: http://koei.websitewelcome.com/~chetross/
My question is whether I can get the sub-images (thumbnails) to NOT be cropped in height. On the individual item page, I’d like the thumbnails to be a standard width, but to adjust it’s height automatically in proportion. I’ve been looking at catablog.class.php and catablogitem.class.php to try and understand how this works. I’m fairly comfortable at tweaking stuff and was hoping you could steer me in the right direction.
Thanks!
… i guess basically, I need to figure out how to set the canvas-size to ‘auto’ or ‘100%’… not sure how to do this though.. If i knew exactly what size it needed to be, i could change the crop function as needed and supply the same value to the canvas-size.
or…. I could bypass the thumbnail creation altogether for the individual listing and display all large images for the sub-images. I’ll just set the width and height with css so that i can have the height expand. Once again not sure how to implement…. push in the right direction?
Hi there,
I was wondering what the best way to organize some photos in a certain category would be? i have a category of Before and After pics, so naturally I would like the Before pics to show before the After pics. What do you suggest as the best way to go about this?
Thank you,
You have a few options:
1. You could order by title and create two categories, before and after. Then in the page you want to show use two different Shortcodes to show all the before and than all the after.
2. You could sort your catalog by either the date or order value. Set each individual items date or order to an appropriate value and use the appropriate Shortcode parameters.
Hi,
I working with plugin for the first time – having trouble with templates. Any changes I make are not being saved. Are there permissions that need to be set for a specific directory so the changes to the templates take?
John
What version of CataBlog are you using? After you make changes you are sure your clicking save?
v1.2.9.9
I make the change, hit Save Changes – the drop down list points back to single (I’m trying to mod gallery) – I then load gallery template and the change I made is gone…
There is only one system template in CataBlog 1.2.9.9, you are overwriting your changes each time you click save.
CataBlog 1.3 has functionality like you are looking for. The 1.3 beta may be downloaded at http://downloads.wordpress.org/plugin/catablog.zip and tried.
If you don’t want to try 1.3 then you may use FTP to create or modify files in the
wordpress/wp-content/plugins/catablog/templates/viewsdirectory. These file may be referenced in your ShortCode’s template parameter.Good luck
That worked…thxs!
Can an alt tag be placed on the catablog images??? Trying to improve SEO and I was told this would help a little.
Yes, simply modify your CataBlog template code, in particular replace the %MAIN-IMAGE% token with your own anchor and img tags with whatever HTML attributes you want.
If each image needs a unique alt tag use the product code field.
Hello, Zach!
I have a question about the thumbnails and description appearance. Is there a way the description to be cut on the third row for example and the whole text to be displayed on the same page once you click “more info” button or so.
Otherwise I have the image cover and the description text takes too much space if it is long.
Niya, please see my response to your other question in regards to showing and hiding part of your description.
Fran, I may have had a example web page from the past, but I’m just going to ask again, can you send me a link to the page exhibiting your problem so I may evaluate what part of the template needs to change. Thanks.
I’m trying to do Alt Attributes on my Main Images.
How do I add them in this code?:
“%MAIN-IMAGE%”
%SUB-IMAGES%
%TITLE-LINK%
%DESCRIPTION%
I have some problems creating my own template. I need my catalog to be shown with specific styles so i did this:
<div class='catalog'> <div class="catalogImg"> %MAIN-IMAGE% %SUB-IMAGES% </div> <div class="catalogContent"> <h3>%TITLE-LINK%</h3> <div class="catalogDescription"> %EXCERPT% </div> </div> </div>Pretty basic, right? the thing is that I cant get the lightbox to show the title and description of the product. Right now the lightbox shows just the image… I dont know what to do in this case, so i came here to see what Zach Almighty says! xD
Add the default catalog classes back alongside your custom classes. like this:
<div class='catalog catablog-row'> <div class="catalogImg"> %MAIN-IMAGE% %SUB-IMAGES% </div> <div class="catalogContent"> <h3 class="catablog-title">%TITLE-LINK%</h3> <div class="catalogDescription catablog-description"> %EXCERPT% </div> </div> </div>You may need to modify your CSS code to accommodate for order of precedence. Make sure your class styles override the default catablog ones.
Hi man!
What must I do if I need in Catablog template-Gallery for e.p. 6-8 or more pictures on row??? :-/ -not only 3-4…
You can see it on:
http://www.inkancl.cz
Thanks very much!
Thanks for template,
have a nice day!