Additional Images Layout

[rainthebat]

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.

[mheishman]

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.

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

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

[rainthebat]

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

[mheishman]

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.

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...products_id=61

[rainthebat]

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>

[rainthebat]

I'm wrong again about that.

Move that chunk that displays the image to line 29

[mheishman]

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...products_id=61

[rainthebat]

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.

[rainthebat]

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.