Moving the pic.

Hello everyone,

I am looking to move one item on my product description page. The current setup is the product image on the left side and the product description is on the right side. When the description is longer than the image, the text then starts at the left margin. I want to move the image to the right side and the description to the left side to alleviate this word wrapping around the image. Anything simple to do? I tried the template change for moving the image to the right, but it changed some other things I did not want to move. I just want to swap those two and for them to be in the same row (i.e. word wrap around the image from the left instead of the right). Thanks in advance.

Tony

example:
Product Name

Product Description | Product Image
Rest of text and other attributes

IF you copy the file:
/includes/templates/template_default/templates/tpl_product_info_display.php

to your templates and overrides directory:
/includes/templates/your_templates_dir/templates/tpl_product_info_display.php

You can edit the file and look for the code for the image:

<!--bof Main Product Image -->
<?php
  if (zen_not_null($products_image)) {
  ?>
<?php
/**
 * display the main product image
 */
   require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php
  }
?>
<!--eof Main Product Image-->

You will see all of the code is delimited this way so you can rearrange things ...

The products_description is:

 <!--bof Product description -->
<?php if ($products_description != '') { ?>
<div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?></div>
<?php } ?>
<!--eof Product description -->

By moving these around you can place them where they better suit your site ...

Linda, I've been working with this file because the h1 and h2 descriptive information on this page covers most of my image making the clickable area for "larger image" only a couple of slices at bottom and top.

Tried for a few days now searching anything that even seems close and no luck.

If I use the Google bar to view the style information the h1 and h2 blocks on the product page extend over the picture though the text shows only to the right of the picture as it should.

Thought it might be a lightbox issue but now I don't know. I've tried numerous z-indexs in both the main CSS and lightbox CSS but can't nail this down.

Had changed the h1 and h2 stuff to my own style but Woody let me know that would effect spiders eating mhttp://www.zen-cart.com/forum/newreply.php?do=newreply&noquote=1&p=380349y h1's so I don't want that but I'm out of ideas.

Also tried margin, padding adjustments just about everywhere I could. Most of these changes effected the picture too, just moving everything to left, right, etc. and still covering the image portions.

I'm now guessing it's and edit in /includes/templates/my_templates_dir/templates/tpl_product_info_display.php
but I have no idea what to do there. Tried loading a fresh downloaded copy of this file too.

Do you have any ideas? Hope my description is sufficient, no URL for you right now.

Thanks!

Sorry, must have pasted something accidentally:
"mhttp://www.zen-cart.com/forum/newreply.php?do=newreply&noquote=1&p=380349y"
shouldn't be there at all.

I've moved the picture after the description in tpl_product_info.php and put a clearing break to temporarily get things working and restore the h1 formating but would still like to know how to have them live side by side.

Can I add specific formatting inside this file to change the width of the h1 and h2 to eliminate the overlap?

<h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
<!--eof Product Name-->

<!--bof Product Price block -->
<h2 id="productPrices" class="productGeneral">
<?php
// base price
  if ($show_onetime_charges_description == 'true') {
    $one_time = '<span >' . TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION . '</span><br />';
  } else {
    $one_time = '';
  }
  echo $one_time . ((zen_has_product_attributes_values((int)$_GET['products_id']) and $flag_show_product_info_starting_at == 1) ? TEXT_BASE_PRICE : '') . zen_get_products_display_price((int)$_GET['products_id']);
?></h2>

Actually, with a lot of research, I was able to dig up some information to try. It wasn't easy to locate and I wasn't sure exactly how to apply it because of the lack of details. It only required me to enter {float: right;} right after #productMainImage under the /Image Display/ section of the stylesheet.css file in the css folder of my template.

It went from this:

/Image Display/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}

To this:

/Image Display/
#productMainImage {float: right;}, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}

and my problem was solved. This section is quite a ways down the list. Hope it helps you.

Tony

Thanks!

Didn't seem to work for me left or right though it something I hadn't tried so what the hell. Funny, that fix comes up in a lot of threads for other stuff.

Almost starting to convince myself that the "fix" I did above to restore the h1 and h2 in the product (and change the layout in the process) actually looks better!

Still looking for a solution but it's one of those things that is at least working in some form so the heat's off. Never had a problem yet that hasn't been solved eventually, and usually, by the forum.

Appreciate your try, glad it fixed your issue. Nothing better than that Ah Ha! feeling after working something forever and finally finding the fix. Been there....