Making Custom Templates

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:

  • Default This template is used when you do not specify a template parameter in your ShortCodes.
  • Single This template is used when you enable the 'Public' option and view a Single CataBlog page.
  • Archive This template is used when you enable the 'Public' option and view a CataBlog Category page.
  • Store This 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.

339 Responses to Making Custom Templates

  1. Pingback: Modifying Templates - CataBlog WordPress Plugin

  2. Greg says:

    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.

  3. Greg says:

    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?

  4. rinab says:

    can i create my own product attributes? width, height, etc.

    • Zach says:

      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.

      • Paulg says:

        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.

      • Peter says:

        I would like to see field added to display and additional price with a stike through. I have no idea how to do a hack. Any help would be greatly appreciated.

      • Gus says:

        I’d like to be able to add a second price as well – I guess I’ll try hacking a bit, but I worry about updates. I’m not a programmer either… but if you had any examples to share of how to proceed, I’d be most appreciative.

        Also – it would be very nice if creating a new catalogue item didn’t start with a manditory image. I’m using Catablog for a service menu as well as a product catalogue and most of the service items are title and description/price only :-) It’s fine for me, but my end clients will need some splainin’ :-)

        Thanks for a great plug-in though. It’s sweet!

  5. krigton says:

    is it possible to use php tag in the template?
    thanks

    • Zach says:

      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) ?>

      • krigton says:

        I mean in the catalog template not the wordpress template

        • krigton says:

          I’m thinking of doing conditional display using data like order date, or category info or price…

        • Zach says:

          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-price suffice?

          • tonic4 says:

            I have, the same question as krigton,
            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 :-( not good for updates …

          • Zach says:

            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…

          • tonic4 says:


            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 :-(

          • tonic4 says:

            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 ?

      • Buddy says:

        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

        • Zach says:

          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.

          • Buddy says:

            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.

          • Buddy says:

            Hate to be a bother but is there a way to get a wrapping div put around the items?

          • Zach says:

            Just wrap your Shortcode with a div, or whatever you want in the page/post html editor.

          • Buddy says:

            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.

          • Buddy says:

            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?

          • Zach says:

            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.

          • Buddy says:

            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?

          • Buddy says:

            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%

  6. Betsy says:

    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.

  7. krigton says:

    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.

    • Zach says:

      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…..

  8. Vladan Mitevski says:

    OMG, Here we go again. When I put this code <?php catablog_show_items('services') ?>

    • Zach says:

      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:

      [catablog category="services" template="my-template"]

      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.htm in side views folder which resides in your WordPress installation at this location:

      wp-content/plugins/catablog/templates/views/

      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/

  9. Vladan Mitevski says:

    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?

  10. dharma says:

    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?

    • Zach says:

      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 :)

  11. dharma says:

    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.

  12. dharma says:

    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%

    • Zach says:

      Could you please repost that with the ‘<’ and ‘>’ characters escaped. I usually do this in a text editor by finding and replacing.

      ‘<’ replace with &lt;
      ‘>’ replace with &gt;

      Thanks

  13. dharma says:

    yes, i can send it. this should look fine;

    <div class='catablog-row'>
      <div style="display:block;">%SUB-IMAGES%</div>
      <div style="float:left; padding-right:8px; font-size:11px">%TITLE-LINK%</div>
      <div style="float:left; font-size:9px;color:#aaa;">%DESCRIPTION%</div>
      <div id="clear"></div>
    </div>
    

    after i made the change in the class file i edited the theme like this. than everything is fine now.

    thanks for your help

  14. nickm says:

    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

  15. Pingback: CataBlog Now Has Admin Pagination - CataBlog WordPress Plugin

  16. Laurence says:

    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

    • Zach says:

      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.

      • Kristina says:

        I have this same issue and have spent some time trying to figure out how to show sub images in lightbox but not in the grid thumbnail gallery. Can you be more specific as to how I might achieve this? I have read through your recommended information and am still drawing blanks.. am I modifying the template in wordpress. I apologize if you have answered this question more then once.

        Thank you,

        Kristina

  17. 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.

    • Zach says:

      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.

  18. holger says:

    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?

    • holger says:

      and:
      how to change the width of the hover-block under the preview image

      • Zach says:

        I will add another example for you anyways with what you want….

        <div class="catablog-row catablog-gallery">
          %MAIN-IMAGE%
          <strong class="catablog-title">%TITLE-LINK%</strong>
          <div class="catablog-description">%DESCRIPTION%</div>
        </div>
        

      • Zach says:

        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.

      • Zach says:

        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/

    • Zach says:

      Edit your template code and use the %MAIN-IMAGE% token for your thumbnail and the %TITLE-LINK% token for your title. Example:

      <div class="catablog-row catablog-gallery">
        %MAIN-IMAGE%
        <h4 class="catablog-title">%TITLE-LINK</h4>
        <div class="catablog-description">%DESCRIPTION%</div>
      </div>
      

      You will be responsible for overriding any CSS properties in your theme’s stylesheet to make the catalog display exactly how you want.

      • holger says:

        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?

        • Zach says:

          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;
          }
          

  19. holger says:

    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?

    • Zach says:

      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;
      }
      

      • holger says:

        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.

        • Zach says:

          Please make sure the “Keep Aspect Ratio” options is checked in the CataBlog Options thumbnail tab.

          • holger says:

            hello,
            i checked it. But it reduces my picture to a quarter size, just showing the lower left corner

          • Zach says:

            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

          • Zach says:

            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.

    • Zach says:

      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.

  20. Chris says:

    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.

    • Zach says:

      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.

  21. Gerald says:

    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

    • Zach says:

      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-row css class with that display mode let me know.

  22. Patricia says:

    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!

    • Zach says:

      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.

      <span class="catablog-image">
        <img src="%IMAGE-THUMBNAIL%"  alt="" />
      </span>
      

  23. Nika says:

    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.

    • Buddy says:

      I am having the same problem. Seems like Category slug is not working. The template just outputs %CATEGORY-SLUG%.

      • Buddy says:

        I figured out the problem. It should be %CATEGORY-SLUGS% and not SLUG. Looking at the code, I found that it was SLUGS.

  24. Nika says:

    ooops…”” the line of example code did not show on prev message.

  25. Chris says:

    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!

    • Chris says:

      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:

    • Chris says:

      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:

    • Chris says:

      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’)

  26. dino says:

    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? ^_^

    • Zach says:

      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.

  27. Jimmy says:

    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!!

    • Zach says:

      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.

  28. azulplumbago says:

    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.

  29. Can I just say that this plugin ROCKS! You are brilliant.

  30. 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.

  31. Jessica says:

    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.

    • Jessica says:

      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.

      • Zach says:

        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…

        • Jessica says:

          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)

  32. Jack Aubrey says:

    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

    • Zach says:

      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.

  33. Skoczekt says:

    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:)

  34. chris says:

    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

  35. Jack Aubrey says:

    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

  36. Di says:

    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

  37. Tom Lyga says:

    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

  38. Ramu says:

    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)

    • Zach says:

      The CSS class for each catalog item is .catablog-row, just add a border to this class.

      • Ramu says:

        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

  39. zilant says:

    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!

    • Zach says:

      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 :)

  40. Magnus Bonde says:

    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

    • Zach says:

      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.

  41. zilant says:

    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?

  42. zilant says:

    looks like the coding is not coming out with the php tag?
    catablog_show_items($category= “apple”, $template=”template”)

    Ps sorry for the spams

    • Zach says:

      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:

      &lt;?php catablog_show_items("apple", "template"); ?&gt;
      

  43. Tom Lyga says:

    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

  44. 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

    • Zach says:

      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:

      <a href="%LINK%" class="catablog-image" %LINK-TARGET% %LINK-REL%>
        <img src="%IMAGE-THUMBNAIL%" alt="" />
      </a>
      

      • Jack Aubrey says:

        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

        • Zach says:

          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:

          /wp-content/plugins/catablog/templates/views/

          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 .htm extension 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.

  45. cmccarty says:

    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.

    • Zach says:

      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.

      • Scilla says:

        Zach, As a follow up to your seitusggon that I use a different OS, I’ve just tried to change the thumbnail options on Windows 7 using IE 9 (it’s all they have unfortunately) and once again the save changes is not reading. Perhaps the CataBlog back-end is simply not reading my edits as changes?I have to also make note that this only occurs for Options -> Thumbnail and nothing else as I’ve tested the others and am able to save changes without any errors reported.This is certainly a very weird bug that is only visible in one section of the options tab.

        • Zach says:

          Most likely you have an incompatibility with a plugin or theme. Have you tried disabling all other plugins and using a default WordPress theme like twenty-eleven?

  46. Redwall says:

    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

  47. Di says:

    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!

    • Di says:

      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.

  48. Helene says:

    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

  49. 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

    • Zach says:

      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.

  50. Gabriel says:

    Thanks Zach, will try with Gallery template then.

  51. Bondjack says:

    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.

    • Zach says:

      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.

  52. Valentine says:

    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!

  53. Gmix says:

    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

    • Zach says:

      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.

  54. Gmix says:

    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,

  55. Machi says:

    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.

  56. 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

    • Zach says:

      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.

  57. Mike says:

    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!

  58. Cody says:

    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!

    • Zach says:

      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?

    • Zach says:

      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.

      • Cody says:

        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%

        • Zach says:

          Cody,

          You must escape your HTML characters before posting them to comments. Please use a text editor to replace this characters.

          > replace with &gt;
          < replace with &lt;
          

          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

          • Cody says:

            Thanks, sorry to bother you with the duplicate posts!

            Hopefully this one works:

            <div class=”catablog-row catablog-gallery”>%TITLE-LINK%
            <a href=”%LINK%” class=”catablog-image” %LINK-TARGET% %LINK-REL%>
            <img src=”%IMAGE-THUMBNAIL%” alt=”” />
            </a><br><span class=”bifl-description”>%DESCRIPTION%</span><a href=”%LINK%” %LINK-TARGET% %LINK-REL% class=”check-button”><img src=”http://buyitforlife.co/wp-content/uploads/2012/01/check-it-out.jpg” align=”right”></a>
            </div>

          • Zach says:

            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 :)

  59. Niya says:

    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?

    • Zach says:

      Niya,

      Your option for hiding part of the description would be to use CSS classes on two different div tags.

      Example catalog item description:

      <div class="primary-description">
        <p>some text can be put here</p>
      </div>
      <div class="secondary-description">
        <p>some more text can be put here</p>
        <p>even more text can be put here</p>
      </div>
      

      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 :)

      • Niya says:

        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

        • Zach says:

          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.

          • Niya says:

            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

  60. Hunchback says:

    Hey Zach,
    is there any way to make a primary thumbnail link to a secondary image?
    Thanks a bunch
    - H

    • Zach says:

      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!

  61. Hunchback says:

    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

    • Zach says:

      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.

  62. Mark says:

    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!

    • Zach says:

      Mark, you should modify your template by removing the %MAIN-IMAGE% token and building your own HTML. Something like this:

      <img src="%IMAGE-THUMBNAIL%" alt="%TITLE%" />
      

      • Mark says:

        Thanks Zach, I think we may not be talking about the same thing. In the template, this line:

        <a href="%LINK%" %LINK-TARGET%>%LINK%</a>

        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!

        • Zach says:

          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:

          <a href="" target="_blank"></a>

          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.

          • Mark says:

            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!

          • Zach says:

            Your welcome. Would like to see the site when you get it done.
            Cheers :)

  63. Carl says:

    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

    • Carl says:

      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!

      • Zach says:

        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.

  64. Carl says:

    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!

    • Zach says:

      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.

  65. Jan says:

    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

    • Zach says:

      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.

  66. 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!!!

    • Zach says:

      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.

  67. Sebastian says:

    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!

  68. 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

    • Zach says:

      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

      • Erich says:

        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

        • Zach says:

          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.

          • Erich says:

            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.

          • Zach says:

            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.

          • Erich says:

            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.

  69. lenny says:

    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

  70. lenny says:

    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

    • Zach says:

      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:

      <a href="%PERMALINK%" class="catablog-image" >
        <img src="%IMAGE-THUMBNAIL%" alt="%TITLE%" />
      </a>
      

      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 :)

  71. lenny says:

    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

  72. Jay says:

    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

    • Zach says:

      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 :)

  73. Jacob says:

    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

    • Zach says:

      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.

      • Jacob says:

        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

        • Jacob says:

          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

  74. Edmund says:

    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

    • Zach says:

      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 :)

      • Edmund says:

        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?

        • Zach says:

          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?

          • Edmund says:

            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?

          • Zach says:

            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.

          • Edmund says:

            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)

  75. Iris says:

    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

    • Zach says:

      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.

  76. Matt says:

    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.

  77. Maarten says:

    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)

    • Zach says:

      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.

  78. Edmund says:

    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.

  79. Drew shane says:

    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?

  80. Roy says:

    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!

  81. Denise says:

    Hi Zach

    Is it possible to use

    %PRODUCT-CODE%
    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?

    • Zach says:

      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.

      • Denise says:

        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.

  82. Lieze says:

    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?

    • Zach says:

      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

  83. Daniel King says:

    Hi Zach.

    Is it possible to have each gallery image link to that library item’s page, rather than simply to the image URL?

    • Zach says:

      Yes, please refer to the documentation, in particular you will be interested in modifying or creating your own CataBlog Template and using the %PERMALINK% token inside the template.

  84. Been using this plugin for a while now, it’s SO GREAT! I just updated the plugin and now I am having an issue. Did a search and found some related items, but no solution for my problem. I have the lightbox enabled, so when you click the image the lightbox shows up (what I want to happen). However, if you accidentally click on the title instead of the image, it takes you to a page with just the image displayed. I do not want that to happen, I want the lightbox to display if you click the title and/or the image. Please advise :) Thank you!

  85. Hi there. Love the plugin, but how do I increase the space between the image and the text on http://www.dreadnought-shaving.com/products/ – Do you know the CSS code I need? Or do I edit the template.. I was not really sure where to post this, so I’m sorry if this is the wrong place..

    Any help would be much appreciated, and I might even send you some shaving cream :)

    Thanks

    Nick

  86. Srijna Jha says:

    This a test website I setup to get familiar with CATABLOG. Thank you, good plugin but I have run into a brick wall. I am trying to customize the single page generated per CATABLOG Liabrary item to look like http://www.futonandsleep.com/natura-baby-baby-bedding-all-natural-mattresses/. However I am unable to pull in description, images and sub-images into the php file. I tried var_dump function. I tried the function catablog_show_items – and every single advice that was available on the internet. Nothing works. It took me a long time to get the price on the page too, finally i got it using print_r() function. Please advice.

    Link to current Single page that I am trying to edit: http://www.web4retail.com/responsive/catablog-items/vanilla-bed-twin/

  87. Drew shane says:

    Hey Zach, Would you consider adding a Facbook like button token to catablog?

    %FACEBOOK-LIKE%

    i am having quite a difficult time trying to figure this out on my own withoutnthis built in feature.

    thanks, and thanks for a great plugin!

    • Zach says:

      If you are using the HTML5 / FBML implementation of Facebook API then there should be no problem just adapting your CataBlog template to add the Facebook like icon. Something like this:

      <div class="fb-like" href="%PERMALINK%" data-send="true" data-width="450" data-show-faces="true"></div>
      

  88. Hi,
    I am using WordPress and Catablog for the first time – I am trying to achieve a product catalog with an image and description in a grid view (3 across) in the main area. Is there a way to do this using Catalog?

    Also where do I input the code and do I have to do it every page for the different categories?

    Any help will be appreciated greatly?

    Many Thanks
    Kaushal

  89. Mikolaj says:

    Is there a way to put a divider (e.g. horizontal line) between records?
    I tried to put in the gallery template but it doesn’t seem to do the job…

    • Zach says:

      if you want a divider between the rows of the gallery template you will need to use some CSS trickery. Try looking into border-bottom and overflow hidden. I have some tutorials describing the different css classes built into the default CataBlog templates.

  90. M Aronoff says:

    When I use %DESCRIPTION% in a template it is being rendered with

    <p>description text</p><br>

    I have the following set as an element in my gallery template:

    title="%DESCRIPTION%<a href='mailto:someemail@address.com?subject=I am interested in %PRODUCT-CODE%&body=type your message here'>Email Us about this item.</a>"

    My purpose is to have the description for my light box with a link so a visitor can email about the item. It all works but there is the so there is a line break I do not want in there. Any idea what I can do?

  91. Dave says:

    Hi, How do i get this set up as a grid view on the page? I can only get it in a column…

  92. Amir says:

    Hi,

    I wonder how many share my idea of displaying the thumbnails of sub images not under the main thumbnail image in the template but in the light box of the main image.

    So when you click the main thumbnail image the light box opens displaying the main image and on the left a column of thumbnails of sub images stacked on top of each other. Clicking on a sub image thumbnail would show it in the same light box.

    Not sure if it is too much work or if it appeals to others. Thanks Zach for the great plugin.

    Amir

  93. naro says:

    hi, zach. thank’s for great plugin.
    i tried to put shortcode from other plugin amr shortcode any widget in single templates. sadly it doesn’t render the plugin. Instead, it only display the shortcode.

    could you help to fix this? maybe in php (e.g: single-catablog-items.php).

    • Zach says:

      CataBlog only renders shortcodes when the option is enabled and only in the catablog item’s description. If you want to render shortcodes in a php file, google “wordpress render shortcode filters”. good luck :)

  94. Edmund says:

    Hi Zach,

    Firstly thanks again for your hard work on this fantastic plugin,

    Second, is it possible so that the Lightbox only renders the enlarged image when clicked on? No description text.

    Thanks!

  95. Thomas says:

    Forgive me I’m a newbie at this stuff. I have couple of questions that might be easier to tackle via e-mail.

    How would I fetch/use a specific gallery/category with descriptions and titles? And have the results in a vertical line with breaks for a list of websites with descriptions.

    Image (screenshot of a site), Description of site.
    Image (screenshot of a site), Description of site.
    Image (screenshot of a site), Description of site..

    Is it safe to try to validate the catablog markup?

  96. Thomas says:

    Oh..And for only one specific page, not affect other pages/galleries on the site.

  97. Stuart says:

    Hi,

    Firstly, thanks for the great plugin, it has saved me a big headache.

    I’m looking to implement a shortcode or php code into either the template (preferable), or the Catablog item, but I can’s seem to get it to work.
    In the item and in the template I have tried

    <?php "code here" /?>

    <?php echo do_shortcode("[shortcode]"); ?>

    also tried with
    &lt; and &gt;

    The best I can do is get the code to display. If there any way to make this work? Ideally I would like also use %TITLE% into the php.

    I am using in conjunction with “Quote Cart”.

    Thanks!

  98. Stuart says:

    Figured it, kinda (specifically for Quote Cart and a bit fiddly).

    Once you have run the shortcode once, it drops the item description into the DB in a table called wp_add_fav_quote, with columns ID, title and URL, also once the shortcode has been (rendered?) the actual html link is ?fav-quote=1 where 1 is the ID in the table.

    Cool thing now is that I can insert all the catablog items into the wp_add_fav_quote table using the %ORDER% value (export all items to CSV), then reference the item by adding:

    <a href=?favquote=%ORDER%>Add to Quote</a>

    Just remember to add new catablog items into the wp_add_fav_quote table.

  99. Neo says:

    Hi Zach, thank you so much for this plug-in! it suits my situation perfectly.
    I have a little problem and maybe someone asked this already, I don’t know much about the codes, but if I want to display a title on the thumbnails or above the thumbnails instead of having captions (only showing when the mouse hoover over it), what do I do?

    Again, thank you :)

    Regards,

  100. Maarten says:

    Hello,

    is it possible to use 2 different styles or templates for the single-catablog-items.php. I need for a other category also an another single template, for the archive i know how but i can’t find a way for the single page.

    I hope there is a solution?

    link http://heideman-media.nl/tolkamp/showroomkeukens/voorbeeld-1-e-6500-inkl-btw/ this link needs an another style as this link
    http://heideman-media.nl/tolkamp/showroomkeukens/eggersmann-toronto/

    Greets maarten

    • Zach says:

      There is a solution. You need to tell CataBlog in which context you want to use which template. I imagine you want to use categories to determine which template to render. Just use the standard WordPress template tags or plain ol’ PHP to conditionally modify what your single.php file renders depending on if the single item is in a category. Don’t forget it’s a custom taxonomy. Make sure to read the docs and tutorials.

  101. Dirk says:

    Hi,
    is there any way to insert shortcodes or php code to the template? I want to show a contact form for every item detail page.

    Thanks in advance.

    • Zach says:

      Not really, that would create a possible security risk. If you have the public option enabled why not try and modify the single-catablog-items.php file, you can call plugin shortcodes with some simple php. Let me know if you need an example snippet.

      • Dirk says:

        Thanks Zach. A example snippet would be great.

        • Dirk says:

          I can’t find a “single-catablog-items.php”? What do you mean with “public option enabled”?

          • Zach says:

            In the CataBlog options there is a public tab which allows CataBlog to make an individual page for each catalog entry. This may or may not be what you meant when you said every item detail page. What exactly did you mean when you said that? If you have never turned on the public option and have no idea what it is…then I suggest reading Displaying Your Catalog In Posts.

            Here is an example snippet of PHP code that will render any Shortcode that is available in your installation of WordPress…make sure to change the Shortcode to what you actually want…

            <?php echo do_shortcode('[myshortcode param1=foo param2=bar)]'); ?>

  102. Eric says:

    Hello Zach,
    I chose your plugin because I can call images by category automatically without setting up a page for each category.

    I duplicated the wordpress category page to taxonomy-catablog-terms.php and tried to adjust it to my wishes – and didn’t achieve… / The same in single-catabolg-items.php

    My Problem:
    What php code do I have to use to call the thumbnail, the original image, the description or the link?

    At the moment I use the original wordpress code the_title and the_excerpt which does not let me control the output.

    Thank you for your answer
    Eric

    • Zach says:

      You can use the the_title(), the_content(), the_permalink(), etc in your php code and it should ‘work’, but if you want more granular control there are two ways about it. The easiest is to modify the single template in the CataBlog Template editor. That template is what is used to render the_content(). The other way is to load the WordPress meta data saved for CataBlog, which will give you a keyed array of values for thumbnail url, link, product code, etc…

      Good luck!

  103. Eric says:

    Please delete my previous comment. I understood now how I can control the output.
    Thanks for you helpful plugin.
    Eric

  104. Ayman says:

    Hi Zach.

    I’m going to use this great plugin so thank you for it… I need to use this plugin to make a catalog for a clothing shop and I want to add to each item the colors that is available for it and put it in the out put under the description as a color samples.

    So, I was wondering about how to add a custom field or meta box like the one of (price or order) something like color with a multiple colors selection. and than calling it in the template editor.

    Any Idea or suggestion would be so appreciated.

    Thanks

  105. Colin says:

    Hi Zach – great plugin for ‘quick and dirty’ stores – had one up and running for a charity in an hour!
    So, my problem…
    A lot of the items are limited quantity and I’m trying to gracefully implement an easy ‘sold out’ feature.
    One option was just to remove the price – this removes the ‘buy now’ button OK but displays the price as £0.00 – not ideal.
    Another option tried was to replace the main image with another including a sold out banner but some people will click on the buy now button anyway. And PayPal refunds cost money.
    I know I can’t use PHP to conditionally remove things in a template and CSS can’t ‘see’ if a price field is empty.
    Perhaps a ‘sold out’ field that when checked keeps the price but removes the ‘buy now’ button? That’s a hack of core that I’ll lose on next update though. Is it worthwhile and quick for you to implement?
    Can you think of any way to do it with CSS, or any other method I haven’t thought of?
    If I get this licked, then I’ll be singing Catablog’s praises from the rooftops!

  106. Dirty Bird says:

    How would one go about using a template (which I have set up successfully) and inserting the content dynamically? My “category.php” template is set up to show all products of a certain category. How do I get the category inserted dynamically?

    I have the following

    <?php echo do_shortcode('[catablog category="Foo"]'); ?>
    but that obviously loads the content with a category of “FOO”. Therefore it won’t work as a template for other category pages… how do I insert it dynamically … any ideas/help is much appreciated, as this is somewhat of a mind fuck.

  107. Manuel says:

    Hi Colin one quick way to resolve this for you would be to include it in your PayPal settings. There is an option in PayPal that allows you to display the amount left of a particular product. Since you are using PayPal and it is very secure then this method should help you for now until a better solution is found.

    Here is the link
    https://cms.paypal.com/au/cgi-bin/?cmd=_render-content&content_ID=developer/e_howto_html_paypal_shopping_cart

    The draw back is that the image will still be displayed on your page but when the clients clicks on the image it will take them to PayPal and it will let them know if there is any available in stock.

    Kind regards

  108. Laura says:

    Hi Zach
    We are trying to insert text (Click the image for enlargement) under the main images. I read your document about customising templates. I am using the ‘default’ template – what token should I use to do this? Thanks

    • Manuel says:

      Hi Laura, try this in the default template add the text Click the image for enlargement as you see below. I tested this and it worked well.

      <div class='catablog-row %CATEGORY-SLUGS%'>
        <div class="catablog-images-column">
          %MAIN-IMAGE%
          %SUB-IMAGES%
      Click the image for enlargement
        </div>
        <h3 class='catablog-title'>%TITLE-LINK%</h3>
        <div class="catablog-description">
          <p>%DESCRIPTION%</p>
          %BUY-NOW-BUTTON%
        </div>
      </div>

      Kind regards

  109. Renee says:

    I am not super tech-savvy, but I have figured out how to do excerpts. The problem now is that I cannot get the title link to work in order for people to click through to the full description. I inserted %TITLE-LINK% into the default template, but that did not work. Please help!

  110. Eric says:

    Hi Guys,

    I love your plugin. I have 2 questions I am unable to solve myself

    1. I would like to disable the link to the original image
    2. If I use the default template the catalog is not shown nicely on a mobile device. Is it possible to get the text underneath the image instead of next to the image?

    Hope you can help me out here

    Regards,
    eric

    • Zach says:

      Hey Eric, here are my answers to your questions:

      1. You should make your own img tag instead of using the %MAIN-IMAGE% token. something like this should work

      <img src="%IMAGE-THUMBNAIL%" alt="%TITLE%" width="%IMAGE-WIDTH%" height="%IMAGE-HEIGHT%" />

      2. You should modify the CSS properties for .catablog-description to work better with mobile device.

  111. Eric says:

    Hi Zach,

    thanks for the quick reply. My first question is solved!! For my second question, What properties must I add to the .catablog-description to make it look nice on a mobile device?

    Regards,
    Eric

    • Zach says:

      Here is the CSS I would start with:

      html body .catablog-images-column {
          float: none;
          margin: 0 auto;
      }
      html body .catablog-title {
          margin-left: 0 !important;
      }
      html body .catablog-description {
          margin-left: 0 !important;
          text-align: center;
      }
      

      If you haven’t I highly recommend you read Displaying Your Catalog in Posts and make sure to note the different CataBlog CSS classes in the CSS Options section.

      If you have more questions about CSS, there are a ton of resources out there where you can learn, w3schools might be a good place to start. Cheers! :)

  112. Susan says:

    I’d like to have the catablog archive pages use a custom full-width template instead on single page template (which has sidebar). How can I do this?

  113. Susan says:

    I was able to do this with instructions from this page:

    http://wordpress.org/support/topic/custom-post-type-template

    Made a template called “single-catablog-items.php” and added to function file:

    /* Custom Post Type -  choose Catablog Template */
    function cpt_template_include($incFile) {
      global $wp;
      global $wp_query;
      if ($wp->query_vars['post_type'] == 'single-catablog-items') {
        if (have_posts()) {
          $file = TEMPLATEPATH.'/single-catablog-items.php';
          if (file_exists($file)) {
            $incFile = $file;
          } else {
            $wp_query->is_404 = true;
          }
        } else {
          $wp_query->is_404 = true;
        }
      }
      return $incFile;
    }
    add_filter('template_include', 'cpt_template_include');
    /* END Custom Post Type -  choose Catablog Template */
    

  114. Great day! This post could not be written much
    better! Looking over this post reminds me of my previous room mate!
    He always kept chatting regarding this. I will forward this write-up to him.
    Surely he will have a great read. Thanks for sharing!

  115. We’re a group of volunteers and opening up a new scheme in our community. Your web site provided us with valuable information to work on. You have done an impressive job and our whole community will be thankful to you.

  116. milo says:

    hi Zack, im trying to integrate Catablog and Cart66 plugins to work togheter.
    I show my problem directly:
    I’m trying to put Cart66 shortcode into template code;
    I’m trying to do it because i am adding an “add to cart” button on every catablog item page.
    the shortcode that i want to put in is: [add_to_cart item="%PRODUCT-CODE%"]

    i already tried to add it into the description of every single catablog item page and it WORKS GREAT!! but it means that i need to add every items product-code manually…i have more than 300 products in my catablog library and the number is growing up quickly.

    Anyway i tested the add to cart button you provided within the plugin: it works good except for the shipping fee…EXAMPLE: suppose that i edit the store template and add a value to the shipping input field. then suppose i add an item1 from my catablog to the paypal cart. it will add the item1 value and the shipping value. then suppose i add a different item2 to the cart. it will add the item2 value to the cart but also add the shipping value. So now in my cart i will find the item1 value + item2 value + shipping x2!!! but i need that shipping value is added just once!
    this is the reason i’m trying to get Cart66 Work within Catablog

    i also checked on google “wordpress render shortcodes filters” but it didn’t help me…
    i hope you could help me solving this problem.
    Thanks for your work

  117. milo says:

    sorry for the double post. i found that if i add <?php echo do_shortcode('[add_to_cart item=itemcode]'); ?> into the single-catablog-item.php page it will display the button. how can i retrive the product-code in the single-catablog-item.php page?

  118. milo says:

    after two days of trying to retreive the variable value in any kind of possible way T_T i solved the problem in the easiest way that i can imagine. OMG i hope this can be helpfull for someone like me >,.,<…

    put this string in your catablog template (i put it in the template that shows the entire catalog so when i click the link it sends me to the single product page with the variable in the URL)
    by this string i send the variable to single-catablog-item.php page
    <a href="%PERMALINK%?product_code=%PRODUCT-CODE%">%TITLE-LINK%</a>

    then, in the single-catablog-item.php page, i retrieve the variable value by php and i send into the shortcode of Cart66.
    keep attention to the " or ' !!!
    the original code comes with item=" " instead of item=' ' so keep attention to replace it!!

    
    <?php
    $code = trim($_GET['product_code']);
    echo do_shortcode("[add_to_cart item='$code']");
    ?>
    

    Anyway i still need help because $_GET is really unsafe and unsecure method to read variable so if someone has a $_POST way to send variable to the single-catablog-item.php page using a Link is WELCOME!!!!!!!

    • Zach says:

      If you are familiar with JavaScript or a library like jQuery it’s pretty easy to bind an ajax post to a link. It would be quite easy to query the DOM for whatever data you need in the post to cart66.

      Other than that, a link cannot post data, only a full form can. It is possible to build a working form inside your CataBlog template, simple HTML would work best, but then you would either need to use JavaScript again to bind the link click to submit the form. You could also try and stylize a standard submit button to look like a link.

      • milo says:

        ty for reply zach
        yeah, i tried to query the dom with document.getElementById(); without any success, but maybe there was a syntax error, i’m not really familiar with JS or JQuery.

        i also tried to create a Form with some hidden fields inside the template and bind the link click to submit. it was something like that

        <pre><form action="%PERMALINK%" method="post" id="myform"></pre><br />
        <pre><input type="hidden" name="code" value="%PRODUCT-CODE%"></pre>

        then the code for the submit call was something like that:
        document.forms["myform"].submit();

        but this way gives me another syntax error..
        finally i found the solution with get but i hate it so i no tri to solve the problem using your suggestion and try again with JS

  119. Marissa says:

    I simply could not leave your website before suggesting that I
    really loved the standard information an individual supply in your visitors?
    Is going to be back continuously to check up on new posts

  120. Pingback: Troubleshooting CataBlog - Mbrsolution

  121. Hello! This is my first visit to your blog!
    We are a team of volunteers and starting a new project in a community
    in the same niche. Your blog provided us useful information to work on.
    You have done a wonderful job!

  122. Laurence says:

    Τhe post haѕ еstablished helpful to me.
    It’s really helpful and you’re simply obviously very experienced of this type. You get exposed my own eye in order to different views on this subject matter along with intriquing, notable and reliable content.

    my site: Laurence

  123. milo says:

    hi zach,
    i’m here again asking for help.
    i would like to help other peoples like me with programming issue but i don’t have to much experience. i hope this post, if we find a solution, will help me and someone else with the same problems.
    my question is: How can i assign the %PRODUCT-CODE% value of the single product into a php $variable in the single-catablog-items.php page?

  124. Rjay says:

    Can i get the 1st image of catablog as a preview or featured image

  125. Rjay says:

    Can i use the main image token to be my featured image in post???

  126. sonia says:

    Hello everyone,

    Do somebody know if it’s possible to display the link of a post outside the thumbnail (in the gallery), so that people can directly see the title of the post without rolling on the thumbnail. Thank you!

    • Zach says:

      Yes you can, if you are familiar with HTML and CSS it should be a cinch. If not, it’s still not to difficult. I would read the tutorials on this blog, as they explain how to modify the content and style of your catalog. Here is what you will basically want to do:

      1. Make or edit a CataBlog Template for your custom view
      2. Add a catablog.css stylesheet to your theme’s directory on your server
      3. Add custom CSS classes to catablog.css, in particular you would want to override with this selector html body .catablog-row.catablog-gallery .catablog-title.

      In case your really lost, just take this code snippet and save it as catablog.css in your theme’s directory folder on your web server.

      html body .catablog-row.catablog-gallery .catablog-title {
          position: relative;
          display: block;
      }
      

      • sonia says:

        Thank you! It works, but what I really want is to set the title out of the picture (below, not in the black box on the picture but on the white page), is that possible?

  127. Larry James says:

    I need some help to customize my templates. I think I have this working the way I want except My category pages do no link to my single product pages. I do have my options set to “Enable Individual Pages and Category Archives” in >> Options / Public.

    This is the short code I added to my category page:

    [catablog category="Lennox Furnaces" limit="12"]

    And this is my default template:

    <div class='catablog-row %CATEGORY-SLUGS%'>
      <div class="catablog-images-column">
        %MAIN-IMAGE%
        %SUB-IMAGES%
      </div>
      <h3 class='catablog-title'>%TITLE-LINK%</h3>
      %TITLE-LINK%
      <div class="catablog-description">
        <p>%DESCRIPTION%</p>
        %BUY-NOW-BUTTON%
      </div>
    </div>

    I would appreciate any help to get this working, this is the url:

    comfortshoppe dot tk

    thank you.

  128. Cumhur says:

    Hello there,

    first i want to thank you for making such flexible plug-in even for rookies like me. I’ve read almost everything on CataBlog’s support related posts and so far i’ve managed to add “comment” table for every image on the gallery. (I’m using individual pages for every image thing)

    Though there’s only one thing that i couldnt find/resolve that every individual page shows thumbnail, which i want them full images not thumbnails. I’m using %PERMALINK% code in my template to open an individual page for an image but permalink always take “thumbnails” path on the individual page and page shows thumbnail.

    How can i change that path to “original” image on that individual page so that page shows full size image?

  129. Thomas says:

    hello ,

    i want to use the template gallery and i want to have a border and a description when the mouse are hover the thumbnail image.also i want to appear the description to right of the thumbnail image.For now i use this http://www.idesigners.gr/tzourkas/cast-brass-bronze/ .
    can you help me please?

    Thank you very much.

  130. Luca says:

    Hi Zack,

    Is it possible to open the page of a single product with a specified template? I’d like to use a customized template for certain products, but when I open the page of a product it uses always the single template.
    The [catablog] shortcode works only for categories, not for single products (am I wrong?).
    Can you help me?

    Thanks
    Luca

  131. Luca says:

    Hi Zack

    I have another question, sorry!

    Is it possible, when I display the page of a single product, to add the gallery of other products in the catalog?

    For example, my catalog is about ebooks. I’d like to show in the page of an ebook all the ebooks of the same series (identified by the category).

    I know that I can’t use catalog shortcodes. Is it possible another way?

    Thanks,
    Luca

  132. markus says:

    Hey Zack, it’s been a little while. Love all the enhancements you’ve made to Catablog.

    I’m running into a bit of a snag.

    Is there a way to create the template so that the category page shows the picture and the title only but when you click on the item and the lightbox opens up, it shows the picture, title AND the description?

    Right now when I go into the default template and remove the description token, it removes it from the category page but it also removes it from the lightbox as well.

    Any assistance would be great.

    Thanks my friend.

    All the best-
    Markus

  133. Dimitris says:

    Hi there,i like to ask something here.
    I have created 2 galleries and i entered the shortcode [catablog template="gallery"] in each of pages.The result is that both shows all the images in my gallery and not only the 1 that is for selected for them.
    how can i seperate and define what gallery each page will show please?
    thanks

  134. AM says:

    Hi Zac:

    I need your assistance on a website http://www.calicodragonbags.com, that I had built while using your wonderful Catablog plugin for WP. If you go to the site, under the Shop nav you will see the Categories of pocketbooks. They are on each page via shortcode of the gallery number it was assigned.

    Is there a way that I can get the title of each specific product, the price, and an add to cart button (that I will need to connect to the shopping cart the client is using) to show on each page? I read through so many of your previous requests, however, recently I had some medical issues which does not let me remember what I knew before (I had to brain aneurysms) — In other words, I can’t remember how to or what to code and where to make what I want work. Can you please look at the site and tell me what code specifically I need and where it needs to go to make Catablog show the info on each page that I want?

    Your prompt reply is very appreciated.

  135. bu11frogg says:

    Hi Zach,

    I’ve seen a few other mentions of this and would like to request a new mechanism to pull text from a definable field in our image file metadata and, if the option is enabled and the text exists, be displayed right below the image (whether main image or sub image…not thumbnails). CSS defined formatting, of course. :-)

    I realize I could use one of the existing tokens to accomplish this, such as %PRODUCT-CODE%, but unfortunately I’m already using all but the deprecated tokens so that is not an option at the moment. I’m open to any other suggestions, just give me a link if I missed something else on this in another post.

    Cheers,

    -bu11frogg

  136. Coco Ricul says:

    Hello,
    I cannot figure out how to make it so when looking in a catalog the Products “Title” is Below the Products “Image”.
    Help would be greatly appreciated.
    Cheers,
    CC

  137. RB says:

    Cool plugin, but how can I tweak the widget image size without affecting the sizes of the images in the post/page?

  138. Rae says:

    Hello,
    I’m trying to make a custom template, and I made it so the images all show as thumbnails with an excerpt below them with the title and the price of each item.

    I cannot for the life of me figure out how to add additional space between the images both horizontally and vertically so that the whole excerpt can actually show up. I have tried placing the ” ” code everywhere throughout the template but it will not change what I need to change.

    It’s just based off of your original template:


    %TITLE%
    %EXCERPT%

    Any ideas?

    • Rae says:

      Oh sorry, the code is this:

      <div class="catablog-row catablog-gallery">
        <a href="%LINK%" class="catablog-image" %LINK-TARGET% %LINK-REL%><img src="%IMAGE-THUMBNAIL%" alt="" />
      <strong class="catablog-title">%TITLE%</strong>
      <div class="excerpt">%EXCERPT%</div>
        </a>
      </div>
      

  139. Eugene says:

    Hello!
    Is it possible to limit numbers of sub-images displayed at page? Because some items have more than 4 images, and all table not look straight – in some lines I can see only one item instead of 2.
    Thank you fo answer!

  140. Donna says:

    Does anyone have an example of a gallery template were the thumbnail is one image but the lightbox is another image. The phoblem I have is that the image looks great in the lightbox but is cut off in the thumbnail. Thanks in advance.

  141. Isabelle de Lalene says:

    Hi Zach,
    is there a way of removing the date for each catablog item ? Or at least not have it appear ?
    thx for your advice

    • Zach says:

      Are you asking about the Admin side or the catalog rendering in your the user facing pages? If it is the Admin interface you are concerned about, there is no way to remove the date. If it is the catalog rendering in your user facing pages, please make sure the template you are using (default?) does not include the %DATE% or %TIME% tokens.

  142. Hasan says:

    Hi Zach,
    I have been using your plugin since a year or so, and am facing problems.
    1. There is no option to change the details page.. if you click read more, it simply takes the default template with sidebars and displays the description in an untidy manner, the plugin should have an option to select a template for displaying descriptions etc.
    2. If more buttons are added to the visual editor ( Tiny MCE ), the interface of catablog editor breaks.
    3. Custom templates do not accept scripts and certain shortcodes though some shortcodes are working.
    4. Options should be added to export catablog library items in PDF, or word format.
    5. Integration should be done to import and export data from and to other Portfolio or related plugins.
    6. There is hardly any update since long.
    7. Still waiting for PayPal tutorial :).
    8. There are many more problems i have been facing … and waiting for the updates.

    Its a very nice and useful plugin but more work is required to make it work better.

    Best Regards!
    Hasan.

    • Zach says:

      Hi Hasan,

      Thanks for interest in CataBlog and laying out your problems for me, some of them I may be able to offer workarounds, others I won’t. So, in an ordered list much like yours, here are my replies:

      1. Actually you may make a single.php template file specifically for CataBlog items, please see the Theme Integration section of the documentation.
      2. Good to know, I’m aware the WP3.9 has a new implementation of TinyMCE and I will be looking into using it in CataBlog since it is vastly improved.
      3. Custom templates will never except PHP code for security reasons, it would add a very easily exploited back door to your website for hackers.
      4. A feature to export to proprietary formats such as Micro$oft Word will most likely never happen. As for exporting to PDF, its rather trivial to print a webpage to PDF, why not just setup a page on your website to render like the PDF you want?
      5. The CSV and XML import/export features have sufficed for everyone else up until now, custom fields and ajax enabled pagination are higher priority items than import/export from proprietary plugins and formats.
      6. That is because while I enjoy making and giving CataBlog away for free to the community, I also have to eat and put a roof over my head. Please refer to any of the many article right now that explain the cost of living in San Francisco.
      7. I apologize for that, if you search through the blog you may find some discussions in the comment threads that will help you. Otherwise, I’ll try and add that tutorial since I know there is renewed interest in having it.
      8. I’m sorry that you have been facing so many problems, so far CataBlog has worked fine for me (except a few UI glitches) as WordPress continues to get updated. I also ask you to remember that CataBlog is free and that a WordPress website is dependent on many different technologies, including your server’s operating system, apache/mysql/php/php-gd versions, other installed plugins, your theme, the web browser used and even other things. Unless your aware of and can explain how and why all these various parts are designed and meant to work flawlessly with WordPress, it’s very unlikely I will be able to fix your problems with CataBlog. I say this because I run my own servers, with specific versions of software and I have never has a problem running CataBlog that wasn’t addressed in the last 3 years. If you want to report a specific bug you are finding, please do so at the Official CataBlog WordPress Support Forum.

  143. Chris says:

    Hello Zach

    Is it possible to place an ‘order number’ column to the left of the image in the gallery template? In admin there’s an order number for each product and I would like to show this number next to each Catablog entry. Hopefully the number will change automatically if a product is dragged into a different order. Any help much appreciated

    Thank you

    Chris

    • Zach says:

      Hey Chris, sorry for the delayed response. The order number is a value that is set on the catalog item, just like title or description, meaning it will not auto update itself. It is a “legacy value” that was used for custom ordering before the gallery feature existed.

      Adding an %INDEX% token to the template would probably be the best way to enable what you want, but unfortunately I’m way too busy at work these days to add this token. It would be rather easy, so maybe I can find some time soon. Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *

Please wrap any HTML markup or code with the pre-formatted tag: <pre> </pre>

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>