Additional Images Layout

[mheishman]

I am trying to change my page to look as follows:

Attribute images underneath the product description and have the drop down attributes (size, color, type, etc.) on the the bottom left of the screen.

For an example of my current layout you can use this link: Choate Under Armour Fleece

I want to move the additional sweatshirts underneath the description, keeping the Please Choose: and the 2 drop downs underneath the main product image and moving the add to cart to the same line as the dropdowns.

I am using the latest version of ZenCart (1.3.8)

Here is an example of what it should look like when finished: End Result Example

[rainthebat]

Have you made any edits to the product_info_display.php file yet?

what needs to happen is the call to the two additional images need to appear in the code right after the product description. Then you need a new container div to hold both the attributes (floated left) and the add to cart (floated right)

[rainthebat]

because those images have been uploaded to the attributes section of the images folder, they are bound up with the attributes code in the product_info_display, which means that separating (so to speak) them would be difficult.

[rainthebat]

Instead of having them as attribute images, you could have them be "additional images". Then you have the ability to place them where you like.

For that particular image, you would upload the two additional images to the images folder itself (since the main image is not in a category in the image folder)

to get the medium images
by taking the main image name:
DSC_0426_LRG
and adding an underscore after it plus whatever else you wan to put, so:

DSC_0426_LRG_DSC0425.jpg - would be medium (additional image) version of that picture
DSC_0426_LRG_DSC0424.jpg
. . . . . . . . . . . . ^-that needs to be the last underscore because anything before the last underscore indicates the main image name.

and for the large versions of those two images, upload them to the same directory (the images folder itself in your case) with the medium size image name plus the ending _LRG:

DSC_0426_LRG_DSC0425_LRG.jpg - would be large (additional image) version of that picture
DSC_0426_LRG_DSC0424_LRG.jpg

[rainthebat]

You may want to categorize your images. For organization purposes, if you create a new folder called 'hoodies' within the image directory, you can then choose to upload the images to that folder when your creating your product in the admin panel.

However, if you start doing this for different category images, your medium and large files need to go into new folders with the same category name e.g. 'hoodies' under the medium and large folders. And they still need their correct endings i.e. _MED and _LRG.

The only reason I suggest this is if over time you build up a large collection of images and they all are in one folder with names like DCS_4345.jpg, you may start loosing track of them.

Also you could give them (the images) descriptive names such as 'blueSweatshirt.jpg' and the medium version would be: 'blueSweatshirt_MED.jpg'

Just little tips, not trying to overburden, these things helped me out in the past is all.

[mheishman]

This is the problem....

If I make them additional images, how do I add the attribute (i.e. - color) of the item? This is why I added them under the attribute section and not just additional images. The only thing the additional images say are "larger image" underneath. Even if they have to click on it and I can add the attribute under the lightbox that would be fine.

I understand the whole formatting of the additional images and the "right" way to do it, but the customer said it was easier for them to send me the actual DSC_number.jpg file then renaming them all, so I just went with it.

[rainthebat]

that is o.k. I was looking for an easy way out is all. It is nice how it functions with the attributes and the name underneath.

So working with your current set up, it will require a little digging...

[rainthebat]

in the file tpl_product_info_display.php starting about line 130 is the call to the attributes module:

<!--bof Attributes Module -->
<?php
  if ($pr_attr->fields['total'] > 0) {
?>
<?php
/**
 * display the product atributes
 */
  require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
<?php
  }
?>
<!--eof Attributes Module -->

---> this file: tpl_modules_attributes.php
this module has the code ($variables) that call up the image and image name for the attributes. This module also calls up the attributes options selection (actually calls that up before the image and image name.

[mheishman]

So can I make a new file to separate the two and make separate calls in the tpl_product info_display??

[rainthebat]

this stuff puts the images in:

<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>

Now this could not turn out right, so don't try it on a live store. If you have a test store running on your computer, you might try moving a portion of that code to the tpl_product_info_display.php, probably underneath the: <!--eof Product description -->