CataBlog has a new Admin page dedicated to the CataBlog Template System. If you didn't notice, the template section is right under CataBlog's 'Add New' page. Here you may make your own template files to use with the ShortCode template parameter or edit the system templates, known as 'views' in CataBlog. There are four views:
DefaultThis template is used when you do not specify a template parameter in your ShortCodes.SingleThis template is used when you enable the 'Public' option and view a Single CataBlog page.ArchiveThis template is used when you enable the 'Public' option and view a CataBlog Category page.StoreThis template is used to render the Buy Now Button.
All template files are stored in your WordPress uploads folder: wp-content/uploads/catablog/templates/ and may be edited directly on the server as well. If, for whatever reason, you need to restore just the default template files, simply delete the templates directory inside the catablog uploads directory.
Editing a Template
To edit a template, all you do is directly manipulate the HTML code in the tabs of the CataBlog Template Admin Panel. You may paste or type your code in to the text box.
Understanding Tokens
CataBlog uses a token system for inserting variable data into your template. By placing these tokens into your template code, which should look just like HTML otherwise, you can plug your catalog's values into your template. Here is a list of all the currently supported tokens with a description of their value.
Catalog Item Tokens
%MAIN-IMAGE%: The catalog item's primary image thumbnail, wrapped with an anchor tag for the LightBox.%SUB-IMAGES%: All of the catalog item's secondary image thumbnails, each wrapped individually with a LightBox anchor tag.%IMAGE-ORIGINAL%: The full url for each catalog item's original primary image upload.%IMAGE-THUMBNAIL%: The full url for each catalog item's primary image thumbnail.%IMAGE-LIGHTBOX%: The full url for each catalog item's primary full size LightBox image. This will point to the original upload if the "Render New LightBox Image" feature is disabled.%IMAGE-PATH%: The full url path the LightBox images directory, if the LightBox is disabled it will point to the original uploaded file.%TITLE%: The title for each catalog item%TITLE-LINK%: The title rendered as a link for each catalog item. No link is rendered if the link value itself is empty.%DESCRIPTION%: The description for each catalog item.%EXCERPT%: A shorter version of the description.%CATEGORY%: A comma separated list of each catalog item's categories.%CATEGORY-SLUGS%: A string of category slugs for each catalog item, very useful for setting html class attributes.%DATE%: The date for each catalog item. The format will match the Date Format in General Settings.%TIME%: The time for each catalog item. The format will match the Time Format in General Settings.%ORDER%: The order value for each catalog item.%LINK%: The link value for each catalog item.%PERMALINK%: The full path permalink for each catalog item.%PRICE%: The price, without currency symbol for each catalog item.%PRODUCT-CODE%: The product code for each catalog item.%BUY-NOW-BUTTON%: This will render the buy now button for each catalog item with a price greater than zero. The store view in CataBlog Templates will be used to render this button.
Catalog System Tokens
%IMAGE-WIDTH%: The thumbnail width in pixels, this is set in Options Panels.%IMAGE-HEIGHT%: The thumbnail height in pixels, this is set in Options Panels.%LINK-TARGET%: The system wide link target, set this in the Options Panel.%LINK-REL%: The system wide link relationship, set this in the Options Panel.
Deprecated Tokens Please, stop using these as soon as possible.
%PAYPAL-EMAIL%: The email address set in the store tab of the Options Panel.%TITLE-TEXT%: The catalog item's title, no link will be wrapped around this title.%IMAGE%: The url to the thumbnail image.%IMAGE-FULLSIZE%: The url to the full size "LightBox" version of the image.
Pingback: Modifying Templates - CataBlog WordPress Plugin
In version 1.2.5.2 the included template gallery.htm still uses the deprecated token %IMAGE%. How should this template be rewritten to produce the same output without using the deprecated token? Thanks in advance for your help. I’m very pleased to find this plugin.
Hi Greg, thanks so much for your question, it is a great one and I really appreciate that you are removing the deprecated values now. Simply replace %IMAGE% with %IMAGE-THUMBNAIL%, that should do it. Cheers.
Perfect, thanks.
New question: when the token %DESCRIPTION% outputs content, I get
<p> (Content as input in product record) </p><br />(I hope that shows up correctly in this comment. The point is the addition of a break tag at the end of the description content.)
That trailing break puts extra space after the description and, in my case, before the price. I’d like everything to tighten up. Could this be changed in a future version of catablog, to omit the break? We (users) can use CSS to add space where desired. Thoughts?
Oh, answered my own question. Found the Render Line Breaks option. Thanks anyway!
Awesome, love it when that happens
can i create my own product attributes? width, height, etc.
Feel free to use the description as you see fit and put whatever you want in it. If you need separate field for each property you may try hacking the plugin, some have been successful at it. This feature is slated for a future release, if you want you may vote for customizable data fields on the Facebook page.
I’d like to add some extra fields instead of having a single long description. I’m willing to doing some hacking to add the extra fields but any help that you could give would be great – examples of where its been done and/or some inform ion of the files (and line numbers) where the data fields are created etc.
is it possible to use php tag in the template?
thanks
why yes it is. simply use this method with all the same options as the shortcode. the category parameter should be a string of category names separated by commas.
<?php catablog_show_items($category, $template, $sort, $order, $operator) ?>I mean in the catalog template not the wordpress template
I’m thinking of doing conditional display using data like order date, or category info or price…
currently it is not possible to use PHP tags in the catablog template, this is because the template is never evaluated, instead it is treated solely as a string. could you be more specific with what kind of conditional display you are looking for? would a set of css classes like
.has-pricesuffice?I have, the same question as krigton,
not good for updates …
I need in catablog template, to put a short description, for example a substring of description, how to do this ?
Actually I, just added a new Token %SHORT-DESCRIPTION%, but I modified th class CataBlog
Hi Tonic, was curious what kind of filters you applied to the description to make your short description? Did you remove HTML tags? hard returns? just take a subsection of the description?
I’m just curious so when I program it I might meet your needs…
Hi Tonic, was curious what kind of filters you applied to the description to make your short description? Did you remove HTML tags? hard returns? just take a subsection of the description?
I’m just curious so when I program it I might meet your needs…
I’ve done just a quick and dirty short description, just removed tags.
$values['short-description'] = str_replace("", " ", substr($description,0,220) . "[...]");sorry I’m not a good php programmer
sorry for previous post, html tags was not displayed ..
I just removed br tags …
to give developpers the ability to add php code to theirs templates, what do you think about giving the possibility to add “personalized tokens”, in separrate php file ?
I am looking at add icons depending on the categories I stick the product into. I would need to run IF statements to sniff out of the it’s in the category list and if so, print out some html.
I could write the php myself but it would be nice if you added a way to run custom code if need be and be upgradeable.
for each %CATEGORY% … if category == ‘this’ print html
Use CSS instead, you can use the %CATEGORY-SLUGS% token inside the item’s div class attribute and then setup a series of CSS classes to display the appropriate icon for each category. Hope that made sense.
I’m using the CATEGORY-SLUGS as mentioned, however, there would be multiple icons. I need to show an icon for EACH class it’s in.
Hate to be a bother but is there a way to get a wrapping div put around the items?
Just wrap your Shortcode with a div, or whatever you want in the page/post html editor.
So the site I put in is the site I am working on. I just need those little icons to appear in the description box. You can see what i’m trying to accomplish on the live site at: http://www.expressivewoods.com, which is a Drupal site.
Bumping this to see if I could get some help with something like this? I was thinking of making a category for each available icon and then doing something with CATEGORY-SLUGS but I need to run a look for each SLUG to write an individual icon out for it. How can I go about doing this?
Ok, so I’m unsure how to fully explain the solution, but it isn’t that difficult.
First: add an HTML span element into the CataBlog template for the icon, give it a CSS class too, like
catablog-item-icon. Don’t put content in the span, just open and close it.Second: add the token %CATEGORY-SLUGS% in the class attribute for each row div, again CataBlog template modification.
Third: create a set of CSS classes for your icons that are something like this:
.catablog-row.catablog-term-category1 .catablog-item-icon { display: block; width: 32px; height: 32px; background-image: url(path-to-image.jpg); background-repeat: no-repeat; background-position: 0px 0px; }Now create a whole set of classes for each icon using the different category slugs in the CSS selector path and different background images.
Good luck.
Well, There will be any number of terms (categories) assigned. There are 6 possible icons, so that’s 720 different possible combinations of categories. I don’t have to explain that this is basically impossible. You see my issue now?
I went ahead and wrote my own function and made my own token. I’ll just not upgrade or keep my stuff for when I do.
%MAKE-ICONS%
Is there any way to use more than one Catablog template within a WordPress site — for example, gallery.htm for a CD catalogue and default.htm for a photo gallery? I’m hoping there’s a way, somehow, to set the template on a per-page basis.
Yes, please read these two posts for more information and instructions.
http://catablog.illproductions.com/documentation/displaying-your-catalog-in-posts/
http://catablog.illproductions.com/2011/04/version-125-released-today/
if you could put the category name in the css as well it would be awesome. still is it hard to change the plugin in order to evaluate the template. I can do it myself if you send me some hints.
I would look near the end of the frontend_content() function in the lib/catablog.class.php file. I basically capture and return a string of text for the shortcode. You may try the eval() php function with the captured string before it is returned. I feel that personally this could be very dangerous security wise. I do not recommend that you evaluate such a string. If you want to experiment with it feel free too, maybe I am being paranoid but such a database variable shouldn’t be executable…..
OMG, Here we go again. When I put this code
<?php catablog_show_items('services') ?>Hi Vladan,
I want to make sure you understand the difference between the shortcode and the template tag, your example is the template tag and that is meant to be placed inside a PHP file in your template code. The shortcode is meant for being inserted into a post or page’s content with the admin editor. Here are some examples:
shortcode:
template tag:
<?php catablog_show_items('services', 'my-template') ?>Now that we have cleared that up, make sure that your custom template code is placed in a file with a name such as
my-template.htmin side views folder which resides in your WordPress installation at this location:The views folder location may change in a future version, but for now this is where you should put your own custom template html files. Hope that helped and if you haven’t already, please:
Rate and confirm that CataBlog works
http://wordpress.org/extend/plugins/catablog/
Like the Facebook page
http://www.facebook.com/catablog
Donate to help the continued development of CataBlog
http://catablog.illproductions.com/donate/
Great,
Thanks man.
It’s working flawless now.
Thank you again.
Hi,
Have a problem with putting short code into wordpress php page.
When I put this “” I got error:
CataBlog ShortCode Parameter Error: The template attribute of this ShortCode points to a file that does not exist. Please make sure their is a file with the name ‘.htm’ in the views directory. [Learn More].
I have custom template, but when I put default template there is also error. Can you help me to fix this problem?
hi,
this is a very good plugin. very easy to use and edit. thanks for that, but i have question is there any way to make %MAIN-IMAGE% and %SUB-IMAGES% to go %TITLE-LINK% instead of orijinal image file?
Hi Dharma,
Both those token won’t go to the catalog item’s link, but you may generate your own main image that goes to the %LINK% value. Look at the gallery template for an example, since this template does exactly what you are asking for the primary image.
As far as the secondary images, are you sure you want all the sub images to link to the same url, also the same url as the main image? I personally do not think that would be a good idea, and perhaps you are trying to use sub images in a way they were not intended for.
Thanks for your interest in CataBlog and let me know if that helped. Cheers
hi zach,
first of all, thanks for quick reply. actually what i am trying to do is to take 5 images(1 main img+4sub-images) that i added to the catalog, title and discription to be shown like a portfolio. %thumb-img takes only one, %main or %sub-img has lightbox wrappers; therefore, the only optionis to override fuctions which calls images, i guess and this is where i need help. this images will be linked to a gallery (to a post or page) where the bigger images will be displayed.
i will check catablogitem class file, let’s see what we can do but help is more than welcome.
cheers.
So you wanted each sub image to link to the same URL?
edit:
i located the sub-image value on line 1627 in file catablog.class.php. changed the a href value to $link and the job is done. the template is something like this
%SUB-IMAGES%
%TITLE-LINK%
%DESCRIPTION%
Could you please repost that with the ‘<’ and ‘>’ characters escaped. I usually do this in a text editor by finding and replacing.
‘<’ replace with <
‘>’ replace with >
Thanks
yes, i can send it. this should look fine;
after i made the change in the class file i edited the theme like this. than everything is fine now.
thanks for your help
Hey there,
I’m using CataBlog as a discography for our released albums. I was hoping to use the %DATE% tag as the release date for the album, unfortunately its rendering to a UNIX timestamp. Any way I can get a pretty date format, or do I need to muck about in the php?
Awesome plugin, BTW, renders beautifully: http://www.downtemposoft.com/wordpress/?page_id=96
Hi nickm,
The new version 1.2.8 will format the date as you have selected in the General Settings Admin Panel. Hope that helps
Poifect! Thx Zach!
glad to be of assistance, and extra thanks for the donation. If you haven’t already it would be awesome if you could rate and confirm CataBlog works at http://wordpress.org/extend/plugins/catablog/
Pingback: CataBlog Now Has Admin Pagination - CataBlog WordPress Plugin
Hi Zach,
I have an enquiry about using the categories to display images on a page.
I only want one thumbnail to appear in the actual post/page and once you click it the rest of the images that are in the category appear in the lightbox. Is this possible?
Currently a I am having to see all the images in the category on my page and it ist looking a bit untidy.
Also, if I wanted to add styling to the thumbnails, where would I add the code (html/css) ?
Thanks in advance
Laurence,
Please read the documentation page Displaying Your Catalog in Posts. The second section will teach you the built in CSS classes and how to modify them. If you want to hide the sub images, I would recommend wrapping them in a div tag or some other HTML tag of your choice and then hiding (
display:none;) the wrapping element with CSS. I believe the LightBox will still work with the sub images, and the primary image will be the only image displayed on the actual page.Hi Zach,
I have used the plug-in on several websites…but am struggling with the spacing on this site. I’ve listed one of the pages. I need the thumbnails to line up with the text…and it doesn’t. Help!!!!!!!!!!!!!! And i thought it maybe due to the size of the thumbnail..but not so.
Please make sure you are closing your .catablog-row <div /> tag in the template, from looking at your page it seems that each catalog entry is actually inside the previous entries wrapping <div />.
Also, I might remove any <br /> tags you have in the CataBlog template and instead override the top-margin of specific CataBlog CSS classes in your theme’s styles.css file.
Look into Firebug or Chrome Developer Tools if you need tools to figure out exactly what value to use for the margin-top.
Hello,
thanks for that great Plugin. My question:
I want to show my items in a grid with preview images.
By clicking on image => lightbox.
By clicking on title => post for this item
How can I realize that?
and:
how to change the width of the hover-block under the preview image
I will add another example for you anyways with what you want….
I would not recommend having the hover title link to a page while having the thumbnail behind it open a lightbox. This would be considered a confusing interface, as it will be very easy to miss click. Not to mention that IMHO most people will see the title shown on hover as simply a description, and not a separate link…even if you stylize the title to look like a link. Perhaps if you made the thumbnails and title very large (200 pixels) it would work well.
Please make sure that each item has a link, otherwise %TITLE-LINK% will not render a link, but instead will render just the title text.
Also, if you haven’t already, please:
Rate and confirm that CataBlog works
http://wordpress.org/extend/plugins/catablog/
Like the Facebook page
http://www.facebook.com/catablog
Donate to help the continued development of CataBlog
http://catablog.illproductions.com/donate/
Edit your template code and use the %MAIN-IMAGE% token for your thumbnail and the %TITLE-LINK% token for your title. Example:
You will be responsible for overriding any CSS properties in your theme’s stylesheet to make the catalog display exactly how you want.
The first one works very well for me. Thank you very much.
But just another question (rated and liked your addon). Donation will follow when the style fits me needs
Is it possible to resize the preview with height not equal to width?
by preview I assume you mean the thumbnail or smaller version of the main image. Currently it is not possible to render a non square thumbnail, but you may use CSS and overflow:hidden to crop your square thumbnails. Something like this…
.catablog-row.catablog-gallery { width: 100px !important; height: 75px !important; overflow: hidden; } .catablog-row.catablog-gallery .catablog-image { position: relative; top: -12.5px; }I am not a developer. Where must I put that code in?
I need previews with width 160 height 240 or double.
Another question:
Is it possible to add a five/ten star rating to the gallery?
you may put the code in your theme’s styles.css file or create a catablog.css file in your WordPress theme’s folder. This code should work for your image size if you are using the gallery template
.catablog-row.catablog-gallery { width: 160px !important; height: 240px !important; overflow: hidden; } .catablog-row.catablog-gallery .catablog-image { position: relative; left: -40px; }If you are using the default template then it will be slightly different.
.catablog-row.catablog-gallery .catablog-image { width: 160px !important; height: 240px !important; overflow: hidden; } .catablog-row.catablog-gallery .catablog-image img { position: relative; left: -40px; }Both variants cut my images.
I have original 640×960 Images that i want to show in a 160×240 preview.
When inserting
.catablog-row.catablog-gallery {
width: 160px !important;
height: 240px !important;
overflow: hidden;
}
.catablog-row.catablog-gallery .catablog-image {
position: relative;
left: -40px;
}
the gallery box is bigger. But images are cutted und do not fit the box.
Please make sure the “Keep Aspect Ratio” options is checked in the CataBlog Options thumbnail tab.
hello,
i checked it. But it reduces my picture to a quarter size, just showing the lower left corner
Are you trying to reduce a 640 x 960 pixel image to 160 x 240 or 240 x 160? In other words which are height and width?
original width x height = 640 x 960
thumbnail width x height = 160 x 240
I just reduced test images of booth 640×960 and 960×640 and was able to crop the white part of the generated thumbnail with CSS and overflow:hidden property. If you are expecting the thumbnail to be cropped and to change orientation (go from tall to wide) then you will need to disable “Keep Aspect Ratio”. This will give you a cropped square, which you may further crop again with CSS and the overflow:hidden property. I cannot teach you CSS, but I would highly recommend getting a tool such as Firebug and experimenting with the values I gave you. Good luck.
There is no rating system built into CataBlog, but you may use another plugin or library in conjunction with CataBlog. I cannot offer you any more help, but will say that you are more than welcome to hire me as a consultant.
I love the arch-chairs template layout, with two columns. (http://archi-arts.com/wordpress/?page_id=88) How can I alter my template to get a two-column listing like this? Thanks for a great plug-in.
Chris,
It’s pretty simple to alter the default layout with CSS and get similar results. Set your template to default and add this CSS modification to your style.css file.
.catablog-row { width: 48%; float: left; }You will want to make sure to clear your floats after the catalog. Good luck and let me know if you get it working.
I added that code to my style.css files but nothing happened.
First, make sure you clear your browsers cache.
I that doesn’t work you might need to add important to the declaration.
body #catablog-lightbox #catablog-whiteboard { background-color: black !important; }I have been playing around with the css a little and I have a question.
Why is my gallery/rows offset? On the 4th row there is a blank spot and the same on the 7th row.
http://memphissewingmachine.com/sewing-machines/singer
The blank spot is due to the third row left item being taller than the third row right item. I might suggest using the css display mode
inline-block. If you need more help setting your.catablog-rowcss class with that display mode let me know.Hi, I really like this plugin. It’s very easy to use. I was looking for a way to have the thumbnails not rendered as links, when lightbox is disabled. Is this possible? Currently if I click a thumbnail the image opens in a seperate window. I just want to have the link action disabled on all thumbs. Any help would be great! Thanks!
Patricia,
If you only need the main image and not the sub images, then simply use this small piece of HTML markup or something similar instead of the %MAIN-IMAGE% tag.
Hi, Can you please explain, preferably with an example, how to use the %CATEGORY-SLUG% (%CATEGORY-CLASSES)
I have tried using it in different ways, as well as is (in it’s literal format) on the template but they render just as they are.
like, on template, renders the exact same way on html page.
Thank you so much for this!! Great Plugin!!!
PS: I’m Using Catablog 1.2.9.7 with wp 3.1.2.
I am having the same problem. Seems like Category slug is not working. The template just outputs %CATEGORY-SLUG%.
I figured out the problem. It should be %CATEGORY-SLUGS% and not SLUG. Looking at the code, I found that it was SLUGS.
ooops…”" the line of example code did not show on prev message.
Hi Zach,
Everything is coming along great with your plugin, so thank you! However I’m having trouble customizing the “category” view.
I have created the files “listview.htm” in the catablog template directory, and “taxonomy-catablog-terms.php” in my root theme directory. In the body of the .php file I have:
Now I know I’m not supposed to use $category, but the actual category name … i.e. if I use (‘hats’, ‘listview’) it works fine and shows all hats, using my listview.htm template. So I think my setup is correct but I don’t know the right syntax to use. How do I get it to show ONLY the products from category I’m actually IN, while using the listview.htm template? i.e…
Right now it appears that, when looking at a category, it uses the single.htm template — which I have modified successfully to show extra thumbs, description, price, etc. So when looking at the hats category, they’re listed correctly, but using the single template…. I want the category view to use the listview template (which is just a table showing the thumb, title, and price). I hope I’m being clear and am sure I’m just overlooking something simple. Thanks again Zach!
Sorry, the comments area didn’t seem to want to show the php code. In taxonomy-catablog-terms.php I have (minus the spaces around php):
and am (I think) basically looking to make it:
Sorry, the comments area didn’t seem to want to show the php code. Sorry about the extra comments. In taxonomy-catablog-terms.php I have:
and am (I think) basically looking to make it:
Sorry, the comments area didn’t seem to want to show the php code. (I apologize for the extra comments; feel free to delete my mess). In taxonomy-catablog-terms.php I have (with correct php tags):
php catablog_show_items($category, ‘listview’)
and am (I think) basically looking to make it:
php catablog_show_items(‘this-category’, ‘listview’)
hya, thanks for this very usefull plugin, it really rocks
one thing i’ve been trying to do, is setting height to be different then width in gallery template.
but with no succes, any hints? ^_^
Look around the blog, there are discussions about this very issue, can’t give you a link now, but can later.
Also, different width and height setting will be coming in the new release. Since I’m on vacation I can’t tell you when though.
Hi im making a product gallery for my website using catablog.
The problem i’m facing is that
1. I want images thumb on the left and description on the right side (i tried your example css but as my product description is very long it almost took half page of my site.) Can you tell me how to reduce it or show a brief description.
2. if someone clicks on the image it should take the viewer to full description of that image/product in the light box with text coming on the side(not at the bottom)
Need your help!!
Hey Jimmy,
All that you want may be achieved with CSS, I can’t really hold your hand through the entire process though. It will take quite a few modifications and you should either hire an expert in the field or learn more about CSS yourself. You should modify the CSS classes in your theme’s style.css file or in a catablog.css file in your theme’s root directory, do not edit files within the plugins folder directly. I would also recommend learning about a tool called Firebug, that will let you modify CSS and see the results in realtime. By overriding font-size properties and position properties you should be able to accomplish all that you want. Good luck.
I’ll like to know if there is any posiblity of using only one SUB IMAGE that fills all the width of the MAIN IMAGE?
Thanks in advance. The plugin is REALLY useful.
So you should look into using CSS to change the width of the .catablog-subimage class.
Read more at http://catablog.illproductions.com/documentation/displaying-your-catalog-in-posts/#css-options
Can I just say that this plugin ROCKS! You are brilliant.
Yay, thanks
Make sure to like the Facebook page and confirm the plugin works.
http://www.facebook.com/catablog
http://wordpress.org/extend/plugins/catablog/
Hey Zach,
The description token automatically adds tags. This isn’t really a problem except that I am using the %DESCRIPTION% token as a title to catablog photos and so these tags are automatically being added as text since they are rendered inside the title=” ” for the images anchor tag. I’ve searched and searched through the php files to find where these tags are being applied and haven’t been able to make it work. I got close and thought the place where you remove tag and tried to slip in the tags as well but was unsuccessful.
I second this post. I am using description for title to and it looks ugly showing tags… and all.
Can I get an example?
http://www.yargermachinerysales.com/?page_id=291
http://www.expressivewoods.com/wordpress/products
Hover over the image.
Did you try messing with the description tab in the CataBlog Options? Specifically the Render Line Breaks and Enable WordPress Filters options should be unchecked.
yes that removes the line break but not the paragraph tag
Did you try messing with the description tab in the CataBlog Options? Specifically the Render Line Breaks and Enable WordPress Filters options should be unchecked.
Also are you sure the <p /> tags aren’t in your template code?
Also yes, it isn’t actually a template issue so much. The template controlled the layout but I had to refer to a different lightbox due to conflict with my theme that I couldn’t work out even with the suggested theme fix… the token is rendered in the title=”" anchor alone. example:
….
The line break is removed by deselecting the option you mentioned but the tags remain. I attempted to locate the description token definition in the php code and found the location of the option for rendering line breaks but couldn’t code out the tag. It still displays when hovering over the image.
Must be because I am using the
<?php the_content(); ?>instead of<?php get_the_content(); ?>. But I’m not sure, just a guess.The %TITLE% token doesn’t have the tag though so I thought there must be some sort of distinction… I’ll go through the code again to see if I can find the %DESCRIPTION% declaration and edit it out.
Look in the CataBlogItem class for the description getter and setters. That’s about as much help as I can give.
Also yes, it isn’t actually a template issue so much. The template controlled the layout but I had to refer to a different lightbox due to conflict with my theme that I couldn’t work out even with the suggested theme fix… the token is rendered in the title=”" anchor alone. example:
” href=”%IMAGE-ORIGINAL%” class=”catablog-image” title=”%DESCRIPTION%” rel=”lightbox”…. “”
The line break is removed by deselecting the option you mentioned but the tags remain. I attempted to locate the description token definition in the php code and found the location of the option for rendering line breaks but couldn’t code out the tag. It still displays when hovering over the image.
Hi,
I am trying to use Catablog in a website that has two languages. I have figured out how to use it to display the two different lists by giving each language its onw category per item and then calling the different categories on the different pages.
Now that works fine. But when I want to go into the single view the website always goes back to the default language. How can I get it to remain in the same language when I view the products single view?
I am using “qTranslate” plugin for the different languages.
hope you can help.
Just a little more info:
It seems that on the single view page the qTranslate doesn’t have any effect on the content either when I change the language.
I am stuck with this issue.
Hmmm, sounds like a bit of a conundrum. Not sure how to help you, perhaps you can try enabling the WP Filters for the description in the options tab, not sure if it’s setup to work on the single view…
Hi,
I have tried to do that. But can’t get it to work.
Is it possible to add to the premalink of certain categories. Then I could adjust the english ones to go to /en and the dutch ones to go to /nl.
That should then do the trick. (hopefully)
Hey Zach -
One other idea for a good token would be something like %EXCERPT% which could be used to just take the first ten words or so of the %DESCRIPTION%. I’m looking to make a gallery for example, and it would be awesome of have an excerpt right under the image, title, price, etc., but then when you click through to the product page, I could use the “single” template to pull the entire product description. I snooped around your site to see if this had come up as an idea but didn’t come across anything. Anyway, would love to know what you think!
-JA
Well, I’ve thought about it, and perhaps it will make it into a future version. You could use the “extra” product description field (under price) for now to manually put your excerpt field into each catalog item.
I would like to use your module. have to change font to more modern, now I have something like courier? In title and in description.
I can’t find place where you have font chose in ccs file. Can You help me a little.. I would be happy to se arial or just times roman…. I made page for animal sanctuary, and Your Catablog is perfect for me:)
I am using your default template, to list a selection of courses i do. The template creates links for the image titles which i am directing to my individual course pages (so i enter my permalink).
i would like to be able to click the pictures to so they link to my separate course pages instead of them opening the image when clicked! is this possible. ps. new to this so nothing to technical!!
Many thanks
Hi Zach – Another quick question. I’m essentially using the default display for my products, but I’d like to have the thumbnails link through to the URL that I designated on the back-end. I was having trouble getting this to work however, and was wondering what template code would work. Would you do something like this by putting an href with the %LINK% url around the main image?
%MAIN-IMAGE%
%SUB-IMAGES%
%TITLE-LINK%
%DESCRIPTION%
%BUY-NOW-BUTTON%
My second question is whether this change would stay as part of the default or whether I’d need to create my own separate template in order to ensure it remains as part of the template? Would just adding it to the default and hitting “save” work?
Thanks!
-JA
Woops, sorry:
%MAIN-IMAGE% %SUB-IMAGES% %TITLE-LINK% %DESCRIPTION% %BUY-NOW-BUTTON%I am new to catablog.
My goal is to have four columns across with a thumbnail and a description under the thumbnail. I want the four divs centered on the page and the thumbnail and description centered within the div. How can I center my thumbnails and description within the div?
http://www.wolfridgeicelandics.com/sample
Thanks
Never mind. I found the answer here.
http://catablog.illproductions.com/documentation/displaying-your-catalog-in-posts/
Using Catablog in an office furniture site ( http://inventory.sustainableofficesolutions.com ). All works fine, but when someone uses the Search Field in the left sidebar (for instance searching on #004) and the item comes up, the price is not shown as in the others….I know that this has something to do with the templates, but I have not been able to figure that out.
Other than that, awesome plugin and great functionality.
Thanks!
Tom
This plugin is too good. Could you please let me know how do i add a box for each row in the single template… Is it possible to add a box for each item(pic,title and description everything in a box)
The CSS class for each catalog item is .catablog-row, just add a border to this class.
Thank you! I used Table properties. Is there a way to loop through and limit the number of products in a single page? like if 10 products are there. 5 would display in one page and other 5 in 2nd page with navigation link displayed down
Hi,
I love your gallery plugin. It saved me alot of time.
However, could you help me with some problems. I have 2 galleries to show. Both of them are using the gallery template. One of the galleries have a thumbnail size of 246px x 148px, while another have a different size. It looks like from your plugin options, i can only choose to enter one of the size, i can only have one of the galleries having the correct thumbnail size.
Is it possible to make both galleries working? Thanks in advance!
I would suggest that you set CataBlog thumbnail size to the larger resolution and use CSS to reduce the thumbnail
size for the other gallery. Good luck
My Firebug plugin in firefox is detecting a
.catablog-title {
margin: 0 0 0 170px !important;
}
I can fix the problem in that code, but I can’t find it in the CSS file anywhere.
this code’s referense is the page in which I’m displaying to CataBlog. Doesn’t make any sense
This CSS class is rendered inline in your document’s header because it is dependent on the thumbnail size you set in CataBlog Options. You may override it with a CSS class of your own in your theme’s style.css file or in a catablog.css file in your theme directory.
Thanks for the help. I solved the previous problem by removing the limitation of $width and $height of the thumbnail.
I have another question for you:
I put into the theme’s template to display category apple using template.html.
I notice that you have a catablog-post-meta at the custom field of a page. How do i replace the “apple” at the coding above with the catablog-post-meta?
looks like the coding is not coming out with the php tag?
catablog_show_items($category= “apple”, $template=”template”)
Ps sorry for the spams
If you are attempting to render your catalog items with the above example code you will not be successful because your syntax is incorrect. Try this instead:
<?php catablog_show_items("apple", "template"); ?>Zach -
any input on my post from last week?
Using Catablog in an office furniture site ( http://inventory.sustainableofficesolutions.com ). All works fine, but when someone uses the Search Field in the left sidebar (for instance searching on #004) and the item comes up, the price is not shown as in the others….I know that this has something to do with the templates, but I have not been able to figure that out.
Other than that, awesome plugin and great functionality.
Thanks!
Tom
Hi Tom
I think you will need to edit or create a taxonomy-catablog-terms.php file in your theme’s folder. You may read more about it at http://catablog.illproductions.com/2011/05/new-individual-catalog-item-pages/
Just wanted to follow up on my earlier question. How exactly do I get the image of my catalog item to link properly to the designated URL that I specify for it? Right now the title links through to the URL but the image, when clicked on, just opens up as a non-thumbnail version of itself. It must be easy but for some reason I don’t seem to have the code right on the template…
-JA
You need to change the way CataBlog render’s your catalog in HTML. This may be done in the CataBlog Options, template tab. There you should replace the %MAIN-IMAGE% token with your own code, that should look something like this:
Working now – Thanks Zach!
A quick follow up: if I want to go back and make further changes to the default template that I did these changes in and I click “load template” would it call up the original default or the newest version that’s been improved with the code you gave me here?
-JA
If you click load template it will replace your current template code with the content of the file you select in the drop down. If you want to edit your template, make your changes to the code and click save button below the text area.
You may also add your own file to this folder:
Add a file of your own to create a new template in your load template’s drop down menu. Simply add your own file that has a
.htmextension like the other files in that folder. It will now be “loadable” in the Admin interface with the load template drop down menu. You may also use the templates parameter of the Shortcode to select a different templates, read more at Displaying Your Catalog in Posts.Uploading your own templates this way is not a permanent feature. The primary problem with this feature is that an upgrade will replace any of your custom templates. Eventually your templates will be stored somewhere else. For now, you can play around with it if you like.
Hey.. and thanks for all the effort you’ve put into this intuitive plugin!
Ive got a request from a client and I’m hoping its possible.
We are using Catablog for interior page galleries.. but they would like to give a preview of the 6 most recent images uploaded as a preview on the front page. Is this possible?
Ive hunted around in here and on WordPress but cant seem to find this specific question. Would be great to have a widget that picked up some recent images with a link to an interior page to see all images.
Not currently, I need to wire in the limit parameter for the database query into a Shortcode parameter so you could do something like this.
Hi,
Thanks for the plugin.
I am looking to figure out a way to link the images in the catalog to a link of my choice. Right now they go to the image URL. However, i want them to go to the same page as the link URL in the catalog that I have entered. The title goes there but not the image.
I have tried playing with the tags above in the template but cannot seem to get it to work.
Would really appreciate some help and guidance.
Thanks
Just to note I am using this as a ‘try’
<a href="%LINK%" rel="nofollow">%MAIN-IMAGE%</a>When I look in Firebug, I can see that it loads in the link but is then overwritten by the image with its link.
Hi Redwall,
I saw your comment on the WordPress forums and replied at http://wordpress.org/support/topic/link-image-to-same-link-as-item-titles
Also, for future reference you need to escape your HTML code when writing a comment, so a < should be written as <
I had gotten my catablog to display as I wanted with three columns. However, now that a colleague has added titles (which display under the image) my display is off. There are spaces where there should be the thumbnail of the next item.
I created my columns by placing the following within my catablog.css.
[code]
.catablog-row {
width: 30%!important;
float: left;
display:inline-block;
}
[/code]
Then for my template I’m using the following.
[code]
%MAIN-IMAGE% %SUB-IMAGES%
%TITLE-LINK%
%DESCRIPTION%
%BUY-NOW-BUTTON%
[/code]
Currently we only have the titles populated and not the descriptions. It was the populating of titles which caused the display problems.
One display problem is here although as the site is in development mode the page is not public. I can deactivate this development mode temporarily if I know when one might like to view the page. http://www.elichaifinejewelry.com/jewelry-collections/bridal
I welcome any suggestions and thank you!
I got this to display correctly. (at least with the current items and titles that we have).
I removed the float: left from the css for .catablog-row. This repaired my rows. Then I had a problem with the items that had one line of title displaying a little bit lower than the items with two lines of wrapped title so I added vertical-align:top; to my css for .catablog-row.
Hello,
I would change the template for the text layout (colors, font, size …)
Do you have any pre-established template, easily réutisable or modified.
thank you
You may override the font size, colors or anything else with any of the CSS classes described at Display Your Catalog in Posts.
Hey Zach, I’m having a real hard time figuring out how to place 4 columns with images (300px width each thumbnail). Every time I edit the .catablog-row {width} the images overlap, if I get to a higher value I only get a single column.
See it by yourself:
http://lonrot.fran.cr/wordpress/?page_id=10
Check my draft too:
http://lonrot.fran.cr/mockup.png
Sorry for the delayed response, I have been too busy to work on CataBlog lately. Anyways, you will need to do a little math or just guess and check the thumbnail size that fits four across on your websites page. I would start by switching the CataBlog template in the CataBlog Options to gallery. Then you must play with thumbnail size until you get the desired results.
Thanks Zach, will try with Gallery template then.
Hi Zach, I posted a question on the wordpress forum but didn’t get much replies on that. So I try it here
.
I was wondering how to add custom fields to the images. I’m building a website with a flower catalog on it, +/- 50 peices. and they have all different attributes. like stem size, pedals numbers, growth time etc etc. It would be great if I can create a standard “fill in form” wit 10 custom fields that you can be fill in in the backend so it show the same layout in the front end for each flower. The allready existing fields are almost what I’m looking for.
Hope to hear for you
Bondjack.
What you want will require hacking the plugin, PHP time. I really do want to add a feature to let you customize the catalog item’s fields but haven’t found the time.
Hi!
I have read most of the question but I quite can’t figure out how to create rows or column?
I would like to create 3 or 4 columns with my thumbnails. Could you tell me which file should I exactly modify (Catablog css, my theme css?) and what should I write?
And also how should I increase the thumbnails border?
Thanks a lot for your help!
I will have to right a post about this…come back soon.
I’m looking forward to this post. I would love to add columns as well.
Here is the tutorial: Multiple Column Tutorial.
I replaced buy it now with PRICE in the default template and that got the price on my catalog items ( I don’t want the purchase option — “add to quote” would be ideal but I’ll think about that after the site is up. For now, I want the gallery format but with title and price underneath not title only when hover like now. Thanks for your help
One of catablog’s best features is the template option which gives you complete control of how the HTML is formatted. Use it to achieve your goals.
Forgive my ignorance. Can you tell me what to change/remove to prevent the hover text in gallery view. I have it as regular text under the pictures.
Thanks,
Hi Zach. First of all, thank you so much for your hard work! It’s really a great plugin.
Here is my question. Basically, what I’m hoping to achieve is same as the guy in WordPress Forums:
Limit gallery view to first image
I’m just wondering if you’ve found any solution to this since then. Or if I wanted to download your old version of Catablog to achieve this effect, where can I find it?
I thought of trying to do this in the Single template using sub images. (setting sub images on none: display;) But then I found that you couldn’t go to previous image but go only to next image in lightbox for sub images, which appears the same in your Demo page. I found it’s a bit unfriendly to users. (I can never go back to “Super Mario 2″ image once I’ve gone to “Super Mario Bros” image inside of lightbox.) Also, if you have only one main image with some sub images in a category, it won’t even let you go through sub images in lightbox. If you could let me know the update/solution to the WordPress discussion, or suggest me any additional codes or trick to go back and forth between those sub images inside of lightbox, that would be superb!
Thank you.
I have posted a solution to this question using a few simple CSS classes at:
http://wordpress.org/support/topic/restaurant-style-menu?replies=7#post-2554849
I am new to catablog.
My goal is to have four columns across with a thumbnail and a description under the thumbnail. I am having trouble finding the answer here, can you please break it down to me so that I can undestand it, Please explain where I need to to add the code and where to modify it.
The actual website where I want to display the columns is http://www.543display.mx/?page_id=36
Thanks
Jorge, to get four columns across you should switch your template to the gallery template and then you should measure how many pixels wide your page content area is. Divide that number by 4 and subtract 5 for margin spacing and you will have a close approximation of how many pixels your CataBlog thumbnail size should be. You may set your thumbnail size in the CataBlog Options Admin Panel. Play with this number until you get your four columns.
Hi, is there any way to show the image titles all the time without hovering?
and could you give an example of how to do it please?
THANKS!
Hi Zach,
Thanks for making such a great plugin! I’ve decided to use Catablog on my site to display products. The way the gallery displays is perfect. What I’m having an issue with is my “buy” button, which displays in the gallery view, doesn’t display on individual posts.
I’m really confused, as the product image and description appear in the post, just not the buy button. The token is even in the template, but for some reason it just doesn’t appear.
Can you please help me out? Thanks in advance!
Not sure what’s going on here, I will look into it.
I assume when you refer to individual posts you mean you enabled the ‘Public’ feature in CataBlog and it’s one of your catalog items’s permalink pages?
I have checked and confirmed that the buy now button is rendering on single catalog item pages with the current CataBlog 1.3 prerelease. I’m unsure if this is a bug with CataBlog 1.2.9.9 but 1.3 will be officially released very soon and you shouldn’t have the problem anymore.
Hey Zach,
Thanks for responding so quickly! I just updated to 1.3 and I seem to still be having the same issue. This is what I’m using for my default template, am I doing something wrong?
%TITLE-LINK%
%DESCRIPTION%
Cody,
You must escape your HTML characters before posting them to comments. Please use a text editor to replace this characters.
I have deleted your other attempts to post your template code because they didn’t work, look forward to helping you once I can see your entire template code. Cheers
Thanks, sorry to bother you with the duplicate posts!
Hopefully this one works:
It would seem that your code should work, I think the align attribute on your image tag is a bit out of date, but that is merely semantics. With CataBlog 1.3, in the new CataBlog Template Admin Panel, did you try putting your custom template code into the Single view (second tab, below default). In CataBlog 1.3 and future versions the template code that is used to render single catalog item pages is stored in the single view. Most likely will be adding another taxonomy or “list” view for catablog category pages.
If I still haven’t solved your problem can you send me an example of a page that shows the button and a page that doesn’t show the buy now button. Good luck
Hello, Zach!
Thanks for the plug-in.
I have a question, is there a way to organize the description of the images so to be displayed part of it next t o the image and the rest to have option to be opened on the same page with “more info” button or to appear in text window, for example. And also how can I modify thumbnails size, display, etc?
Niya,
Your option for hiding part of the description would be to use CSS classes on two different div tags.
Example catalog item description:
You may then add css classes to your theme’s style.css file like this
.primary-description { display: block; } .secondary-description { display: none; } body.single .secondary-description { display: block; }I am a little unsure of the last class, it would depend on how your theme is setup. But most themes add page specific identifiers to the class attribute of the body tag. Look at your page’s source and you should be able to find a suitable class to use.
As far as individual item pages go, turn on the “Public” option for CataBlog if you want each item to have its own page. You may use the %PERMALINK% token in your default view to create a link to the individual items page. Thumbnail size may also be modified in the CataBlog Options Admin Panel.
Good luck
Zach,
Thanks for the answer.
The thing is that I am not sure what/where to find my ” theme’s style.css file”, how can I check my page’s source?
Isn’t it possible to display this css class under the form of short code at the post/page content?
And last thing, this individual page/space where the rest of the description would appear, should I creat them or the description will appear at the same window? (which is what I would like to do).
Thanks,
Niya
Hi Niya,
I think you might want to do some more research on CSS, HTML and modifying WordPress Themes. Here are some quick answers.
Your theme’s style.css file can be found on your web server or you may edit it with the editor under the Admin Appearance section.
WordPress does not let you enter CSS code into the page editor, so you may not paste those CSS classes under the Shortcode.
If you use two div fields and show or hide them appropriately you should not need to worry about reserving space for them. Remember that both div tags would need to be in every catalog item’s description.
Ok, thats about what I can do to help you, hope it was useful and good luck.
Hi, Zach!
I just wanted to thank you for the help.
I actually was not able to figure out this last class how to name it in order to work..
body.single .secondary-description { display: block; }..what I did was I left only one class for the catalog Item description and then put in the theme’s style.css file:
.primary-description { display: block; background: #fff; width: 600px; height: 160px; overflow: scroll; }This way I can read the whole description scrolling down.
Thanks again!
Great catablog
Hey Zach,
is there any way to make a primary thumbnail link to a secondary image?
Thanks a bunch
- H
The problem is that you may have as many secondary images as you want, meaning that you need to select one secondary image from the array of secondary images to link to. This is currently not possible with the token system, but could be achieved with PHP. The secondary images are an array stored in the post meta data with the key ‘catablog-post-meta’.
Good luck!
Argh, could you be more specific? Do you offer any paid support?
Also i would like to load the secondary image included in a DIV via a jquery LOAD and then add all the information to the div. How difficult is this?
Thanks again
- H
You may pay for my services through my company illProductions. Please email me directly for price quotes. Seems like you might need someone to build you a custom solution or plugin.
- some free advice
Look at the gallery template in CataBlog, the thumbnail links to the link value of each catalog item. If you were to set the link value of each catalog item to the full URL of your secondary image then the secondary image will load into the LightBox.
- some more free advice
The %SUB-IMAGES% token renders out the entire array of secondary images as img tags wrapped in anchor tags. I cannot assume their is one, two or even three secondary images, I must always treat them as a group or array of image. You may wrap the group of secondary images in a DIV if you want. You may also use jQuery to modify the HTML after the page has loaded if you want. I don’t offer support on jQuery here, as it is far above the scope of my plugin.
HI there, I’m looking for a way to not display anything when you don’t enter a URL. Currently, if we don’t enter a URL, it displays and links to this: #empty-link
Is there an easy way to change this?
Thanks!
Mark, you should modify your template by removing the %MAIN-IMAGE% token and building your own HTML. Something like this:
Thanks Zach, I think we may not be talking about the same thing. In the template, this line:
Is showing the URL, unless you leave it blank, then it displays #empty-link
I’d like the option that if it was blank, to not display anything… Is that possible?
Thanks for your fast response!
Hmmm……
So the problem is that the actual anchor tag will always be present in your catalog, even if CataBlog didn’t modify the value so it was left empty, your code would be rendered like this:
I would assume you do not desire an empty anchor tag but instead want there to be no anchor tag. To do this you would need to use conditional statements like ‘if’ and ‘else’ to hide the entire link.
CataBlog templates have no programatic controls for security reasons and I would suggest perhaps looking into the Public feature. Once enabled you may make your own template files for CataBlog with access to PHP and conditional statements.
Hope that was helpful, let me know if you have any other thoughts or questions. Happy to be of service.
Thanks Zach, that’s the problem alright… Thanks for the info, I’ll see what I can do. In the short term, I can remove that line from the template and just add a link to the body area if we want one.
Thanks!
Your welcome. Would like to see the site when you get it done.
Cheers
Hi Zach,
Thanks for such a great plug-in! Is there a way to change something so the dashes are not stripped from the filenames for the Title when Images are uploaded? For example, I’m uploading files with names such as “BB-1001-02-1028.jpg”, but the Title appears as “BB 1001 02 1028″. This would save me a lot of time for my use.
Thanks, Carl
I should add that I would like the Title to appear as “BB-1001-02-1028″ (extension is stripped off, but not the dashes). Thanks!
Hi Carl,
There is no way to do what you want without hacking CataBlog, that being said it would be a fairly easy hack I think. I believe the current way that file names are converted to titles is the correct way to do it, unfortunately it is not ideal for you
If you don’t want to hack the plugin you could always use the CSV export/import feature to make a spreadsheet that you could easily modify all your items title in one fail swoop.
Let me know if that helps or if you have any other questions.
Thanks for such a quick response. I will look into the CSV export/import. I have never tried that, but I guess I will figure it out. Can I also use that to input the Description and other fields?
I do have another question. When viewing the CataBlog Library, how can I make the default Category be “Uncategorized” (instead of “- All Categories”). I know this is probably pretty simple, but I am a code newby!
Yes, the CSV export/import lets you set values for all the CataBlog fields.
As far as recommending a way to have Uncategorized be the default category, I would recommend bookmarking the library page after you have set the category filter.
Hey Zach, thank you for your great plugin
I have one question: is there way how can i display subimage like in this code: ? The token %SUB-IMAGES% is with link wrapper. Where I can edit the tokens?
Thanks for reply.
Jan
Jan, for now the sub images are always wrapped in an anchor tag. You could hack the plugin, looking for SUB-IMAGES in the CataBlog.class.php file will find you the code block. If you aren’t comfortable doing that I don’t know what to suggest. The anchor tags are for LightBox support, so if you want to use the LightBox you might still want them there.
Ok, thx for quick reply, I don’t want use lightbox. I’m gonna try it.
I have another question if I can: I’ve created template single-catablog-items.php and there is a code ID); ?> but it doesn’t work. Where is the problem? How can I display single item?
code:
ID); ?>it cannot display my code
catablog_get_item($post->ID)Try this:
Hi! Really love this plugin! It’s what we wanted without messing up the gallery used in WordPress (another plug in messed up a year’s worth of images, it was a mess!). The only thing we are looking for is is a countdown timer to go under each image when displayed as a gallery. If you click on my name it’ll take you directly to the page where the Catablog gallery is. We LOVE having three images per line, but want to add a counter so that viewers know how long they have left to get each tshirt (as they are updated at different times). I am putting code in the description box, but in the gallery template, I cannot figure out how to get the description displayed. Is this possible? I’m new to html and have tried what I know about it to get the description to show but it doesn’t seem to work right. What am I doing wrong? Thx!!!
Reagen,
Nice looking site, I noticed you now have new web sites loading when a CataBlog item is clicked, so I am curious if you still want a count down timer? Unfortunately, due to the nature of how browsers fetch images from servers you cannot show a load progress indicator (countdown). If you enable the LightBox feature the description will be displayed in the LightBox, if the LightBox is not working try removing the link value from your catalog items. Good luck.
Hi Zach,
Thanks for the plugin! so far so good.. With the Default template, all I’m looking to do is make the %MAIN-IMAGE% link to the same destination as the %TITLE-LINK%, a PDF. I know it can’t be THAT difficult, but man, I’m having a tough time. Any help would be great!
Yes, it’s easy. Just replace the %MAIN-IMAGE% token with an anchor tag wrapped image tag. You can look at the gallery template for an example.
Example:
Hi Zach,
I’ve been working on a pretty cool template for catablog for a specific design need. I’ll leave a link and perhaps the code for anyone interested once it goes live. But in the meantime, I “hijacked” the Price Input field for a dimensions dataset but the price and the link are coded in such a way to not accept anything but their required inputs. I would love to add another field type or change one of the existing field types for my client.
Specifically, to add a “color” input field.
I could probably go in a fiddle around with the code but I am afraid I would lose any changes upon update and you update your plugin rather frequently (a good thing!).
Any ideas on how I could repurpose the link or price field or add another field that will stay put upon update?
Thanks.
-David
Hi David,
What you speak of is already on the top of the list for new features to be built. You probably already figured this out, but the “product code” field is not validated for any value, so that field is prime for hijacking. Hope that helps you out, and hopefully the next big update to CataBlog will have those customizable fields option
Cheers,
Zach
Zach,
First I have to say that CataBlog is great! It’s really making it easier to implement an online store.
I’m glad to see that you’re going to implement this, but unfortunately, I need it now. I’m working on a store for a soccer club website that includes apparel. I need the user to be able to select a size. I actually need to specify one of multiple option sets (for Youth Small through Youth X-Large, Adult X-Small through Adult 3XL, etc.)
My solution is to implement multiple variations of store.htm (store1.htm, store2.htm, etc.) with the appropriate option sets and then encode the specification of the appropriate option set in the Product Code. Then I plan to modify frontend_render_catalog_row in CataBlog.class.php to select the appropriate version of store.htm by decoding the Product Code. Do you see any problems with this approach? Am I missing anything?
Thanks,
Erich
Your approach should work fine. Keep in mind that if you don’t need to conditionally show a buy button based on price, I would just ignore the store template all together. Then you can make as many templates as you want without hacking the plugin. Just replace the %BUY-NOW-BUTTON% with the contents of the store template. Good luck and hope that helped.
Zach,
Thanks for the confirmation. I may not be fully understanding you, though. Don’t I still need to hack the code to select the correct template? I very likely will have different option sets even in the same category.
And while on the subject of categories, is there a clean way to keep the ‘uncategorized’ category from showing up in the drop-down menu in the sidebar widget? Other than testing for it in the code that creates the HTML, that is.
Yes, yes, I think I know what the solution should be, setting a store template per catalog item. Really you want to be able to call any template as the “buy now button”, which btw is from a long time ago and the name really doesn’t mean what it should. Anyways, you are right, you need some way to control which options are available per product. Good luck.
Zach,
Three lines of PHP + a handful of store.htm variations + updated product codes = success!
I’ll send you a link when I go live.
FWIW, I think your solution of being able to specify a store template on a per-product basis is the way to go.
Again, thanks for the assistance and the great plugin.
hi
i use catablog for a product catalog.
currently clicking an image opens a lightbox.
how do i change it so when clicking a thumbnale it wil open a new page?
thanks
lenny
just to explain what i mean:
i cheked, in the options,: “Enable Individual Pages and Category Archives:”
i’d like a page to be created automatically for each product in the catalog.
and the thumbnail to link to this page, not to the lightbox.
this page will include full size image and the description.
is it possible?
thanks again
lenny
Yes, simply use the %PERMALINK% token in your template. If you are not familiar with the CataBlog Template system then I suggest you read more about it. If you are using the Default template, you should replace the %MAIN-IMAGE% token with your own HTML code that is something like this:
Otherwise simply modify the anchor tag so its href attribute is set to the %PERMALINK% token. If the LightBox still loads after you have made these changes, then try to remove the catablog-image class from the anchor tag.
Good luck
dear zach
now everything works fine, except for one huge problem: thers’s no editor for the product’s description.
i can’t use the pligin without it.
is there a way to put an editor for the description?
thanks
lenny
Newer versions of CataBlog now use the TinyMCE editor, it does require WordPress 3.3 or better though.
Hi Zach,
I love your plugin, and I think it would really suit a site I am working on right now. It’s for a company that deal in cival engineering. They have a ton of “case examples” to go on their site, so figured catablog would be great to manage all these. My question is say I have something like this:
Generic Title
Generic Description
Generic Title
Generic Description
Generic Title
Generic Description
When the user clicks the title, the link would take them to a template page with more info and pictures on..
Is this possible? Do I even make sense? haha
Thanks for any advice/input!
Kind Regard
Jay
Hi Jay, yes you make sense and there are two paths you can follow to achieve your results.
1. Use CataBlog for everything, the listing and single pages. You can accomplish this with the Public feature in CataBlog, which will turn each catalog item into its own page, like a single post. You could either use the Public archive pages for your listing, or you could use the Shortcode in a page or post. Either way, you most likely will need to modify the CataBlog Template to use the %PERMALINK% token.
2. Use CataBlog just for listings, placing the Shortcode where you want your catalogs listed and make individual WordPress pages or posts for each case example. It is simple to tell CataBlog where to go when you click the thumbnail or title, I would use the link field in each catalog item with the %LINK% token. Also, note that %TITLE-LINK% uses the link field and the item’s title to automatically make a linked title.
Good luck
Hi Zach,
i love this plugin. thanks
i have a question on how to put Title and Description below image, instead of on the right hand side.
pls refer my sample site
http://www.jcbnetworks.com/sample2/aboutus/
thanks for your help
jacob
In your CataBlog Template, remove the catablog-images-column div from your markup. After you do that you need to override the margin-left properties for .catablog-title and .catablog-description CSS classes to be zero. Good luck.
I highly recommend you look into learning tools such as firebug on firefox or the developer tools on chrome. It makes overriding CSS properties very easy.
Hi Zach,
i try to remove this div
and override the margin-left properties for .catablog-title and .catablog-description CSS classes from auto to zero, as below
#catablog-edit-params {
float: right;
clear: right;
position: relative;
width: 250px;
margin: 0 0 0 0;
}
but it doesn’t work. i m afraid maybe i’ve modified wrong css file
sorry need your help again
thanks
Hi Zach,
i try to remove this div
and override the margin-left properties for .catablog-title and .catablog-description CSS classes from auto to zero, as below
#catablog-edit-params {
float: right;
clear: right;
position: relative;
width: 250px;
margin: 0 0 0 0;
}
but it doesn’t work. i m afraid maybe i’ve modified wrong css file
sorry need your help again
thanks
Hello!
First off, thanks so much for your work on this plugin. I, as well as many others i’m sure, really appreciate your hard work.
I came across something that I can’t figure out how to change; I’m using the Gallery template and have Lightbox enabled. I use Lightbox on some pages, but on those pages I also have a section with the Gallery template. I’d like to be able to click on those icons and instead of opening lightbox, taking me to a different page.
Is this possible?
Thanks
Yes this is possible, it will require you modifying some options and making your own template. First I would make a new templates based off of the gallery template, name this template gallery-lightbox. Copy and paste the content of gallery into the template and save. Now change the class of the anchor tag so it is
catablog-image catablog-open-lightbox. Full template should look like this:<div class="catablog-row catablog-gallery"> <a href="%LINK%" class="catablog-image catablog-open-lightbox" %LINK-TARGET% %LINK-REL%> <img src="%IMAGE-THUMBNAIL%" alt="" /> <strong class="catablog-title">%TITLE%</strong> </a> <div class="catablog-description">%DESCRIPTION%</div> </div>Next, go to the CataBlog Options Admin Panel and choose the LightBox tab, in there change the LightBox jQuery Selector to be
.catablog-image.catablog-open-lightbox.Last, go to the Shortcodes that you want the LightBox to work with and change the template parameter to gallery-lightbox instead of gallery.
Let me know if that works and good luck
Thanks for your advice, but I can’t seem to get it to do what I’d like. I followed your instructions, but it seems as though it is functioning the same as before.
I’m trying to make it so that when I have the gallery template in use, if I click on one of the images in the gallery it takes me to a web page instead of opening LightBox. I love the hover over effect with the title, I’d just like it to open a page instead.
Is this what that code was for?
I am not sure we are understanding each other, You are trying to set wether to open the link or the lightbox. Do you want to set this per catalog item? Meaning one Shortcode containing both types, the link and or the lightbox. Or, are you trying to set which is opened on every catalog item rendered by a Shortcode?
Sorry for the confusion,
In general, for everything I render using the Gallery template, I do not want it to open with Lightbox, but rather link to a webpage instead.
Does this clarify?
Then can you just turn the LightBox off? That will make the gallery icons go to the link value if it is set for each catalog item.
I could turn lightbox off, however I would like it enabled on another part of the page.
This is where the conflict is occurring, I would like it on for the default catablog on the page but off for the gallery template on the same page.
(this reply was supposed to be on the most bottom)
What browser do you reccomend for editing? (on a Mac)?
(The template panel doesnt show me anything.)
Since the update my galleries (using the galery-shortcode with category tags, notthe newgalery feature) my galeriey items are “ripped apart” -> showing up anywhere on the page.
do i fix that in the enplates or by switchng to the galery feature?
thanks
Iris
Hi Iris,
I recommend using the latest versions of Firefox, Safari or Chrome on Mac. There is a list of supported browsers at the official plugin page’s faq.
As far as your problems after upgrading, an example URL would be very helpful. I am unsure how you are using categories inside the CataBlog gallery Shortcode, since it isn’t supported. My guess is you are using the regular CataBlog Shortcode.
Since the gallery feature was added, there are now two different Shortcodes supported by CataBlog. I would recommend if you want to keep using categories that you use the regular CataBlog Shortcode,
[catablog category="cat"]. The gallery Shortcode would look like this,[catablog_gallery id="342"]Hope that helps explain when to use which Shortcode.As far as your display problems, it is definitely a template issue. Did you modify the templates at all? Also what do you mean when you say the template panel doesn’t show me anything? Is it a completely white page? or are the text editors empty? Have you tried disabling other plugins and using the Twenty Ten theme to see if that fixes your problems?
Good luck and let me know if you figure anything out or want me to look at an example URL.
I am using Catablog for a several galleries in a WP site. However the client I am working with wants to use the current gallery view of left vertical scrolling menu and a large image to the right. To the right of the large image are the title and description. http://www.stefaniandco.com/content/rings#
I had it working until the update so I am trying to get it working again.
I am using htmlgoodies Vertical Slideshow. I use catablog to populate the vertical scroller. The first image then populates the Large Main image. I am having a hard time getting any of the other catablog images to then populate the large image of the htmlgoodies Vertical Slideshow. Any ideas would be helpful.
Is it possible to change the Price format? I want for example te following notation: €12.000,95 in stead of €12000.00. And is it possible to add tekst in a price field for example N.A (not available)
No, it is currently not possible. It is on the requested features list, but I cannot give you a time when it may be available. You can try and hack the plugin yourself if you really need it.
Hello,
Is it possible to adjust the lightbox settings so that it only brings up the image rather than the entire catalog contents? (+ text in my case)
Thanks.
Hey Zach,
I am trying to use a shortcode from another plugin in a catablog entry but it does not work properly. I enabled the check box in the options to render shortcodes but it still does not work. Any tips on how to fix this?
Not sure why, I haven’t tested every other plugin, but some do work. Possibly how they implemented the Shortcode?
Hi Zach,
You’ve been hard at work with lots of new features. Great job!
Zach, I’m using the gallery template and I’ve created a custom “buy now” buttons and price attributes in my gallery description. This is seen when someone clicks on a gallery image. However, I’d like to show the “buy now” and price in the full gallery. I tried messing with the %description% and %excerpt% values but I can’t get it to work.
See gallery here: http://www.spectacleshop.ca/sunglasses/
Can you point me in the right direction?
Thanks!
If you are using the Gallery template then anything inside the description div tag is hidden. Move the %BUY-NOW-BUTTON% token outside of that div. This will mean that the button won’t be shown in the LightBox. For both, have two tokens.
Maybe there’s another approach. Is it possible to have the default template show in two columns instead of one long list?
Here’s sample of how the default is rendering our images.
http://www.spectacleshop.ca/brands/etnia/
OH! Never mind I just saw your blog on 2 columns. Thanks!
Hi Zach
Is it possible to use
in another shopping cart? I thought it would just put the value wherever I put it but it doesn’t seem to. I wanted to use my existing romancart shopping cart. Price and title both work with romancart but productcode doesn’t, it just stays as ‘productcode’. Will it only work with paypal?CataBlog only has the ability to use tokens inside its own template system, it will not work in other plugins or sections of WordPress. Sorry.
Hi Zach
I do mean inside the catablog template. I have the same sort of form for my shopping cart button as the form for the paypal button. I put it in the store template and filled in the tokens. It all works really well except the productcode token.
Hi Zach,
Thank you very much for a great plugin
Is there a way to specify custom templates for individual category pages, i.e each category dogs, cats etc has its own template?
I assume you are talking about the public “taxonomy” pages, but I am unsure. If so, it is possible by modifying the appropriate theme file, but it is not trivial. Look into calling catablog natively in PHP and passing variables into it. Good luck
Hi Zach.
Is it possible to have each gallery image link to that library item’s page, rather than simply to the image URL?