Additional Images Layout

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.

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.

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?

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
    }
?>
```  <-- 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:

if ($options_attributes_image[$i] != '') {
?>

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.

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}

rainthebat:

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

:clap: 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/index.php?main_page=product_info&cPath=9_29&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.

Thats fabulous:clap:

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.

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.

rainthebat:

Thats fabulous:clap:

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!

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:

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.

Where do you change the text size? In the css?

actually, scratch that.

.attribImg is in the main stylesheet.css

and it is set to: float:left,

just change that to: float:right.

rainthebat:

actually, scratch that.

.attribImg is in the main stylesheet.css

and it is set to: float:left,

just change that to: float:right.

I tried that, only moves to the right on the same line:

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

If you were interested in changing the text size, yes it is in the css.

Here is were you set the text to a default size for every product display, or have just a certain product page display a certain size text.

To just affect the text size of the sweatshirt page, you would make this rule in a new stylesheet:

#productDescription{font-size:1.4em} <- you can experiment with that number, or use pixels e.g. {font-size:14px}

save this stylesheet as:

c_1_7.css

and that text size rule will only apply to this page.

if you set the text size in the stylesheet.css or product_info.css it will apply to all pages.

mheishman:

I tried that, only moves to the right on the same line:

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

It looks like you added the code from attributes module to after:

<!--eof Product description -->
<br class="clearBoth" />

thus that <br class> is getting in the way.

You almost just had it a minute ago.

rainthebat:

It looks like you added the code from attributes module to after:

Yeah, I had to remove the <br class="clearBoth" /> that was here:

<?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 } ?> </div> <?php } ?> <!--eof Product description -->

Ok, I have to leave work now....thanks again for all your help. This is great!!!! :clap:

mheishman:

Ok, I have to leave work now....thanks again for all your help. This is great!!!!
Indeed. I am happy to have learned about the attributes and pictures, I'll definitely use it in the future.