Additional Images Layout

[mheishman]

Here is the code like you said:

<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<div class="wrapperAttribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

It is putting the pictures on the right side, now I need to move them up beneath the product descpription, preferably to the left of the main product image.

[mheishman]

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.

What would that look like, because I just tried copy/paste of the code and it just made the screen blue with just the header showing. I'm sure it would have to be changed, right?

[rainthebat]

you would need to take this from tpl_modules_attributes.php :

 <?php
    for($i=0;$i<sizeof($options_name);$i++) {
?>

<-- leave this in but copy it.

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

<-- cut this out and copy it

<?php
    }
?>

<-- leave this in but copy it.

now open tpl_product_info_display.php:
and insert between the <div tags>:
<div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?></div> (line 93

this code:

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

[rainthebat]

after you edited tpl_product_info_display.php to include the new code, remember that: If you did not remove line 42-49:

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

from tpl_modules_attributes.php, the images will display twice.

If you removed more than that, it'll mess up the other parts of the php code.

[rainthebat]

Great job! Getting there!

To get the images on the right, you could look for .attribImg{} in the main stylesheet, and if it is not there, you could add the class or modify it to float to the right:

.attribImg{float:right}

[mheishman]

after you edited tpl_product_info_display.php to include the new code, remember that: If you did not remove line 42-49:

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

from tpl_modules_attributes.php, the images will display twice.

If you removed more than that, it'll mess up the other parts of the php code.

Thank you for all your help! I am going to make the images smaller which should put them underneath the product description like this one is: http://www.choateonlinebookstore.org...products_id=55


I want them to line up to the left of the main product image, so float:left should be correct. I tried float right and it's not what I was looking for.

[rainthebat]

Thats fabulous

As you can see there are lots of possibilities when it comes to these custom surgeries for the product layout pages. Just remember to keep the stuff in whole chunks and you can move some of it a little ways to achieve desired results.

[rainthebat]

In the case of the sweatshirt page, part of the problem might be the size of the text. To look like that other page, you may need to reduce text size as opposed to image size.

[mheishman]

Thats fabulous

As you can see there are lots of possibilities when it comes to these custom surgeries for the product layout pages. Just remember to keep the stuff in whole chunks and you can move some of it a little ways to achieve desired results.

It's just a matter of know where to move it, I was trying this for days and just wasn't hitting that spot in the code in the tpl_modules_attributes. Definitely wasn't putting the correct code in the tpl_product_display.

Thanks again!

[rainthebat]

or wrap this in a float div (so the images will go to the right no matter how much text there is):

 <div style="float:right">
 <?php
    for($i=0;$i<sizeof($options_name);$i++) {
?><?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>
</div>

get rid of this at the end:

<br class="clearBoth" />