The HTML template is a newer and not well documented feature to CataBlog, it allows people to setup their own HTML code for CataBlog to render on the page. This can be especially useful when you might want to make a grid layout of catalog items, add an extra link or button at the bottom of each item or remove the description all together. Simply go to the template tab in the options panel to edit your template, currently the template is site wide and you can not set templates with shortcodes. Eventually you will be able to make your own templates, save them and then apply them to specific catalogs via the shortcode. Keep in mind that these templates are heavily dependent on a token system for individual item values. You will notice that each token is all uppercase and surrounded by percent signs, for instance %TITLE%. Below is a list of supported token you may use in your template code.
%TITLE%: The catalog item's title, will be a hyperlink if the link value is set.%TITLE-TEXT%: Just the catalog item's title text.%LINK%: The item's link value.%DESCRIPTION%: The description of the item.%BUY-NOW-BUTTON%: Where to place the generated "buy now" button if the item price is above zero.%PRICE%: The catalog item's price.%PRODUCT-CODE%: The item's product code.%PAYPAL-EMAIL%: The email address set in the store tab of the options panel.%IMAGE-SIZE%: The thumbnail size set in options.<strong>NEW TOKENS</strong>%IMAGE%: The url to the thumbnail image.%IMAGE-FULLSIZE%: The url to the full size LightBox version of the image.
Feel free to sprinkle these tokens around new templates and create cool new looks. Please, send any my way if you are especially proud of your creation or look. I like to link to catalog pages people send me, and I would be more then happy to link to yours. - Cheers
Hi Zach — this is great, exactly what I had in mind. This should allow more customization for us newbies.
One more suggestion that I’d add here (depending on how difficult it would be to implement) is the ability to add more templates, so that people aren’t limited to changing the default or gallery ones only. It would be great if you could add more, say “Default 2” or something and save those as well. That way you could design several different catalog layouts but have the ability to manage them all nicely on the back end. Anyway, is this possible?
Keep up the good work — this has been very helpful! Once I get my site whipped into better shape I’ll send you the link so you can have a look.
-Jack
I completely agree with you Jack, but first I want to add full multisite support and setup CataBlog for internationalization. Once those are done I will be looking into adding new features. Unfortunately as the holiday season nears for me I won’t be doing nearly as many updates, guess thats the name of the game with free software 🙂
Cheers,
– Zach
Totally understand. I sort of figured it would be on your map but there are always other things to work on too.
Enjoy the holidays and don’t work too hard. I’ll keep checking back periodically just to see what’s new while I continue to work on my own site…
-Jack
Hi
I’m doing my best but I just can’t find any short code examples, I need to filter by category but I’m kinda lost, I don’t know if I understand how that works. I don’t see any option to “tag” the items I add to the template code. I was going to try and use the WP post tag, but when I use the “tag=” nothing shows up but the code. Please assist.
Jon
Hi Jon,
Depending on which version of CataBlog you are using the filter command is slightly different. Ideally you are using the latest version of CataBlog (0.9.8) and WordPress (3.0.3). If so all you need to do is add a category tag to your shortcode. Something like this:
[catablog category="dogs"]The word in the quotes should be the exact name of your category with matching capitalization. Hope that helps, good luck.
– Zach
Hello Zach
Great job! I have one question … is it possible to add custom fields?
Hi Kiro,
Currently it is not possible via interface or without actually hacking the plugin code to add any new custom fields to the CataBlog post type. You may feel free to use the product code field for different data if you are not using it. Good luck,
Zach
Hi Zach,
Thanks for developing this amazing plug-in. I love its easy to use features. I was wondering when you’d be incorporating and option to toggle 2 or more images for 1 catalog item. For example one of my clients is a clothing company, I’d like to have a front and back view of certain items. Anyway I can do this now?
Hi Roy,
I know its been a little while, a feature is planned for the next release that will let you attach up to five images. I’m still planning exactly how to display the multi image catalog items on the frontend. If you have any ideas or suggestions could you post them here.
Cheers, Zach
Hi Zach –
I can’t get the drag & drop sorting feature to work properly. I’m not sure if it’s a browser issue or what (I’m using Chrome) but when I click and go to drop items nothing happens. Hopefully I’m just missing something basic here but have you had any trouble with this feature at all?
-Jack
Hi Jack.
I have not run into your problem before. In fact I test on the latest versions of Chrome, Mac and Windows. Have you tried temporarily disabling other WordPress plugins and trying again. Also, since there isn’t an actual drag handle, make sure you are clicking the change order button before trying to drag and that when dragging you are clicking on the background of the catalog item’s row. Hope that helps, please let me know if you are still having trouble.
– Zach
Hi Zach – Thanks. I’ll keep monkeying with it and hope that it’s operator error on my part.
One more thing. I’m using catablog here (www.spinozarods.com/store) and created individual pages for each product. I’ve snooped around in google however and noticed strange urls with /catablog-item/my-product/ turning up in google searches. They’re not wordpress pages or posts but something else.
Maybe an example would help. I’ve created a page for this product:
http://www.spinozarods.com/store/classic-reels/hardy-perfect-trout-reel/
I’ve been hoping that it would turn up in google search rankings but I’ve noticed that instead I’ll find something like this:
http://www.spinozarods.com/catablog-items/hardy-perfect-trout-reel/
It must be something to do with using catablog for my product collections, but I’d like to avoid this so that just my individual product pages are the things that are turning up!
Any ideas?
-Jack
Jack,
I am guessing right now that you are generating some sort of site map for search engines and such, which is great, but as of right now CataBlog will export its custom posts and taxonomies. I suggest you use a customizable site map generator that lets you avoid certain posts. I am currently using Yoast WordPress SEO to give my blog better SEO options and it lets me turn my CataBlog items on and off. Check it out.
– Zach
Ha, that makes perfect sense. I couldn’t figure out what would generate these kinds of urls since they weren’t pages or posts in any proper sense. So Catablog does generate these kinds of custom posts and taxonomies? Is there any way to build a way to “non-export” option into the core of the plugin?
I use a basic xml google sitemap plugin and while it does allow you to exclude certain pages and posts I’m not sure what the ID is for any of the ones that catablog generates. Since they aren’t pages or posts and since they don’t seem to have a real “back-end” I’m not quite sure how to figure this out.
Anyway, I’ll keep playing around with it. Happily the individual product page is already turning up higher than the catablog taxonomy for a few of these but there seems to be a time-lag. Ultimately I could probably live with this but it would be nice to have a bit more control over what is exported.
As always, thanks for your feedback here. I’m a very big fan of this plugin!
-Jack
Yeah, I’m sorry that XML Sitemap puts CataBlog items into the site map too. I am gonna have to look into this, while potential very useful, I definitely think this should be configurable at the plugin core as well. Well here is to yet another todo 🙂
– Zach
Haha, I know how that works. No good deed goes unpunished as they say. Anyway, thanks for soliciting feedback and please let me know if there’s anything I can do for you — my coding skills are pretty minimal but always available to bounce ideas off of!
Best,
Jack
Hi Zach!
Thanks so much for this! I was just wondering …I tried and tried but failed—to use the “gallery” template, and customize it so that you can click on the images and have it directed to a separate link. Is this possible?
Thanks,
Emily
Hi Emily,
What you should do is disable the LightBox feature and change your template code to the code below. The only real change is that the href attribute of the a tag on the first line is now the link token
%LINK%instead of the%TITLE-TEXT%token.<a href="%LINK%" class="catablog-row catablog-gallery %LIGHTBOX%" style="width:%IMAGE-SIZE%px; height:%IMAGE-SIZE%px;"> <img class="catablog-image" src="%IMAGE%" height="%IMAGE-SIZE%" width="%IMAGE-SIZE%" alt="" /> <strong class="catablog-title" style="width:%HOVER-TITLE-SIZE%;">%TITLE-TEXT%</strong> <span class="catablog-description">%DESCRIPTION%</span> </a>Now just set the link for each catalog item, if it is a page on your blog I would use the permalink without the domain and a forward slash at the beginning.
example
/2011/10/my-post-on-stuff/Zach, thanks for your reply to Emily’s question: that is to change “token%LINK% instead of the %TITLE-TEXT% token” in the Template code. It is exactly what I needed. When you set up a Catalog item and put in a LINK for the title, it implies to me that the link will work. However, at least for me, the title LINK would not work until I made this change. For me it is a very important part of my application so I’m real glad I found this solution. Maybe you could make this solution a little more obvious in future versions?
Thanks again…
Frank,
After some consideration I believe that the current gallery template, using the %TITLE-TEXT% as a link, is incorrect. The next release of CataBlog will have the default link for the gallery going to %IMAGE-FULLSIZE%. This is because gallery items should really link to their full resolution image. I will be adding another default template called grid, that will be the exact code above that I wrote for Emily. I hope that this will better meet people’s different catalog and gallery needs. Cheers,
– Zach
Zach, just trying out your new version, which is great for adding lots of images at once!
You forgot to mention above that there is a token called %IMAGE% and it is used in the template that shows by default.
But when I wanted to change the anchor href to point to the actual image, I got the thumbnail image instead (of course, since that is what is used by default). Is there a token for the fullsize image or the original image?
One other thing, I was disappointed to find that Catablog does not tie into the WordPress search at all. That makes it difficult to choose as a solution for product sales. I was looking at WP-Table-Reloaded plugin and saw that it works with the search and is inserted with a shortcode.
Thanks
Hi Joy,
I am unsure how you would like CataBlog to work with the WordPress search? It has been brought up multiple times by people and every time it seems to have a different implementation. I agree that it needs to tie into the search feature, and am working on it. Now, a catalog item is actually a post, so that means that individual items can show up in search results with minimal efforts. The problem is the individual items will need their own template file, which I am still looking into. I am unsure how to set a template file without having any access or control over the current active theme. Another possibility is that the catalog content should be part of a page or posts searchable text, embedded in the index if you will. However, I am unaware of how this would be possible. I imagine the shortcode is not processed for a search, I will have to look into that. Which method were you thinking of? Was it another method all together?
Now for the fullsize image token, if you go to the download page of this blog there is a newer, 1.0.1, version available (other versions). The only difference with this version is that I added a fullsize image token. You should download and install it on your blog and then feel free to use the %IMAGE-FULLSIZE% token wherever you like.
Cheers and have a nice sunday,
– Zach
Hey Zach, thanks for the quick addition of the image token!
I was thinking about the search. Since the item description and item title are in the post already, hook into the pre-search and add your custom post type to the query, so the individual item is found, but also hook into the results so the link is to the catablog page instead of the inidividual item. That way you don’t have to worry about templates. But templates should not be a concern anyway, since the theme system will default down the line to index.php and you can supply the basic layout from the content filter if you feel the need.
If you wanted to be able to search the other portion of the catalog (price, product code, image name, link, etc.), all you have to do is hook into the pre-search and modify the query so the catablog postmeta entries are part of the search. Then you have the same trick to fix the results so it links to the catablog page. I don’t think this is as important as having the title and description searched, though.
Joy,
I am constantly battling myself with what CataBlog should really do and how much like posts a catalog item should be. People have asked me many times to make CataBlog items more like posts, but then I ask myself what is the point. Setting up a custom post type is not very difficult and while a lot of people don’t know how to do it, more and more will. CataBlog was originally designed for creating nice thumbnail lists, not individual pages or posts. As it has grown many people have started to put their input on the next direction it should take, and I appreciate all the feedback very much. Since I see CataBlog as a helper for page content and not a page generator itself, I am weary of adding things such as site map support, catalog item’s returning in search results, and other thing. I am in full agreeance that the content of the catalogs needs to be part of the site search, but I would prefer the page be displayed in the results and not the catalog item itself. Thanks for reading my rant 🙂
Now,
Since custom post types already have a include/exclude from search feature I’m going to let people turn that on or off. I might also let users turn on or off an individual page for each item. Filtering the content will be easy to include the image and any other meta data that is attached to the catalog item, such as price, link, etc. Thanks for the ideas and tips.
Cheers,
– Zach
Zach,
From what I have seen in the past few days Catablog has great potential if I can understand more. For example the Spinoza and Kallisti sites provide good examples of what can be done.
But I am struggling to understand how and where some of their ‘custom’ items are created.
I find the format of the Spinoza catalog interesting where there is a fixed title under each item – rather than have the rollover pop up as I have achieved at the moment.
But at the moment I have been unable to understand how it is achieved – even looking with Firebug it is still a bit of a challenge.
How do they use the custom tokens in the template – what do they do and what parameters to you append to them to make them function.
Where do you edit and load a custom css file and what can you do with it – lots I know!
My skills are currently very limited in the template / css area. And while there is a lot of information and pieces of code scattered throughout the documentation it does not seem to make a coherent read that I can understand. It seems to assume a certain base level of knowledge – which is not within my grasp at the moment.
Once again I commend you on this very effective plugin – I just need to get better at using it.
I appreciate that this is a ‘labor of love’ on your part so do not expect you to provide tuition but a few clues would be really appreciated
Zach
I am unsure whether you have seen my unanswered comment above of June 3rd. Or whether you feel it does not deserve to be answered. It would help both myself and at least one other person with whom I am comparing notes re Catablog if you could give some indication of your thoughts / considered response.
Regards
IanW
Ian,
I am very sorry. It has been quite hectic for me lately and I do remember reading your comment once I see it now, but it had slipped my mind. Please let me respond to you sometime early tomorrow morning, PST. Thanks for your understanding.
Again let me explain my tardiness. I am planning on writing an article in the near future that will hopefully give some explanation / instruction on how to best utilize the template feature. Hopefully it will include some basic HTML and CSS instructions.
Zach,
Many thanks for your response. I look forward to your article when you have time to put it all together
what about adding something like %EXCERPT% so far i havent found a why to do it…. from the top of my mind I think a substr() should work, but having the actual function would be really awesome!
There is an excerpt, look in the documentation and the description option’s tab.
heyy!
In the gallery template, is it possible to display a secondary image in Lightbox when the picture is clicked?
Also, how should i change the template such that it shows 3 in a row? currently i resized the thumbnail size trial and error to display 3 in a row.
I am a complete noob at html so your kind patience will be required!
I absolutely love Catablog, it was exactly what i was looking for, and a little editing to make it more perfect!
Hello
I need to display only the ID of a product “CATABLOG” in to token. I need it to generate a link to a “request button”. The link would be something like
"<a href="%PERMALINK%?fav-post=%PRODUCT-ID%" rel="nofollow">ADD TO REQUEST</a>"How can I display only the product ID (%PRODUCT-ID% or %POST-ID%) on a token to use on this button?
Sorry.. This is de button code:
<a href="%PERMALINK%?fav-post=%PRODUCT-ID%">INCLUIR NO PEDIDO</a>