Adding thumbnail images to the admin product catalog

I'm trying to add images in the admin catalog so I can identify products faster when adding or editing.

I've attempted to use Admin Display Product/Catalog Thumbnails https://www.zen-cart.com/downloads.php?do=file&id=1346 for ZC v1.5.6 with little success. I can get the "Image" name to appear in the heading, and images in the column below which all show "NO PICTURE AVAILABLE" (see image).

The part of code that apparently places the image on the page is in admin/category_product_listing.php

<?php // bof Twitch TAP Thumb - this is the category level ?>
    <td class="text-center hidden-md hidden-sm hidden-xs">
    <?php echo ($categories->fields['categories_image'] != '' ? '<br />'. zen_image(DIR_WS_CATALOG_IMAGES . $categories->fields['categories_image'], HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT) . '</a>&nbsp' : '<br />'. zen_image(DIR_WS_CATALOG_IMAGES . PRODUCTS_IMAGE_NO_IMAGE, HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT) . '</a>&nbsp' ); ?>
    </td>
<?php // eof Twitch TAP Thumb ?>

The differences between the 156 and 157 versions of category_product_listing.php appear substantial, so the plugin installation instructions were unhelpful for this version. Comparing the files in WinMerge was somewhat confusing too, leaving me unsure of where the changes should even be placed. I honestly don't need much of what the plugin offers (like attribute images), I just need to see a product before going into its creation page since it makes creating and adding inventory much faster among numerous items.

Is there a change to the code above that would produce the image? Any alternative method of placing an image in the admin's catalog will work as well. Thank you.

Well, around line 553 (for category images), need to be sure that the category image is captured in the returned data, then where you see in the above code: $categories->fields['some_value'], use instead $category['some_value'] at/around the area where you want category images to be shown.

For product images, would want to look at/around 774 and then within the foreach ($products as $product) loop use $product['prod_image_designator'] for the product image. It may be that you are also getting an unusual result because trying to pull the category image instead of the product image.

Now, to do it "smart", would want to use an observer class to incorporate the changes without actually modifying the code. there are plenty of plugins that use an observer from which to learn how to construct one and what is necessary as commented in the file.

mc12345678:

Well, around line 553 (for category images), need to be sure that the category image is captured in the returned data, then where you see in the above code: $categories->fields['some_value'], use instead $category['some_value'] at/around the area where you want category images to be shown.
Sorry about that. I posted the category images code instead of the product images code. Both are included in the plugin and placed in category_product_listing.php. I don't use category images, but uploaded a few for testing this plugin. Unfortunately, even after changing both instances of $categories->fields to $category, the category images do not appear.

For product images, would want to look at/around 774 and then within the foreach ($products as $product) loop use $product['prod_image_designator'] for the product image. It may be that you are also getting an unusual result because trying to pull the category image instead of the product image.

This is the code for the products images:

<?php // bof Twitch TAP Thumb - this is the product level ?>
            <td class="text-center hidden-md hidden-sm hidden-xs">
            <?php echo ($product['products_image'] != '' ? zen_image(DIR_WS_IMAGES . $product['products_image'], $product['products_name'], HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT) : zen_image(DIR_WS_IMAGES . PRODUCTS_IMAGE_NO_IMAGE, HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT) ); ?>
            </td>
<?php // eof Twitch TAP Thumb ?>

It appears after foreach ($products as $product) in the file, between sections dealing with products_name and products_model.

I'm not sure I understand your instruction correctly. Do you mean to change $product['products_image'] in the plugin's code to $product['prod_image_designator']?

Now, to do it "smart", would want to use an observer class to incorporate the changes without actually modifying the code. there are plenty of plugins that use an observer from which to learn how to construct one and what is necessary as commented in the file.Will this make future upgrades easier? I have found adapting various plugins to ZC v1.5.7c very challenging (though most require few changes).

Joseph M:

Sorry about that. I posted the category images code instead of the product images code. Both are included in the plugin and placed in category_product_listing.php. I don't use category images, but uploaded a few for testing this plugin. Unfortunately, even after changing both instances of $categories->fields to $category, the category images do not appear.

This is the code for the products images:

<?php // bof Twitch TAP Thumb - this is the product level ?>

        <td class="text-center hidden-md hidden-sm hidden-xs">
        <?php echo ($product['products_image'] != '' ? zen_image(DIR_WS_IMAGES . $product['products_image'], $product['products_name'], HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT) : zen_image(DIR_WS_IMAGES . PRODUCTS_IMAGE_NO_IMAGE, HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT) ); ?>
        </td>

<?php // eof Twitch TAP Thumb ?>

> It appears after *foreach ($products as $product)* in the file, between sections dealing with products_name and products_model. 
> 
> I'm not sure I understand your instruction correctly.  Do you mean to change $product['products_image'] in the plugin's code to $product['prod_image_designator']?
> 
> Will this make future upgrades easier?  I have found adapting various plugins to ZC v1.5.7c very challenging (though most require few changes).
So, two things I see.. Since you are in the admin trying to look at images, if not mistaken you need to reference the catalog side set of images.. That is offered by using DIR_WS_CATALOG_IMAGES instead of DIR_WS_IMAGES
Next, no still need to use the field name applicable to product images, I rarely reference it and didn't go look it up. If the field within the database is: products_image, then $product['products_image'] should be used..

Let's see, The quoted text that is not above about using an observer? YES! it will make it easier.  I can't at the moment remember if auto loading of admin side observers is now in ZC 1.5.7 or not, but if it is/were you could copy a single file (properly named so that you know what it is/does and why its important) from your existing site to your upgraded site. At that point, "all things equal" your code is off and running as if you just completed your site upgrade... 

Now, and not really discussed, in order to use $product['products_image'], the field 'products_image' has to be in the query results... The query is as previously described located at/around line 774. The existing query does *not* include all fields and it does not include products_image, so products_image has to be added to the select portion of that query. 

If there is something else that is not clearer than mud (:)), the please ask away.

mc12345678:

So, two things I see.. Since you are in the admin trying to look at images, if not mistaken you need to reference the catalog side set of images.. That is offered by using DIR_WS_CATALOG_IMAGES instead of DIR_WS_IMAGES
Next, no still need to use the field name applicable to product images, I rarely reference it and didn't go look it up. If the field within the database is: products_image, then $product['products_image'] should be used..Removing CATALOG was my alteration, not in the file set, and since corrected in my file. The database uses products_image, so good to keep that.
The existing query does not include all fields and it does not include products_image, so products_image has to be added to the select portion of that query. What/where is the select portion?

Joseph M:

Removing CATALOG was my alteration, not in the file set, and since corrected in my file. The database uses products_image, so good to keep that.
What/where is the select portion?

As said before, at/around line 774. Now this code portion I am pasting, begins well before 774, but it includes notifier information so that one can build an observer to add the necessary field to the select. I will, however, also show the field being added manually:

            // -----
            // Give a watching observer the chance to modify the products' query to gather additional fields for the display.
            //
            // Note the leading space requirements!
            //
            // 1. Any modification of the $extra_select must include a leading ' ,'.
            // 2. Any modification of the $extra_from must include a leading ' ,'.
            // 3. Any modification of the $extra_ands must include a leading ' AND'
            //
            $extra_select = $extra_from = $extra_joins = $extra_ands = '';
            $zco_notifier->notify('NOTIFY_ADMIN_PROD_LISTING_PRODUCTS_QUERY', '', $extra_select, $extra_from, $extra_joins, $extra_ands, $order_by);
            
            $products_query_raw = "SELECT p.products_type, p.products_id, pd.products_name, p.products_quantity,
                                          p.products_price, p.products_status, p.products_model, p.products_sort_order,
                                          p.master_categories_id";
            $products_query_raw .= $extra_select;

And with the products_image field manually added:

            // -----
            // Give a watching observer the chance to modify the products' query to gather additional fields for the display.
            //
            // Note the leading space requirements!
            //
            // 1. Any modification of the $extra_select must include a leading ' ,'.
            // 2. Any modification of the $extra_from must include a leading ' ,'.
            // 3. Any modification of the $extra_ands must include a leading ' AND'
            //
            $extra_select = $extra_from = $extra_joins = $extra_ands = '';
            $zco_notifier->notify('NOTIFY_ADMIN_PROD_LISTING_PRODUCTS_QUERY', '', $extra_select, $extra_from, $extra_joins, $extra_ands, $order_by);
            
            $products_query_raw = "SELECT p.products_type, p.products_id, pd.products_name, p.products_quantity,
                                          p.products_price, p.products_status, p.products_model, p.products_sort_order,
                                          p.master_categories_id , p.products_image";
            $products_query_raw .= $extra_select;

Adding product images in catalog listings in admin is destined for inclusion in ZC v1.58, comparing the code for admin/category_product_listing.php I think you can achieve what you want with a couple of edits (without the Twitch mod):

around line #579, add the code in red

<th class="text-right shrink"><?php echo TABLE_HEADING_ID; ?></th>
                <th colspan="2"><?php echo TABLE_HEADING_CATEGORIES_PRODUCTS; ?></th>
				<?php if ($show_prod_labels) { ?>
                   <th class="hidden-sm hidden-xs"><?php echo TABLE_HEADING_IMAGE; ?></th>
                  <th class="hidden-sm hidden-xs"><?php echo TABLE_HEADING_MODEL; ?></th>
                <th class="text-right hidden-sm hidden-xs"><?php echo TABLE_HEADING_PRICE; ?></th>

the ZCv1.58 code adds an image to all catalog pages (products and categories), the above code is for images on products only.

You will also need to define TABLE_HEADING_IMAGE by adding this line to admin/includes/languages/english/category_product_listing.php

define('TABLE_HEADING_IMAGE', 'Image');

back to admin/category_product_listing.php, around line #853, add the code in red

<td>
                    <a href="<?php echo zen_href_link(FILENAME_PRODUCT, 'cPath=' . $cPath . '&product_type=' . $product['products_type'] . '&pID=' . $product['products_id'] . '&action=new_product' . (isset($_GET['search']) ? '&search=' . $_GET['search'] : '')); ?>" title="<?php echo IMAGE_EDIT; ?>" style="text-decoration: none">
                        <?php echo $product['products_name']; ?>
                    </a>
                </td>
		<td class="hidden-sm hidden-xs"><?php echo zen_image(DIR_WS_CATALOG_IMAGES . zen_get_products_image($product['products_id']),'', IMAGE_SHOPPING_CART_WIDTH, IMAGE_SHOPPING_CART_HEIGHT); ?></td>
                <td class="hidden-sm hidden-xs"><?php echo $product['products_model']; ?></td>
                <td class="text-right hidden-sm hidden-xs"><?php echo zen_get_products_display_price($product['products_id']); ?></td>

You can see that the image size is controlled by the IMAGE_SHOPPING_CART_WIDTH, IMAGE_SHOPPING_CART_HEIGHT in Admin > Configuration > Images

While the line numbers presented above may be different for ZC 1.5.7, on the surface the above suggested edits appear possible in 1.5.7 which by way of using zen_get_products_image, eliminates the need for editing the sql query. Come to think of it there are other ways to retrieve the 'products_image' field data as well.

In my response, I was trying to minimize the level of edits away from the code being used to try to provide the desired result rather than redeveloping or otherwise improving on the feature(s). Good suggestion(s) simon1066!

mc12345678:

$products_query_raw = "SELECT

Thank you, mc12345678.  That was the pointer I needed!  Adding the product as described above worked great.  I applied the same method to ```
$sql = "SELECT c.categories_id, cd.categories_name, c.parent_id, c.sort_order, c.categories_status
``` and added ```
c.categories_image
``` to get images for categories and subcategories to show up as well.

This is very useful for merchants who have numerous items with minor variations in a single category or subcategory.  It allows a quicker find of shop products on the admin side that require an edit, and helps spot oversights of missing or bad quality images.  It's also great for spotting a product that has to be pulled because it was sold through channels outside of the online shop (like at a trade show, brick and mortar store, or online marketplace).

simon1066:

Adding product images in catalog listings in admin is destined for inclusion in ZC v1.58, comparing the code for admin/category_product_listing.php I think you can achieve what you want with a couple of edits (without the Twitch mod):

around line #579, add the code in red

<th class="text-right shrink"><?php echo TABLE_HEADING_ID; ?></th> <th colspan="2"><?php echo TABLE_HEADING_CATEGORIES_PRODUCTS; ?></th> <?php if ($show_prod_labels) { ?> <th class="hidden-sm hidden-xs"><?php echo TABLE_HEADING_IMAGE; ?></th> <th class="hidden-sm hidden-xs"><?php echo TABLE_HEADING_MODEL; ?></th> <th class="text-right hidden-sm hidden-xs"><?php echo TABLE_HEADING_PRICE; ?></th> ``` > > the ZCv1.58 code adds an image to all catalog pages (products and categories), the above code is for images on products only. > > You will also need to define TABLE_HEADING_IMAGE by adding this line to admin/includes/languages/english/category_product_listing.php > > ``` define('TABLE_HEADING_IMAGE', 'Image'); ``` > > back to admin/category_product_listing.php, around line #853, add the code in red > > ``` <td> <a href="<?php echo zen_href_link(FILENAME_PRODUCT, 'cPath=' . $cPath . '&product_type=' . $product['products_type'] . '&pID=' . $product['products_id'] . '&action=new_product' . (isset($_GET['search']) ? '&search=' . $_GET['search'] : '')); ?>" title="<?php echo IMAGE_EDIT; ?>" style="text-decoration: none"> <?php echo $product['products_name']; ?> </a> </td> <td class="hidden-sm hidden-xs"><?php echo zen_image(DIR_WS_CATALOG_IMAGES . zen_get_products_image($product['products_id']),'', IMAGE_SHOPPING_CART_WIDTH, IMAGE_SHOPPING_CART_HEIGHT); ?></td> <td class="hidden-sm hidden-xs"><?php echo $product['products_model']; ?></td> <td class="text-right hidden-sm hidden-xs"><?php echo zen_get_products_display_price($product['products_id']); ?></td> ``` > > You can see that the image size is controlled by the IMAGE_SHOPPING_CART_WIDTH, IMAGE_SHOPPING_CART_HEIGHT in Admin > Configuration > Images

I rolled my files back for a fresh start and tried this. It's exactly what I needed. Thank you. I use so few category or subcategory images that I really don't need to see them in the admin. I'll keep this solution for it's function and simplicity. The shopping cart image size is also very compatible for use in the admin.

The Twitch plugin was more than I needed, though I can see how it would assist shop owners who use those inventory functions frequently.

It's great to hear that category and product images in the admin will be included with v1.5.8. It's very useful, and parallels the inventory handling standard for sellers in online marketplaces. Looking forward to seeing the same ease of use built into ZC.

I decided to implement this on one of my sites but my IMAGE_SHOPPING_CART_WIDTH, IMAGE_SHOPPING_CART_HEIGHT are too large for use in the catalog listing. So in admin/category_product_listing.php,

I changed

<td class="hidden-sm hidden-xs"><?php echo zen_image(DIR_WS_CATALOG_IMAGES . zen_get_products_image($product['products_id']),'', IMAGE_SHOPPING_CART_WIDTH, IMAGE_SHOPPING_CART_HEIGHT); ?></td>

to

<td class="hidden-sm hidden-xs"><?php echo zen_image(DIR_WS_CATALOG_IMAGES . zen_get_products_image($product['products_id']),'', '50', ''); ?></td>

giving the images a width of 50px (letting the height take care of itself)

TAP Thumb for 1.57c is nearly complete, it now includes a built in image checker, admin controlled master on/off switch and its own thumbnail width/height controls.

Cross link to the original module thread:
https://www.zen-cart.com/showthread.php?216139-Twitch-Admin-Product-Thumbnails-%28TAP-Thumb%29

Stay tuned for the public release - Your donations and support are appreciated!

:cheers: