macguru2000

Yes, and that’s wonderful, I feel like a lot of the experience you gained setting up CataBlog will transfer to other plugins and WordPress in general.

Hi simplytangerine, you should basically put this inside the content of a page or post on your blog, if you are confused by that please take some time to learn more about WordPress and using Shortcodes in WordPress.

Here is an example of the code you need, please notice that the category names here are just examples, and you should use your own categories.

Dogs:
[catablog template="gallery" category="dogs"]

Cats:
[catablog template="gallery" category="cats"]

Birds:
[catablog template="gallery" category="birds"]

You may want to manually type this into your post or page, sometimes copy and paste brings along formatting and stops Shortcodes from working.

Also, please make sure you have all your catalog items in the CataBlog Library categorized correctly.

So you should paste this into either your theme’s style.css file or create a catablog.css file inside your theme’s directory and paste this code in there. You should never edit the plugins css files, as your changes will be overwritten when you update. The same can apply to your theme’s style.css file, depending on wether you or someone else is the theme author.

Keep in mind that it is important that you not translate or change the css class names, as those should always be in english. I also want to apologize for not reading your original code closely enough, you should never define the same class twice in CSS, it just doesn’t work that way.

Two Columns:

html body .catablog-catalog .catablog-row {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0;
  border: 0 none;
}

For three columns, try this code instead of the above one

html body .catablog-catalog .catablog-row {
  float: left;
  width: 33%;
  margin: 0;
  padding: 0;
  border: 0 none;
}

Good luck

I would like to mention that there are numerous errors in your CSS code from your original question. If you want to do a 3 column layout you should use css code like this…please pay specific attention to all the syntactical formatting:

I do not know what .catablog-fila is, is that a custom css class you added in your catablog template?

/* Catalogo */
html body .catablog-catalog .catablog-fila {
float: left;
width: 50%;
margin: 0;
padding: 0;
}
html body .catablog-catalog .catablog-fila {
width: 50%;
margin: 0 0 0 50%;
padding: 0;
}

You can always set the default image size to your largest image size and use CSS to reduce/resize the images. Use the %CATEGORY-SLUGS% token to set css classes based on your catalog item’s categories and then make catablog categories for each image size. Next make the CSS classes for each size. Something like this:

CataBlog Template:

<div class="catablog-row catablog-gallery %CATEGORY-SLUGS%">
	<a href="%LINK%" class="catablog-image">
		<img src="%IMAGE%" alt="" />
		<strong class="catablog-title">%TITLE%
	</a>
	<div class="catablog-description">%DESCRIPTION%</div>
</div>

then make some catablog categories like these and place your catalog items in them:

'small-catalog-thumbnail'
'medium-catalog-thumbnail'
'large-catalog-thumbnail'

then make some css classes like this:

.catablog-row.small-catalog-thumbnail .catablog-image img {
  width: 50px;
  height: 50px;
}
.catablog-row.medium-catalog-thumbnail .catablog-image img {
  width: 100px;
  height: 100px;
}
.catablog-row.large-catalog-thumbnail .catablog-image img {
  width: 200px;
  height: 200px;
}

Of course you will have to probably make other css classes for the other elements to work with the different image sizes. You also will want to set your thumbnail size to the largest image size to avoid any pixelation.

Good Luck!

I think you found the elusive “French bug” that other people have reported. Awesome! Thanks so much for looking into that, now all I need is some free time to fix it…

Please try disabling other plugins and using a standard theme such as TwentyTen, TwentyEleven or TwentyTwelve to see if you are having a javascript conflict.