defining images in zencart with a class tag

I want to add a border to my product images in the listing page, the product page and in the additional boxes on the front page.

I am unable to because there is no unique class tag for each img group. I want to add this tag but am not sure how to.

I looked at several this that helped me get closer I believe, however; I dont know what to do now that I found them. Please shed some light.

Here's what I found

in templates/ ... for the main image inside of a product page

<?php echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>

Which I then edited to look like this..

<?php echo '<a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" target="_blank">' . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT, 'class="mainProductImage"') . '<br /><span class="imgLink">' . TEXT_CLICK_TO_ENLARGE . '</span></a>'; ?>

because i noticed in product listing page for a category had a class to define them with. i found the code for the in
includes/modules/product_listing.php which looks like this...

zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"')

but when I updated the tpl_modules_main_product_image.php to include the newly added class tag as in the example I included I did not get the result I was looking for. No class in the tag.

What did I do wrong?

Avel

Try something like this at the bottom of your stylesheet:

.centerBoxContentsProducts img{
border: 4px solid #C5BB9C;
}
.categoryListBoxContents img{
border: 4px solid #C5BB9C;
}

#productAdditionalImages img{
border: 4px solid #C5BB9C;
}

.centerBoxContentsNew img{
border: 4px solid #C5BB9C;
}

.centerBoxContentsAlsoPurch img{
border: 4px solid #C5BB9C;
}

.centerBoxContentsCrossSell img{
border: 4px solid #C5BB9C;
}

continue for other images...

batteryman:

I want to add a border to my product images in the listing page, the product page and in the additional boxes on the front page.

I am unable to because there is no unique class tag for each img group. I want to add this tag but am not sure how to.

I looked at several this that helped me get closer I believe, however; I dont know what to do now that I found them. Please shed some light.

Here's what I found

in templates/ ... for the main image inside of a product page

Which I then edited to look like this..

because i noticed in product listing page for a category had a class to define them with. i found the code for the in
includes/modules/product_listing.php which looks like this...

but when I updated the tpl_modules_main_product_image.php to include the newly added class tag as in the example I included I did not get the result I was looking for. No class in the tag.

What did I do wrong?

Avel

Don't fool with the template files.

try adding this declaration to your stylesheet.css

.productListing-data img {
border:1px solid #000;
}

#productMainImage {
border: 1px solid #000;
}

Change the color to whatever you want.

Yea, what Clyde said... :)

All the images can be styled without touching the PHP code.

If you don't already have it, use Firefox and the Firebug plug-in to see all the IDs and classes you have to play with.

Not every one available is in the stylesheet by default until you add it.