Additional Images Layout

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

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)

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.

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

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.

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.

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...

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.

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

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 -->

mheishman:

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

that is a good point. That may be a more proper way to go about the situation.

There are several different approaches possible for this.

My knowledge is based on lots of trial and error techniques. Perhaps someone with a more solidified understanding of this particular area could chime in with a more pertinent solution.

I thought I had tried it before and it didn't work, but I'll try again later tonight and see what happens. This store isn't live yet so I can mess around all I want on it now. I need to still make a copy of it to a test store, but I'm trying to finish it first. This is the last thing that I need to do on the site.

As always, I'll make a backup of the two files before making any changes.

I didn't even know about the attribute images. There are so many awesome hidden configuration settings in Zen Cart! Now I've got some new territory to explore!

o.k. quick thought just came into head about what might be done.

in tpl_modules_attributes.php, you need to move this up:

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

to perhaps line 20. That will put the images above the 'comments' and 'options'.

Now that the options are down low, you could probably float them to the left, as they are wrapped in their own <div class'>

float the 'add to cart' to the right.

One thing to remember is that this will affect the display of every product page.

Working with a stylesheet that is page specific is a great way to work with layout without too much php code change.

But since you want every product page that has attributes to display the same, it would be o.k. to change around the php attributes code without harm, as that will affect only pages that call up attributes anyways.

If you want a custom stylesheet for any single product page, just save a new stylesheet that you want to have control a product page -

/includes/templates/YOUR_TEMPLATE/css/c_categoryPath.css

so for the link you gave, a custom stylesheet for that would be named:

c_1_7.css

and saved in the /YOUR_TEMPLATE/css directory. This stylesheet can override anything since its loaded last.

with that stylesheet you can try floating the attribute images to the right.
.attribImg{float:right}
you might need to add: .wrapperAttribsOptions{float:left}
and in order for that to work properly you may need to get rid of: <br class="clearBoth" /> on line 34 of tpl_modules_attributes.php

rainthebat:

I didn't even know about the attribute images. There are so many awesome hidden configuration settings in Zen Cart! Now I've got some new territory to explore!

o.k. quick thought just came into head about what might be done.

in tpl_modules_attributes.php, you need to move this up:

> 
> to perhaps line 20. That will put the images above the 'comments' and 'options'.
> 
> Now that the options are down low, you could probably float them to the left, as they are wrapped in their own <div class'>
> 
> float the 'add to cart' to the right.
> 
> One thing to remember is that this will affect the display of every product page.
> 
> Working with a stylesheet that is page specific is a great way to work with layout without too much php code change.
> 
> But since you want every product page that has attributes to display the same, it would be o.k. to change around the php attributes code without harm, as that will affect only pages that call up attributes anyways.


So I made the change to look like this

> <?php
> if ($options_attributes_image[$i] != '') {
> ?>
> <?php echo $options_attributes_image[$i]; ?> 
> <?php
> for($i=0;$i<sizeof($options_name);$i++) {   
> ?>

Now my pictures don't show up at all, but the attributes are there: 
[http://www.choateonlinebookstore.org/index.php?main\_page=product\_info&cPath=1\_7&products\_id=61](http://www.choateonlinebookstore.org/index.php?main_page=product_info&cPath=1_7&products_id=61)

mheishman:

So I made the change to look like this

I think it went up too high!

o.k.

this chunk (from the file reset to the original state):

<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>
<br class="clearBoth" />

to between here:

(line 24) ```
?>

-- right here--

(line 25)```
<h3 class="attributesComments"><?php echo $options_comment[$i]; ?></h3>

I'm wrong again about that.

Move that chunk that displays the image to line 29

rainthebat:

I'm wrong again about that.

Move that chunk that displays the image to line 29

Well we got the images back:

http://www.choateonlinebookstore.org/index.php?main_page=product_info&cPath=1_7&products_id=61

that last way worked on my test.

so this:

<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>
<br class="clearBoth" />

the empty line between this:

?>

<div class="wrapperAttribsOptions">

you many want to get rid of <br class="clearBoth" /> if there are problems with floating things.

It is possible to move the code that supplies the images in tpl_modules_attributes.php to after the product text display in tpl_product_info_display.php

Tested it, and was successful.

If you are real serious about getting that to look just like your .jpg image, it may be the best route to go.