Images

Showing product images

It is important to start thinking and planning what image sizes you’ll need for the entire store and blog. Then set up the Thumbnail size, Medium size and Large size in the backend (settings>media). And add the extra size you need in the function file.

Be sure your theme has thumbnails support
In your function must be:

/ / This theme uses thumbnails post
add_theme_support (post-thumbnails');

To add extra image sizes in a theme that support thumbnails you must add it in your function.php

  • Using 3 extra sizes in function.php:

/*Add extra image size to list products in sidebar
add_image_size( 'mini-thumbnail', 45, 45 );// mini thumbnails
/*Add extra image size to list products in main 
add_image_size( 'medium-thumbnail', 85, 85 ); // mini medium 
/*Add extra image size to show in single products 
add_image_size( 'single-product', 260, 9999 ); // single product

With TheCartPress you can work exactly the same way you do with posts by WordPress.

Basically you can add as many images as you need. The images you upload from the editor of a product will remain assigned to that product. You can mark one image as featured image.

To display the images you can choose to insert them into the content individually or in galleries or both ways. You can do so from the publisher of the product as from your templates, with template tags of WordPress.

The best thing for me is to use template tags for featured images and also for the gallery. Since TheCartPress 1.0.8 you can insert the featured image  into content using  ”TheCartPress theme compatibility” (See below). This saves time as there is no need to insert the images and gallery in content when editing the product. Only upload images and make featured image. Indispensable to an end customer/merchant?

I like themes that make the job as much as possible. Working with template tags the general design is more homogeneous and roboust but less flexible.

There is much information about it on the internet.

Showing thumbnail images in your theme

  • In standard WordPress loops:

Product Thumbnail Linking to the Product Permalink

 <?php if ( has_post_thumbnail()) : ?>
   <a href="<?php the_permalink(); ?" title="<?php the_title_attribute(); ?>" >
   <?php the_post_thumbnail(); ?>
   </a>
 <?php endif; ?>

Product Medium Thumbnail Linking to the Product Permalink

 <?php if ( has_post_thumbnail()) : ?>
   <a href="<?php the_permalink(); ?" title="<?php the_title_attribute(); ?>" >
   <?php the_post_thumbnail('medium-thumbnail'); ?>
   </a>
 <?php endif; ?>
  • In configurable TCP loops:

Product Thumbnail Linking to the Product Permalink.

 
<?php if ( $see_image ) : ?>
<div class="entry-post-thumbnail">
<a class="size-thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail($image_size); ?></a>
</div><!-- .entry-post-thumbnail -->
<?php endif; ?>

Showing single product images in your theme

When working with configurable TCP-loops, you can set from the backend (Appearance> Tcp-loops) the settings of the TCP-loop you call from your theme.
At this point you can only have one setting for all the Tcp loops you’re using called directly from your templates.
Through widgets and shortcodes you can have as many configurations as you’re using.

Therefore we recommend for the moment that you use in your single product page a non Tcp configurable loop if your needs are different in, typical case is different image sizes needs for thumbnails and single images of products.

In future versions you can set the TCP loop in combination with WordPress conditional tags (is-home, is_category, is_single, is_author, etc).

You have 3 options 4 options to display the featured image in single product page:

  1. Use TheCartPress theme compatibility. With this method you do not need to insert the image into the content of each product. It automatically displays the featured picture:
    TheCartPress>Settings> Theme compatibility settings: 
    • “See image in content” checked
    • Chosse “Image size in content”, “Image align in content”, “Image align in content”
  2. Insert the image(s) into the content of each product. (button images > upload > insert in post)
  3. Create a template tag directly in your template, With this method you do not need to insert the image into the content of each product. It automatically displays the featured picture.
    4. <?php if ( has_post_thumbnail()) : ?>
   <?php the_post_thumbnail('single-product'); ?>
<?php endif; ?>
  4. Create a gallery in product content or using template tag for gallery in your theme.
    Shortcode Gallery in content editor or template tag in template file

    / / Template tag in template file
echo do_shortcode('gallery-shortcode');

The products images you see in demo, are displayed with template tag in TCP Loop. Use TCP Loops