Creating a Custom Template without Thumbnail Size

  • So I have tried many tokens to get this right while setting up a Custom Template for this specific page (https://westernheritageweatherford.net/wordpress/furniture/), but it just doesn’t seem to want to “take” (no luck). I DON’T want to use a thumbnail size for this page and that is why I created a Custom Template (specifically for this page). No matter how much I try using different tokens, the only image size it will give me is the thumbnail size.

    I would like to set up a custom re-size if possible (350px x 350px), but if not possible, I’ll settle for the Lightbox size (that is set under options). Here’s the code I am currently using:

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

    https://www.ads-software.com/extend/plugins/catablog/

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi, I know what you are trying to achieve unfortunately as far as I know it is beyond the function of this plugin to set up individual image sizes through the plugins options.

    You can the default size through the lightbox options.

    If you need more help please let us know.

    Kind regards

    Plugin Author macguru2000

    (@macguru2000)

    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!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Creating a Custom Template without Thumbnail Size’ is closed to new replies.