Modifying Templates

One of the best features that CataBlog offers is the ability to control exactly how your catalog HTML is rendered on your blog pages. It is also one of the more mysterious features for beginners, since it isn't incredibly well documented and you need to have a good understanding of what html is and how to use it. This post came about from offering support and realizing that the current default template does not work with both the LightBox and a title link. The code below may be used instead of the default, it makes sure that the LightBox link is always created properly for each thumbnail, even if the catalog item's link value goes to a non-image file.

You may also read more about CataBlog templates and the token system at Making Custom Templates.

<div class='catablog-row'>
  <div class="catablog-images-column">
    <a href="%IMAGE-LIGHTBOX%" class="catablog-image" %LINK-TARGET% %LINK-REL%>
      <img src="%IMAGE-THUMBNAIL%" alt="" />
    </a>
    %SUB-IMAGES%
  </div>
  <h3 class='catablog-title'>%TITLE-LINK%</h3>
  <div class="catablog-description">
    %DESCRIPTION%
    %BUY-NOW-BUTTON%
  </div>
</div>
This entry was posted in Development, Support. Bookmark the permalink.

46 Responses to Modifying Templates

  1. elise says:

    Hi Zach. Have you tested Catablog with WordPress 3.1.2 yet? TIA

    • Zach says:

      Yes, this site is WordPress 3.1.2. I don’t think there are very many changes in the new WordPress version, other then a security patch, so plugins are less likely to be affected.

  2. Summer says:

    Hello Zach, is there a way to change the text color for the photo title within the lightbox?

  3. Lily says:

    I’m having an issue displaying the sub-images. If I have only one sub-image, it doesn’t display it, but instead displays “>. If I have more than one sub-image, it will display “> instead of the first image, but then will display the other images. Also, the main images are opening in a new window/tab, but the sub-images are not.

    This is the code on my template:



    %TITLE%

    %DESCRIPTION%
    %BUY-NOW-BUTTON%

    • Zach says:

      So i want to make sure you are using the %SUB-IMAGES% token for displaying sub images. Also you might try reloading the default template and seeing if that fixes your problem.

      Since I can’t read you template code on my iPhone, maybe it will be different on my computer, I’ll have to try and help you out tomorrow.

      • Lily says:

        The code didn’t show up properly. Let me try again…



        %TITLE%

        %DESCRIPTION%
        %BUY-NOW-BUTTON%

        • Zach says:

          Hi Lily,

          Make sure that you escape all the HTML template code before posting it in a comment. I do this with a text editor and a simple find and replace. Just find and replace these two characters

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

          In case you are trying to use the %MAIN-IMAGE% and %SUB-IMAGES% tokens, they will automatically create the correct anchor tag around the thumbnail for the LightBox. Try sending me the template code one more time please 🙂

  4. Terri says:

    I am trying to post a catalog that looks like the photo gallery on the demo page. Mine looks like the products category and I can’t figure out how to change it. Can I make it like the photo gallery with the plug in….how?

    love the plugin! thank you!

    Terri

  5. Lily says:

    <div class='catablog-row'>
      <div class="catablog-images-column">
        <a href="%IMAGE-LIGHTBOX%" class="catablog-image" %LINK-TARGET% %LINK-REL% target="_blank">
          <img src="%IMAGE-THUMBNAIL%" alt="" />
        </a>
        <a href="%IMAGE-LIGHTBOX%" class="catablog-image" %LINK-TARGET% %LINK-REL% target="_blank">
        <img src="%SUB-IMAGES%"></a>
      </div>
      <h3 class='catablog-title'>%TITLE%</h3>
      <div class="catablog-description">
        %DESCRIPTION%
        %BUY-NOW-BUTTON%
      </div>
    </div>
    

    • Zach says:

      Now I can see the problem loud and clear Lily, The %SUB-IMAGES% token is not meant to be used in an image tag’s source attribute. Instead it should be the only thing on its line of code. This is because the %SUB-IMAGES% token needs to possibly make more then one image tag, if you want to style the sub images, I would recommend wrapping the %SUB-IMAGES% token with a div tag that has a specific class. Also each sub image will automatically be wrapped in the appropriate anchor tag for the LightBox.

      Example:

      <div class='catablog-row'>
        <div class="catablog-images-column">
          <a href="%IMAGE-LIGHTBOX%" class="catablog-image" %LINK-TARGET% %LINK-REL% target="_blank">
            <img src="%IMAGE-THUMBNAIL%" alt="" />
          </a>
          <div class="catablog-items-sub-images">
              %SUB-IMAGES%
          </div>
        </div>
        <h3 class='catablog-title'>%TITLE%</h3>
        <div class="catablog-description">
          %DESCRIPTION%
          %BUY-NOW-BUTTON%
        </div>
      </div>
      

      I hope that has helped, cheers!

  6. Lily says:

    Thanks, that fixed it. But now is there any way of getting the sub-images to open in a new tab or window when someone clicks on them?

    • Zach says:

      Hi Lily,

      Since each sub image does not have its own link value, the only thing you could open in another tab or window would be the same link as the primary image or the full size version of the sub image. Perhaps you want to create more catalog items, each with their own link and use categories to separate out your catalog even more? You may filter by multiple categories allowing you to create some pretty powerful organizational schemas. Good luck and let me know if you have any more questions.

  7. Adelle says:

    Hi Zach,

    I’ve just used the code that you gave to Lily as I couldn’t get the sub-images to show. That’s now sorted out my sub-image problem however now the images don’t open in a lightbox. Do I need to alter the code somehow?

    Thanks,
    Adelle

  8. Dave C says:

    Hi Zach,

    I’ve followed this thread (and other ones) but couldn’t solve my LightBox problem.

    It worked fine till couple of weeks. Since then few things happened:
    1. LightBox was gone
    2. I’m almost positive that the fonts were changed…could it be?

    Today I also updated the Catablog plugin as well to the latest.

    I made sure jQuery selector is set to .catablog-image
    I tried few templates (default) you’ve posted above.

    I’m currently using this:

    %MAIN-IMAGE%
    %SUB-IMAGES%

    %TITLE% [%PRODUCT-CODE%]

    %DESCRIPTION%
    %BUY-NOW-BUTTON%

    Can you assist on this please?

    Thanks,

    Dave

    • Zach says:

      Hi Dave, can you please give me a link to your broken page, thanks.

    • Zach says:

      Also could you please follow the instructions I gave to Lily to repost your template code so I may read it properly. Thanks

      • Dave C says:

        Hi,

        Thanks.
        I’ll try posting the code in here:

        <div class='catablog-row'>
          <div class="catablog-images-column">
            %MAIN-IMAGE%<br>
            %SUB-IMAGES%
          </div>
          <h3 class='catablog-title'>%TITLE% [%PRODUCT-CODE%]</h3>
          <div class="catablog-description">
            %DESCRIPTION%
            %BUY-NOW-BUTTON%
          </div>
        </div>
        

        Result can be seen in here:
        http://www.depeche-mode-forum.com/?page_id=10

        Much appreciated,

        Dave

        • Dave C says:

          BTW I also tried

          <div class='catablog-row'>
            <div class="catablog-images-column">
              <a href="%IMAGE-LIGHTBOX%" class="catablog-image" %LINK-TARGET% %LINK-REL% target="_blank">
                <img src="%IMAGE-THUMBNAIL%" alt="" />
              </a>
              <div class="catablog-items-sub-images">
                  %SUB-IMAGES%
              </div>
            </div>
            <h3 class='catablog-title'>%TITLE%</h3>
            <div class="catablog-description">
              %DESCRIPTION%
              %BUY-NOW-BUTTON%
            </div>
          </div>
          

          with no luck…

        • Zach says:

          Hi Dave,

          You can play with the CataBlog template all you want, but it won’t fix your problem. After looking at your page in a debug console (firebug, chrome developer tools) it is plain to see that all your jQuery functions are failing. This is most likely due to your WordPress theme or other plugins you have enabled.

          Please try disabling all other plugins and switching to the twentyten theme to verify this.

          The thing that sticks out to me the most is that you are loading jQuery twice, this is very bad. You are loading a version from google and you are loading a version from your local server. I would only load the version from your local server, if it was me.

          Let me know if fixing that issue fixes all your JavaScript issues. Also I would highly recommend learning about a tool such as Firebug to test and debug your sites CSS and JavaScript.

          • Dave C says:

            I actually disabled some recently installed plugins and it went back fine. I now need to know which is the interfering one…

            Thanks a lot

            Dave

  9. Dave C says:

    Thanks v much Zach – will take action on that.

  10. mark r. says:

    Zach

    It looks like the main catalog page and category pages might be using different stylesheets. The Category pages seem to look fine and mirror the styles in my WordPress theme, but the page with the entire catalog presents the text in a different font (the main catalog page displays in a serif font similar to Times New Roman, and the category catalog pages display in a sans-serif font similar to Arial). Any ideas if this a a setting I can fix in Catablog or if it is a theme issue?

    • Zach says:

      Mark,

      CataBlog does not set any font-family CSS properties, so your problem most likely lays within your theme’s stylesheet. Perhaps you could use a tool such as Firebug or Chrome’s developer tools to better troubleshoot your CSS issues. Good luck 🙂

  11. Ramu says:

    Is there a way to customize the catalog in such a way that only around 5 items display in one page and the next set of products go to next page?

  12. Jordan says:

    Hello Zach! Awesome Plugin!! I’m working on modifying it for a sweet book store application. Check out the work in progress at: http://koei.websitewelcome.com/~chetross/

    My question is whether I can get the sub-images (thumbnails) to NOT be cropped in height. On the individual item page, I’d like the thumbnails to be a standard width, but to adjust it’s height automatically in proportion. I’ve been looking at catablog.class.php and catablogitem.class.php to try and understand how this works. I’m fairly comfortable at tweaking stuff and was hoping you could steer me in the right direction.

    Thanks!

  13. Jordan says:

    … i guess basically, I need to figure out how to set the canvas-size to ‘auto’ or ‘100%’… not sure how to do this though.. If i knew exactly what size it needed to be, i could change the crop function as needed and supply the same value to the canvas-size.

  14. Jordan says:

    or…. I could bypass the thumbnail creation altogether for the individual listing and display all large images for the sub-images. I’ll just set the width and height with css so that i can have the height expand. Once again not sure how to implement…. push in the right direction?

  15. Carina says:

    Hi there,
    I was wondering what the best way to organize some photos in a certain category would be? i have a category of Before and After pics, so naturally I would like the Before pics to show before the After pics. What do you suggest as the best way to go about this?

    Thank you,

    • Zach says:

      You have a few options:

      1. You could order by title and create two categories, before and after. Then in the page you want to show use two different Shortcodes to show all the before and than all the after.

      2. You could sort your catalog by either the date or order value. Set each individual items date or order to an appropriate value and use the appropriate Shortcode parameters.

  16. John Welsh says:

    Hi,

    I working with plugin for the first time – having trouble with templates. Any changes I make are not being saved. Are there permissions that need to be set for a specific directory so the changes to the templates take?

    John

    • Zach says:

      What version of CataBlog are you using? After you make changes you are sure your clicking save?

      • John Welsh says:

        v1.2.9.9
        I make the change, hit Save Changes – the drop down list points back to single (I’m trying to mod gallery) – I then load gallery template and the change I made is gone…

        • Zach says:

          There is only one system template in CataBlog 1.2.9.9, you are overwriting your changes each time you click save.

          CataBlog 1.3 has functionality like you are looking for. The 1.3 beta may be downloaded at http://downloads.wordpress.org/plugin/catablog.zip and tried.

          If you don’t want to try 1.3 then you may use FTP to create or modify files in the wordpress/wp-content/plugins/catablog/templates/views directory. These file may be referenced in your ShortCode’s template parameter.

          Good luck

  17. Deejay says:

    Can an alt tag be placed on the catablog images??? Trying to improve SEO and I was told this would help a little.

    • Zach says:

      Yes, simply modify your CataBlog template code, in particular replace the %MAIN-IMAGE% token with your own anchor and img tags with whatever HTML attributes you want.

      If each image needs a unique alt tag use the product code field.

  18. Niya says:

    Hello, Zach!

    I have a question about the thumbnails and description appearance. Is there a way the description to be cut on the third row for example and the whole text to be displayed on the same page once you click “more info” button or so.
    Otherwise I have the image cover and the description text takes too much space if it is long.

  19. Zach says:

    Fran, I may have had a example web page from the past, but I’m just going to ask again, can you send me a link to the page exhibiting your problem so I may evaluate what part of the template needs to change. Thanks.

  20. MimiSmiles says:

    I’m trying to do Alt Attributes on my Main Images.

    How do I add them in this code?:

    “%MAIN-IMAGE%”
    %SUB-IMAGES%

    %TITLE-LINK%

    %DESCRIPTION%

  21. Jose Guillen says:

    I have some problems creating my own template. I need my catalog to be shown with specific styles so i did this:

    <div class='catalog'>
      <div class="catalogImg">
        %MAIN-IMAGE%
        %SUB-IMAGES%
      </div>
      <div class="catalogContent">
        <h3>%TITLE-LINK%</h3>
        <div class="catalogDescription">
          %EXCERPT%
        </div>
      </div>
    </div>
    

    Pretty basic, right? the thing is that I cant get the lightbox to show the title and description of the product. Right now the lightbox shows just the image… I dont know what to do in this case, so i came here to see what Zach Almighty says! xD

    • Zach says:

      Add the default catalog classes back alongside your custom classes. like this:

      <div class='catalog catablog-row'>
        <div class="catalogImg">
          %MAIN-IMAGE%
          %SUB-IMAGES%
        </div>
        <div class="catalogContent">
          <h3 class="catablog-title">%TITLE-LINK%</h3>
          <div class="catalogDescription catablog-description">
            %EXCERPT%
          </div>
        </div>
      </div>
      

      You may need to modify your CSS code to accommodate for order of precedence. Make sure your class styles override the default catablog ones.

  22. FiliO says:

    Hi man!
    What must I do if I need in Catablog template-Gallery for e.p. 6-8 or more pictures on row??? :-/ -not only 3-4…
    You can see it on:
    http://www.inkancl.cz

    Thanks very much!
    Thanks for template,
    have a nice day!

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>