Apr 072014
 

Last Updated: September 04, 2015

CataBlog Different Size Thumbnail Images tutorial will show you how to add different sized to your thumbnails.

Latest News: I have added another link to the menu below.

I created this tutorial using a childtheme which makes it super easy to modify the css code without affecting the parent theme. You might not have a child theme, then you will have to use your parent theme style.css or a plugin to add your css.

In this tutorial I will show you how to add three different thumbnail sizes to your catalogs. Of course you can add as many sizes as you want. Please keep in mind that each size requires a template, css class code and a category created. Also try to keep the original thumbnail size larger than the added extras sizes shown in this tutorial.

CataBlog Advanced Tutorials

  1. Lightbox Title Permanently Displayed Tutorial
  2. Add Quantity Product Website
  3. Add Video To Product Description Tutorial
  4. Integrate Catablog Into Your Theme
  5. Custom Display CataBlog Items In Suffusion Theme
  6. Different Size Thumbnail Images
  7. Shopping Cart Template
  8. Responsive Settings
  9. Move Meta Text To Right Side LightBox
  10. Troubleshooting

CataBlog Different Size Thumbnail Images Steps

Step 1 ) Upload your images into CataBlog.

Step 2 ) Create 3 different templates. Each template will have different class added to it. In this tutorial we are working with small, medium and large size thumbnail images. See image below.

CataBlog Class Added

  • small-catalog-thumbnail
  • medium-catalog-thumbnail
  • large-catalog-thumbnail

Remember: Each template will have a different class added.

catablog-different-size-thumbnail-templates

Step 3 ) The following image shows you the different css code created for the different size images. Remember to always save your changes. In this case I click on Update File because I am using a child theme and adding the code using wordpress theme editor.

Important: I strongly suggest to use a child theme. If you don’t want to use a child theme then I recommend the following plugin WordPress Custom CSS Plugin

catablog-different-size-thumbnail-css-code-child-theme

Step 4 ) Create three different categories and add a different category to each image. In this tutorial I added three images, each image represents a different size. See image below.

catablog-different-size-thumbnail-categories

Step 5 ) Add the shortcode to your post or page. See image below.

Important: Remember to add the correct template and category for your images.

catablog-different-size-thumbnail-shortcode

Step 6 ) You can see from the image below the final result. Three different thumbnail size images.

catablog-different-size-thumbnail-final

That is all you need to do to have different size thumbnails on your website.

Click on the following URL Shopping Cart Template to continue.

I will be updating this tutorial from time to time so keep coming back for the latest updates.

If you have any questions please let me know.

Enjoy

For more CataBlog tutorials check the following Link

Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a Reply

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=""> <s> <strike> <strong>

(required)

(required)