more than one image for a product

Hello. Firstly let me say this is the coolest and smartest software I have seen in a long time. Well done Zen-cart! I have looked around the forum to find out the answer to this question - but to no avail. Is it possible to put more than one picture up per product - and if so, how do I do it? When I try to add a second picture, it replaces the original one!

tutorials/FAQ button, top right of this page.
Then search facility, reveals
https://www.zen-cart.com/tutorials/index.php?article=58

Thanks for the tutorial. I am trying to do it in admin, where I upload

bear_01

and then update it with the update button. Then I go back into admin and upload

bear_02

I tick the box that says
Overwrite Existing Image on Server? NO (is that right?)

But it keeps replacing the image. I have put the images in the DVD directory via FTP. What am I doing wrong? Help! :no:

You don't add extra images via admin, you upload them
directly via ftp

ok. I have uploaded both images via FTP to the CD directory. When I go to the product it still shows only one image. Am I missing something here? Sorry to be such a newbie on this!

In which directory is original image for this product installed?
If it is in /images, then you upload additional images to that directory.
NOT /images/cd or /images/dvd

ah, that might help. I'll check...

I have my images in /images folder on the main directory, but in the admin, the drop-down box does not have an option for /images. The closest is "Main Directory"

/images/ is the "main directory" for product images. That is where the small (thumbnail) images go. These are the root images that tell a product what other images belong to it. Load these in admin.

Large images go in /images/large/ and medium images go in /images/medium/.

Additional image thumbnails go in /images/ and large additional images go in /images/large/.

All of these are uploaded by ftp.

Hello,

Does anyone know how to move the additional product images to a different place (ie. under the first image) ?

Kind regards,
Anthony

You mean like in my site?

Part of this is in moving the additional images code block up to just after the main image code block. For my site, I wrapped a div around them both so they could be handled together. You might get an idea by doing a view source on it.

Hello gjh42,

Thanks for the reply.

I did a bit of a search on your site, and couldn't find a product with more than one image.

Can you supply me with a link so that I can have a look at it?

Kind regards.
Anthony

Sorry, there aren't too many of them. Try this.

Hi gjh42,

I forgot to ask.

What file am I looking for to "moving the additional images code block up to just after the main image code block"

Kind regards,
Anthony

Hi gjh42,

I found the file: tpl_product_info_display

I looked at your source code and found the area you were speaking of:

<div id="productImagesWrapper">
<!--bof Main Product Image -->

<div id="productMainImage" class="centeredContent back">
<script language="javascript" type="text/javascript"><!-- document.write('<a href="javascript:popupWindow(\'http://www.futurelics.com/shop/index.php?main_page=popup_image&pID=229&zenid=a3f9feffa21946611974a0d306bcf986\')"><img src="images/fr-zbhk02.jpg" alt="Hinge Knot pendant 2" title=" Hinge Knot pendant 2 " width="175" height="153" /><br /><span class="imgLink"></span></a>'); //--></script>
<noscript>
<a href="[\http://www.futurelics.com/shop/index.php?main\_page=popup\_image&pID=229&zenid=a3f9feffa21946611974a0d306bcf986\[/SIZE\]](http://www.futurelics.com/shop/index.php?main_page=popup_image&pID=229&zenid=a3f9feffa21946611974a0d306bcf986)[SIZE=1]" target="_blank"><img src="images/fr-zbhk02.jpg" alt="Hinge Knot pendant 2" title=" Hinge Knot pendant 2 " width="175" height="153" /><br /><span class="imgLink"></span></a></noscript>
</div><!--eof Main Product Image-->
<!--bof Additional Product Images -->
<div id="productAdditionalImages">
<div class="additionalImages centeredContent back" style="width:100%;">
<script language="javascript" type="text/javascript"><!-- document.write('<a href="javascript:popupWindow(\'http://www.futurelics.com/shop/index.php?main_page=popup_image_additional&pID=229&pic=0&products_image_large_additional=images/large/fr-zbhk02-1_LRG.jpg&zenid=a3f9feffa21946611974a0d306bcf986\')"><img src="images/fr-zbhk02-1.jpg" alt="Hinge Knot pendant 2" title=" Hinge Knot pendant 2 " width="175" height="131" /><br /></a>'); //--></script>
<noscript><a href="[\http://www.futurelics.com/shop/index.php?main\_page=popup\_image\_additional&pID=229&pic=0&products\_image\_large\_additional=images/large/fr-zbhk02-1\_LRG.jpg&zenid=a3f9feffa21946611974a0d306bcf986\[/SIZE\]](http://www.futurelics.com/shop/index.php?main_page=popup_image_additional&pID=229&pic=0&products_image_large_additional=images/large/fr-zbhk02-1_LRG.jpg&zenid=a3f9feffa21946611974a0d306bcf986)[SIZE=1]" target="_blank"><img src="images/fr-zbhk02-1.jpg" alt="Hinge Knot pendant 2" title=" Hinge Knot pendant 2 " width="175" height="131" /><br /><span class="imgLinkAdditional"></span></a></noscript></div>

</div>
<!--eof Additional Product Images -->
</div>

I found the sections in my code also:

<!--bof Main Product Image -->
<?php if (zen_not_null($products_image)) { ?>
<?php /** * display the main product image */ require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php } ?>
<!--eof Main Product Image-->

and:

<!--bof Additional Product Images -->
<?php /** * display the products additional images */ require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->

Can I ask 2 questions.

Firstly, what would I have to change my code to, to "wrap a div around it so that they are handled together"?

Secondly, I noticed that you have it placed under "product Name" tag. Should I place it there also?

Here is the page I am referring to:

http://www.xmanhosting.com.au/shop/index.php?main_page=product_info&products_id=3

Kind regards,
Anthony

The wrapper is just HTML, so you can see it all in view source:

and

For placement relative to the product name, you can experiment and see what suits your taste.

Hi

Thanks for the reply

I have put the 2 tags within a Div wrapper, and I have experimented moving the whole thing around, and they do move together, however the second image isn't aligned under the first one like in yours.

Here is my code:

<div id="productImagesWrapper">

<?php if (zen_not_null($products_image)) { ?>
<?php /** * display the main product image */ require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php } ?>
<!--eof Main Product Image-->

<?php /** * display the products additional images */ require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->

And here is my page Im referring to:

http://xmanhosting.com.au/shop/index.php?main_page=product_info&cPath=2&products_id=3

Did you do anything else to get them aligned under each other?

Also, what have you done to get the images the same size?

Kind regards,
Anthony

The stylesheet takes care of the fine positioning:```
/Image Display/
...

#productImagesWrapper {
width:200px;
}

#productMainImage {
width:200px;
}

#productMainImage img {
margin: 1em 0em 3em 0em ;
float: right;
}
#productAdditionalImages img {
margin: 1em 0em 1em 0em ;
float: right;
}

Hello gjh42,

Awesome, thanks for that.

I am almost there !!!

1 final thing.

You will notice that the "larger image" text on the first image is to the left of the image, while in the image below it, the text is underneath.

This causes the 1st image to not quite be in the right spot.

How do I get the "larger image" text for the 1st image underneath it, like the 2nd image?

Here is the link:

http://xmanhosting.com.au/shop/index.php?main_page=product_info&products_id=3

And once I get this, ill be all sorted with my additional images !! Yay!

Kind regards,
Anthony[IMG]http://www.zen-cart.com/forum/images/jersey.gif[/IMG]
larger image

**** EDITED *** Never ever post in a forum, email, newsletter etc. the zenid or zenAdminID or you will be doomed!!** :eek:

Hi gjh42,

Don't worry about the "larger image" text question. I have just decided to delete the actual text.

I do have a separate question however.

Do you know of a way to have the product images to the left of the product description?

The reason being is because I am wanting to add a "list of contents" to each product, which will display vertically down the page. This however puts the images too far down the page.

This can be viewed here:

http://www.giftedallsorts.com.au/shop/index.php?main_page=product_info&cPath=1&products_id=2

Do you know of a way to do this?

Kind regards,
Anthony