Eliminating wrap-arounds

The text description tends to wrap around the product info image.
In other words, when the text is a little long, instead of continuing neatly aligned it will continue below the image.
I have also uploaded a contrib from the downloads section
http://www.zen-cart.com/index.php?ma...roducts_id=241
This relocates the additional images which display at the bottom of the page, below the main product image.
Again, the problem is that attributes tend to wrap around this, thus causing the additional images to be juxtaposed.
You can see the problem here:
http://www.haiswigs.com/index.php?ma...&products_id=6
I have tried to increase width of the whole site, setting it even to 100%, but that doesn't fix the problem, the attributes rows don't break where they should.
Basically my question is: how do I achieve a tabular design of sorts?
Like having:
row, first cell, second cell with rowspan=2
row, cell with add'l image, cell with add'l image
You get the idea, everything neatly separated so nothing will overlap.
Also, I need the attributes to start always below this chunk of code.
Maybe I need to use a template.
Please help.
Thanks.

Here is another link to same page in IE:
http://www.haiswigs.com/index.php?ma...&products_id=6

Do you want the images to just display beneath each other?

Quote:

---

Originally Posted by designationlocutus

Do you want the images to just display beneath each other?

---

Well, yes, I would like the additional images to display under the product image.
But, in general, I would like to have more control over the page layout, because that is not the only issue.
Additional images are juxtaposed and attributes do not display neatly under the additional images, but are also overlaid.
I need to know how does Zen Cart control page layout, so I might be able to tweak those files to my needs.
Thanks for quick answer.

If anybody else wants to answer this thread, please be my guest.
I haven't got much so far, tested and uninstalled contribs. 41 and 43 of the donwloads/templates section but they mess up more than they solve for me.
I will now try ZenMagick to see if I can get results in page layout customization.

In your templates, look for the tpl_product_info_display.php file. It's not the easiest to read, but that's why the product info view is generated.

I'm not an expert so I have no concrete advice other than deciphering this file and then re-arranging it as you need.

Quote:

---

Originally Posted by ckosloff

If anybody else wants to answer this thread, please be my guest.
I haven't got much so far, tested and uninstalled contribs. 41 and 43 of the donwloads/templates section but they mess up more than they solve for me.
I will now try ZenMagick to see if I can get results in page layout customization.

---

Hey, thanks.
Will take a good look at that.
Your answer covers a lot, I know that I have to do a lot of hard work.

I got my additional images lined up vertically below my main image with this tweak in tpl_product_info.php:

PHP Code:

---

<div id="productImagesWrapper">
<!--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-->

<!--bof Additional Product Images -->
<?php
/**
 * display the products additional images
 */
  require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->
</div>

---

and this styling

Code:

---

       
#productImagesWrapper { /*gjh42 20070214*/
        width:200px;
        }
       
#productMainImage { /*gjh42 12/30/06*/
        width:200px;
        }
       
#productMainImage img {
        margin: 1em 0em 3em 0em ;
        float: right;
        }
#productAdditionalImages img { /*gjh42 20070329*/
        margin: 1em 0em 1em 0em ;
        float: right;
        }

---

All other elements have margin-left: 210px; so they line up in a column to the right of the pics. See my site for a visual.

These may give you an idea of how to set up your display.
You may need to remove some class="clearBoth" tags.

Thanks Glenn, for the detailed advice.
Checked out your site and although in progress, it looks great.
Will check this out in-depth and let you know if issues.
Best regards.

OK, I have done some progress and also messed things up.
The good news is that I achieved the tabular look simply by...inserting a table with an HTML editor, so those wrap-arounds are no more.
But...I still need additional images to display *vertically* under the main image.
I have tried a mod in the downloads section but it relocates images horizontally and messes up the whole look of the product info page.
It is basically a tweak to product_info_display.php.
Can somebody help with that?
Thanks!

Methinks that these files also need editing:
tpl_columnar_display.php
tpl_modules_additional_images.php

"But...I still need additional images to display *vertically* under the main image."

My code above for tpl_product_info_display.php does exactly that. Was there some reason that didn't work for you? How did you apply it?
How does your intention differ from my site's product info page?

Quote:

---

Originally Posted by gjh42

"But...I still need additional images to display *vertically* under the main image."

My code above for tpl_product_info_display.php does exactly that. Was there some reason that didn't work for you? How did you apply it?
How does your intention differ from my site's product info page?

---

Hey Glenn,
Thanks for fast reply.
Yes, I did apply your code copy-and-paste.
It messed up the site real bad creating duplicate images underneath.
Since my site is still in test mode (I am developing everything on a local site), I can recreate the effect for you to see.

"All other elements have margin-left: 210px; so they line up in a column to the right of the pics. See my site for a visual.
These may give you an idea of how to set up your display.
You may need to remove some class="clearBoth" tags."

----------------------------------------------------------------------

I didn't quite understand this last part, now I have already applied your code to the test site.
http://www.haiswigs.com/index.php?ma...&products_id=2
You will see what I mean.
Please I want to work with you to get this right.
Thanks.

If you pasted in the code from my post without removing the original code blocks, you would get duplicates.
The new div block should go in the place where the original main image code is.

It looks like you pasted in the new below the rest of the page code. You are getting three of the additional images on the middle row because they are narrower than the main image block. There is a setting in admin for number of additional images per row.

Quote:

---

Originally Posted by gjh42

If you pasted in the code from my post without removing the original code blocks, you would get duplicates.
The new div block should go in the place where the original main image code is.

It looks like you pasted in the new below the rest of the page code. You are getting three of the additional images on the middle row because they are narrower than the main image block. There is a setting in admin for number of additional images per row.

---

Yes, that's what I did, I pasted at the end of the page.
Could you please be more specific telling me where exactly the replaced text starts and ends?
<?php
/**
* Page Template
*
* Loaded automatically by index.php?main_page=product_info.<br />
* Displays details of a typical product
*
* @package templateSystem
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_product_info_display.php 5369 2006-12-23 10:55:52Z drbyte $
*/
//require(DIR_WS_MODULES . '/debug_blocks/product_info_prices.php');
?>
<div class="centerColumn" id="productGeneral">

<!--bof Form start-->
<?php echo zen_draw_form('cart_quantity', zen_href_link(zen_get_info_page($_GET['products_id']), zen_get_all_get_params(array('action')) . 'action=add_product'), 'post', 'enctype="multipart/form-data"') . "\n"; ?>
<!--eof Form start-->

<?php if ($messageStack->size('product_info') > 0) echo $messageStack->output('product_info'); ?>

<!--bof Category Icon -->
<?php if ($module_show_categories != 0) {?>
<?php
/**
* display the category icons
*/
require($template->get_template_dir('/tpl_modules_category_icon_display.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_category_icon_display.php'); ?>
<?php } ?>
<!--eof Category Icon -->

<!--bof Prev/Next top position -->
<?php if (PRODUCT_INFO_PREVIOUS_NEXT == 1 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?>
<?php
/**
* display the product previous/next helper
*/
require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?>
<?php } ?>
<!--eof Prev/Next top position-->

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

<!--bof Product Name-->
<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>
<!--eof Product Price block -->

<!--bof free ship icon -->
<?php if(zen_get_product_is_always_free_shipping($products_id_current) && $flag_show_product_info_free_shipping) { ?>
<div id="freeShippingIcon"><?php echo TEXT_PRODUCT_FREE_SHIPPING_ICON; ?></div>
<?php } ?>
<!--eof free ship icon -->

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

<!--bof Add to Cart Box -->
<?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
// do nothing
} else {
?>
<?php
$display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
// hide the quantity box and default to 1
$the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
} else {
// show the quantity box
$the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
}
$display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
?>
<?php if ($display_qty != '' or $display_button != '') { ?>
<div id="cartAdd">
<?php
echo $display_qty;
echo $display_button;
?>
</div>
<?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Add to Cart Box-->

<!--bof Product details list -->
<?php if ( (($flag_show_product_info_model == 1 and $products_model != '') or ($flag_show_product_info_weight == 1 and $products_weight !=0) or ($flag_show_product_info_quantity == 1) or ($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name))) ) { ?>
<ul id="productDetailsList" class="floatingBox back">
<?php echo (($flag_show_product_info_model == 1 and $products_model !='') ? '<li>' . TEXT_PRODUCT_MODEL . $products_model . '</li>' : '') . "\n"; ?>
<?php echo (($flag_show_product_info_weight == 1 and $products_weight !=0) ? '<li>' . TEXT_PRODUCT_WEIGHT . $products_weight . TEXT_PRODUCT_WEIGHT_UNIT . '</li>' : '') . "\n"; ?>
<?php echo (($flag_show_product_info_quantity == 1) ? '<li>' . $products_quantity . TEXT_PRODUCT_QUANTITY . '</li>' : '') . "\n"; ?>
<?php echo (($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name)) ? '<li>' . TEXT_PRODUCT_MANUFACTURER . $manufacturers_name . '</li>' : '') . "\n"; ?>
</ul>
<br class="clearBoth" />
<?php
}
?>
<!--eof Product details list -->

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

<!--bof Quantity Discounts table -->
<?php
if ($products_discount_type != 0) { ?>
<?php
/**
* display the products quantity discount
*/
require($template->get_template_dir('/tpl_modules_products_quantity_discounts.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_products_quantity_discounts.php'); ?>
<?php
}
?>
<!--eof Quantity Discounts table -->

<!--bof Additional Product Images -->
<?php
/**
* display the products additional images
*/
require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->

<!--bof Prev/Next bottom position -->
<?php if (PRODUCT_INFO_PREVIOUS_NEXT == 2 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?>
<?php
/**
* display the product previous/next helper
*/
require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?>
<?php } ?>
<!--eof Prev/Next bottom position -->

<!--bof Tell a Friend button -->
<?php
if ($flag_show_product_info_tell_a_friend == 1) { ?>
<div id="productTellFriendLink" class="buttonRow forward"><?php echo ($flag_show_product_info_tell_a_friend == 1 ? '<a href="' . zen_href_link(FILENAME_TELL_A_FRIEND, 'products_id=' . $_GET['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_TELLAFRIEND, BUTTON_TELLAFRIEND_ALT) . '</a>' : ''); ?></div>
<?php
}
?>
<!--eof Tell a Friend button -->

<!--bof Reviews button and count-->
<?php
if ($flag_show_product_info_reviews == 1) {
// if more than 0 reviews, then show reviews button; otherwise, show the "write review" button
if ($reviews->fields['count'] > 0 ) { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS, zen_get_all_get_params()) . '">' . zen_image_button(BUTTON_IMAGE_REVIEWS, BUTTON_REVIEWS_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<p class="reviewCount"><?php echo ($flag_show_product_info_reviews_count == 1 ? TEXT_CURRENT_REVIEWS . ' ' . $reviews->fields['count'] : ''); ?></p>
<?php } else { ?>
<div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, zen_get_all_get_params(array())) . '">' . zen_image_button(BUTTON_IMAGE_WRITE_REVIEW, BUTTON_WRITE_REVIEW_ALT) . '</a>'; ?></div>
<br class="clearBoth" />
<?php
}
}
?>
<!--eof Reviews button and count -->


<!--bof Product date added/available-->
<?php
if ($products_date_available > date('Y-m-d H:i:s')) {
if ($flag_show_product_info_date_available == 1) {
?>
<p id="productDateAvailable" class="productGeneral centeredContent"><?php echo sprintf(TEXT_DATE_AVAILABLE, zen_date_long($products_date_available)); ?></p>
<?php
}
} else {
if ($flag_show_product_info_date_added == 1) {
?>
<p id="productDateAdded" class="productGeneral centeredContent"><?php echo sprintf(TEXT_DATE_ADDED, zen_date_long($products_date_added)); ?></p>
<?php
} // $flag_show_product_info_date_added
}
?>
<!--eof Product date added/available -->

<!--bof Product URL -->
<?php
if (zen_not_null($products_url)) {
if ($flag_show_product_info_url == 1) {
?>
<p id="productInfoLink" class="productGeneral centeredContent"><?php echo sprintf(TEXT_MORE_INFORMATION, zen_href_link(FILENAME_REDIRECT, 'action=url&goto=' . urlencode($products_url), 'NONSSL', true, false)); ?></p>
<?php
} // $flag_show_product_info_url
}
?>
<!--eof Product URL -->

<!--bof also purchased products module-->
<?php require($template->get_template_dir('tpl_modules_also_purchased_products.php', DIR_WS_TEMPLATE, $current_page_base,'templates'). '/' . 'tpl_modules_also_purchased_products.php');?>
<!--eof also purchased products module-->

<!--bof Form close-->
</form>
<!--bof Form close-->
</div>

<div id="productImagesWrapper">
<!--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-->

<!--bof Additional Product Images -->
<?php
/**
* display the products additional images
*/
require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?>
<!--eof Additional Product Images -->
</div>

Replace the

<!--bof Main Product Image -->
...
<!--eof Main Product Image-->

block with the

<div id="productImagesWrapper">

block. Also remove or comment out the

<!--bof Additional Product Images -->
...
<!--eof Additional Product Images -->

block.

I'm working on it.
I realized that "number of additional images per row" should be set to 1 if you want them to display vertically.
I tried again the mod published in the downloads section and it works with that tweak, but not satisfactorily, a page break is missing somewhere.
Will try your mod now and let you know ASAP.
Many thanks for helping out!
This could eventually become a contrib to the downloads section.

OK, please take a look now.
I did all the tweaks but not satisfactory because images are not neatly aligned with links on the left side, and text is underneath instead of right-aligned.
I did eliminate the duplicates though, but there still is work to be done.
Thanks for the help.

The code and CSS was tailored to my site display, and may not be ideal for you.

I have the images aligned on their right edges, 200px from the left side of the container, and turned off the "larger image" text so never styled it.

You may want to change the width of #productImagesWrapper, and change some styling properties of other parts of that block.
The "larger image" text can be controlled by adding .imgLink { } and styling it (check the spelling).

It may help to remove some "clearBoth" classes - you might need to edit tpl_modules_additional_images.php to get to this bit. If I edited that, it was a while ago and I don't remember exactly now.
Went checking, and you need to edit not that but tpl_columnar_display.php to get rid of the clearBoth. Since tpl_columnar_display is used other places as well, you can't just rip out a line; you need a conditional statement to only skip it in the product info page:

PHP Code:

---


    <?php echo '<div' . $r_params . '>' . $list_box_contents[$row][$col]['text'] .  '</div>' . "\n"; ?>
<?php
      }
    }
if ($current_page_base != "product_info") { // gjh42 20070329 ?>
<br class="clearBoth" />
<?php }
  }
}
?>

---

This is at the end of the file (45 lines total!), and you just need to add the

if ($current_page_base != "product_info") { // gjh42 20070329 ?>

line, and shift/add some <?php and ?> tags to end up with the exact appearance shown.

Thanks so much for guidance.
I won't be able to respond immediately to this post since I have to do lots of testing to get the look that I need.
Will now restore the test site to defaults and test in a local site.
Will be back to this thread if ran into trouble.
Take care.

I achieved the look I need...but only in IE:(
http://www.haiswigs.com/index.php?ma...3db117ef213fdb
This is how I did it.
First, I deconstructed the mod already published in the downloads section, comparing it to the original file.
I found that it is a dated version of tpl_product_info_display.php, and hacked a lot to include tables.
More importantly, it places the additional images file right after product info.
So, then I checked your suggestion and found that it is based on a newer version of the file and includes a div that wraps it all up.
So I got the latest version of the file (1.3.7.1) and started hacking away on these basis: I should use the latest version of the file, I should use CSS and not tables, I should not use deprecated tags and it should be XHTML-compliant.
So, after testing, saw that I needed to include a <br class="clearBoth /> statement in the middle of the two files.
I also modified the Admin setting for Images to show additional images per row = 1.
Lastly, I created an id in the stylesheet by which the div should float left.
It works fine in IE, but Firefox shows an ugly kludge that I cannot fix.
I attempted:
1) floating additional images to left, it works but the text stays in the middle.
2) wrapping the product info description in a table, looks great in IE but even worse than without table in FF.
3) hacking the tpl_columnar_display.php as you suggested, but worse still, because of the br statement in the middle of the two files, and disruptive of the whole page.
The only thing that I can think of, for now, is to turn text off, so I will be able to float additional images left, without the text showing in the middle and pushing the product info description to the right.
So, how did you turn text off?

Testing on your site, I find that this works nicely to line up the additional images below your main image:

Code:

---

#productAdditionalImages .additionalImages img {
    float: left;
    margin-left: 20px;
    }

---

I eliminated the "larger image" text long ago by simply redefining it in /includes/languages/my_template/english.php:


define('TEXT_CLICK_TO_ENLARGE', 'larger image');


define('TEXT_CLICK_TO_ENLARGE', '');

When null, it is not displayed at all.

Thanks a lot for quick reply.
Yes, this style declaration will float additional images to left, and I can tweak the pixel amount.
I turned off text display, it really isn't the ideal solution for me, but we are trying to get it to work cross-browser.
Not yet there.
Something is still pushing the product info to the right, I don't think turning off text totally eliminated the problem.
Plus, the fact that it is not enclosed in a table causes it to wrap-around the images.

You never applied the styling in my example above, and that is an integral part of getting the layout to function.
The image wrapper needs a width, and the text parts all need margin-left:

Code:

---

#additionalImageWrapper {
    float : left;
    width:200px;
    }
h1#productName, h2#productPrices, #freeShippingIcon, #productDescription {
    margin-left:210px;
    }
h3#attribsOptionsText {
    margin-left:210px;
    }
.wrapperAttribsOptions {
    margin-left:210px;
    }

---

Adjust as you wish.

Hey Glenn,
Thanks again for the willingness to help.
I hate to give you a hard time but I have now uploaded all the style modifications you sent and still can't get the product info to the left.
I turned on text for you to see it more clearly, but it is the same with it turned off.
There is still something in the layout that is distorting the page.
Now, this only happens in Firefox, IE reacts to all this much more gracefully, so we have to target the way that browser renders this mod, IMHO.

Adding

#productAttributes { clear: both;}

will keep the "Please Choose" always below the add to cart box.

Other than that, I don't see anything really wrong with the page. What do you see as problems?

You can shrink the image wrapper width and the margin, if you wish to give more room for the text.
The slight differences in the left edge of text elements are due to some default style margins or padding applied to generic elements like <p>, <label> and the like. You can eliminate those by specifying things like
#productGeneral p {margin-left: none; padding-left: none;}
to avoid messing up other pages.

Use the Firefox Web Developer extension and especially its Information > Display Element Information tool to find out exactly what tags apply to each element.

And finally, it is almost always best to design for proper operation in Firefox, and then correct for any anomalies in IE. FF follows official web standards much more closely than IE, so you won't be tailoring your fundamental design to quirks.

Here is the key for controlling the additional images with their subtext:

Code:

---

#productAdditionalImages .additionalImages a {
    float: left;
    margin-left: 20px;
    }

---

Glenn,
I am using a laptop with a slow connection at present so unable to do much testing.
I will test in depth when I get back home, and post results here.
However there are a couple questions that you might field now:
1) "Firefox Web Developer extension and especially its Information > Display Element Information tool", is this what you used to find out what my style tags were?
2) I assume that this is the same thing as Firebug. I uninstalled this from my laptop because when tweaking the site online it was producing errors, e.g. unable to use Zen Cart's HTML editors. But I might use it on one of my local sites, where I do all the development. In fact, what you see online is like a showcase that I use to ask questions.
3) How do you look up what key does what? For example:
" #productAdditionalImages .additionalImages a {
float: left;
margin-left: 20px;
}
is the key for controlling the additional images with their subtext "
Did you find that out by using Firebug or is there something else?
I need to learn more...
Thanks.

Finally got the look I needed with the last set of instructions.
Now it is really cross-browser, except for minor differences which are unavoidable.
So this part of the ordeal is over, thank you SOOOO much.
Didn't have the time to upload yet but will do so later on.
Now, please answer the above question about Firebug and the rest.
Where did you learn so much about style?
This is very important so I will be less dependent on others answering questions.
Take your time and have a nice weekend.

ckosloff

I have now read this thread, and see what it is that you are trying to achieve. I would say one or two things about your web site, if I may. I still think that your images are too small, and in my browser it (seaMonkey) the mod 'works' just fine, but the text, particularly on the attribute images, is too small and indistinct.

There, is of course, a real danger that putting all the images stacked verically will cause the user to have to do what I just HATE - scroll down the page to see more! It's just so tiresome and, since you are trying to SELL, I would try to make the user's experience as simple as is feasible within the limitations of the zencart/web form so I would strive to display as much as possible (i.e. everything) visible at one go. How many times have you visited web sites where the pages just go on and on, and involve scrolling down and down? (I know most 'blogs' are like this, and other than the fact that most blogs are full of self-indulgent claptrap, this is the reason I have no time for blogs.)

As for CSS styles, I would suggest that you follow up on your collaborator's suggestion that you give the CSS styles unique 'names' and, of course don't include them in the code (cos the CSS styles will load every tiime with every new product 'page') - the CSS styles should be included in your template CSS file. Mastery of CSS will allow you to manipulate the format and appearance of much of your store. (I know my site is not a shining example, but take a look at the changes I have made to a zen cart site, mostly via CSS)

A good book on CSS is: CSS THE MISING MANUAL David Sawyer McFarland POGUE PRESS/O'REILLY 2006 ISBN-10: 0-596-52687-3 or ISBN-13: 978-0-596-52687-0 ***advert removed***

I don't know about firebug etc. so can't comment on that.

The Web Developer and Firebug are two different programs. I have only used Firebug a couple of times, so am not really familiar with it yet. Some parts of Web Developer are like the back of my hand, but other parts I haven't explored yet.

The Display Element Info tool is generally the first thing I use, and that will show lots of different things - the tags on the selected element, its ancestors and children, position and dimensions, any inline styling, font info...

CSS > View CSS lets you look comfortably at all stylesheets applied to the current page, and Edit CSS lets you try different things and see the results instantly.

View Source is obvious, and there is an Edit HTML tool similar to the CSS one.

I learned a lot about CSS from w3schools.com and a few other online resources, and a couple of books I bought on the subject... and a lot of experimentation.
For instance, there is a huge difference in meaning between h2#productPrices {} and
h2 #productPrices {}, but none of my sources emphasized that. (The first means an h2 heading with an id of productPrices, and the second means an h2 heading that has an element *inside* it with id productPrices.) They are not interchangeable.

Guys,
Overwhelmed by the feedback, thank you very much.
Again, don't worry too much about how the "site" looks.
I am uploading lots of stuff right now.
Regarding scrolling there is not much I can do about it, since I have lots of attributes, I'm trying to impact the customer at first glance as much as possible.
One q. for Glenn: I have already installed Firebug in my Firefox, is Web Developer a free extension that I can download from the Mozilla add-on site?
Haven't seen it so far.
For you to know: I am planning on writing a mod with detailed instructions on how to tweak additional images, since this is a recurrent theme in this area of the fora, and also because the mods that are available are very defective.
Unless you want to write it, of course.
I will give you full credit and mention this thread.
Hey Mike, point taken, no problem, I will buy the CSS book via your site.

OK, so I installed Web Developer and got to play around with it a little.
Great tool, and, contrary to Firebug, not intrusive, because you turn off the toolbar at will from the View menu.
What was confusing is that the names of the utility and that of the download area in the Mozilla site are similar.
So now I have a new toy to play around.
Thanks.

I had considered packaging a mod for the additional images, but decided it was so simple a change to the code (move a block and add a <div> and </div>) that it wasn't worth the bother. If you include the tweaks for styling and other information, it could be quite useful, and if you are willing to write it up, be my guest. I have plenty of other things to do. The more people helping with contributions, the better.

Actually I am very lazy.
That is why I tried first the published mods in the download area.
But they are very lackadaisical and obsolete, and will mess up your site more than help.
So I had to start thinking, testing, and learning.
I know it is very simple once you understand it, getting there is the tough part.
So I'll give it a shot and submit to the gods of Zen Cart.
Better to have a mod based on latest versions of file than those old kludges out there.

Quote:

---

Originally Posted by ckosloff

Actually I am very lazy.
That is why I tried first the published mods in the download area.
But they are very lackadaisical and obsolete, and will mess up your site more than help.
So I had to start thinking, testing, and learning.
I know it is very simple once you understand it, getting there is the tough part.
So I'll give it a shot and submit to the gods of Zen Cart.
Better to have a mod based on latest versions of file than those old kludges out there.

---

ckosloff

I am not sure that I would subscribe to the view about you being v. lazy. You are certainly thorough!!

Way to go about your idea to post info about the mod, but don't forget that there are a lot of New Zenners out there who don't know the terminology - I would suggest that you keep things as simple as possible.

Good luck with the submission, and if you need a proof-reader or somebody to look over your work prior to submission, please don't hesitate to send me a PM.

Will do.
I already drafted the text and it is as simple as possible.
Anyway will take my time to check everything and rewrite as needed.
I will certainly send the mod to you and Glenn for input before submission.

Guys,
I have already drafted the text and built the folder structure for this mod.
But, very embarrassed to admit it, I am having trouble packaging the mod in a zip file.
I am using Winzip Pro 11, I can of course package the files but I don't see the folder structure.
Any suggestions welcome.
As soon as I overcome this hurdle will submit to you guys by attaching the mod here.
Only after your input will I submit to the Olympus of Zen Cart.

I use 7zip (and have a six-year-old trial copy of Winzip:) so can't comment on how to use Winzip Pro 11... sorry...

Quote:

---

Originally Posted by gjh42

I use 7zip (and have a six-year-old trial copy of Winzip:) so can't comment on how to use Winzip Pro 11... sorry...

---

I'll find out eventually, don't worry.
It's only that I am lazy and prefer to ask.
Thanks.

And finally here is THE additional images relocated with style contribution.
Feel free to tear it down, I will consider all suggestions.
Thanks.

Without having actually tested it yet, I have just a few suggestions:

tpl_product_info_display.php looks fine, but it would be good to include a comment in the top section about the purpose and date of the specific change.

Everyone already has a modified stylesheet, and the stylesheet.css would erase their changes if carelessly uploaded.
It would be better to put only the modified stylesheet sections in a file named stylesheet_additional_images.css or something, so they could safely and easily be added/merged with the existing.

It would be helpful to put the date, title, version and other "header" info at the top of the readme. I would also suggest putting the whole CSS block there for easy reference, as it is not very large.
For consistency with other tags, it might be better to name the wrapper #additionalImagesWrapper, or perhaps #productImagesWrapper since it is for all the product images, not just additional ones.

/*beginning of additional images code*/

#additionalImageWrapper {
float: left;
width: 120px
}

#productAdditionalImages .additionalImages a {
float: left;
margin-left: 10px;
}

/*end of additional images code*/

One typo - "root/includes/templates/your_template/templates/tpl_product_display_info.php contains "

Good work so far, and I will test it when I have time tonight - I don't expect any difficulties.

Allrighty then.
Behold the birth of version 1.0 (open to further suggestions).
Thanks.

Sorry for the long delay in replying. The package looks fine now, with one exception: you really should not have "stylesheet.css" in the includes - you should instead put the added declarations by themselves in a file called something like stylesheet_additional_images.css. You can include a comment that the code would best be added to the main stylesheet instead of loading another css file; but this will function just fine if uploaded alongside the user's stylesheet with no risk of adverse consequences.

I can guarantee that if you put stylesheet.css in the package, someone would ignore all instructions and upload it as is, erasing their own custom stylesheet (which they would not have backed up), and then come crying for help which we would not be able to give.

So go ahead and submit this mod, and thank you for doing this.

Hear, hear!!

gotcha y'all.
I have been travelling for business the whole week so unable to answer in a timely manner, sorry about that.
Please note that the added declarations are already in the readme, with thorough explanations.
But caution is warranted, so instead of the standard stylesheet + the mod, I will create an additional stylesheet with just the mod, to be uploaded in same folder.
I will also add a comment at the top suggesting that it would be best to just add the code to the custom stylesheet instead of loading one too many, but that it would work either way.
Thank you so much for the input, I think this mod will clear many recurrent questions and stimulate creativity.

Oh, don't worry about the testing.
I have already loaded literally hundreds of pages, and they all work great both in IE and FF.
Later.

Hello,
I uploaded your files into the respective folders required.
When I go to load up a new product or edit and old product, I seem to be only getting the choice to add one picture file, same as before.

What have I done wrong?

I renamed my old display.php file original_info_display and uploaded tpl_product_info_display.php into templates/freeblue/templates

I uploaded the Additional_images_stylesheet.css into my templates/freeblue/css folder leaving the original stylesheet_new.css

www.newmanz.co.nz/zen

I just learned that v. 1.0 of this contribution is available for download in the templates section, it includes the latest modifications that we discussed here.
It has been reviewed by the Zen Cart team, and approved.
Hoorray!!!
Now, Newmanz, is this what you downloaded?
Second, your problem apparently has nothing to do with the files, Zen Cart will only allow you to upload ONE main product image.
The other images you upload manually, following the Zen Cart naming convention, into the same folder as main image.
e.g. MainImage_01, MainImage_02, etc.
You can also use alphabetical characters or a combination of both:
MainImage_a , MainImage_b, etc.
Always use just one underscore _, OK?
There is a lot more in the Manual pp. 203-207.
There is also a FAQ by Ajeh
https://www.zen-cart.com/tutorials/index.php?article=58
After you understand that, you can use Image Handler to upload additional images for you.
Dig into that first, and then be back to us if problems.
Hope this helps.

I've been kicking about in the CSS for a few days and have hit a brick wall with regards to the layout of the additional images. I've used the mod from the downloads section on my site as illustrated here .. http://www.1300ad.co.nz/store/index....roducts_id=181 but I just can't get the images to align. Ideal scenario is image(s) alignment on the left and text on the right (text contained so that it doesn't wrap around the images, in more of a columnar style)

Feel free to throw eggs at me if it's been asked already. Perhaps it's simply my comprehension but even a simple suggestion to get this behind me would be most appreciated. I've a moderate understanding of CSS and guff but certainly no expert.

:frusty:

Have you solved your problem since posting this? I don't see anything wrong with your display. (In Firefox 2)

Yeah, I've literally been trying for about a week, had a moment of realisation last night and.. problem solved. Simply used a different module which just replaced the product_info (I think) page. Decreased ease of customisation as it's not css but still.. I'm content. I'm learning as I go.

Can't get the hoverbox2 addon to work but that's for another thread..

But, thanks for pointing me to the forums gjh42.

Quote:

---

Originally Posted by rplatt

Yeah, I've literally been trying for about a week, had a moment of realisation last night and.. problem solved. Simply used a different module which just replaced the product_info (I think) page. Decreased ease of customisation as it's not css but still.. I'm content. I'm learning as I go.

Can't get the hoverbox2 addon to work but that's for another thread..

But, thanks for pointing me to the forums gjh42.

---

I have been away from the forums for a few days.
I wouldn't suggest that you use a different module, the template in the downloads section is based on the latest Zen Cart version.
To solve the wrap-around the images problem I simply use a table for the text of the product description if its too long.
There may be other solutions using CSS, but more involved, tables work fine for now.

A very simple way of keeping the description from wrapping around the images is to specify in the stylesheet

Code:

---

#productDescription {
  margin-left: 210px;
    }

---

or whatever fits appropriately.

You can add the same margin to other elements like the product details, attributes and add to cart button.

How does this contribution turn on to function? Both files are up and i added the additional lines to my stylesheet and I don't see where to upload extra pics.

Thanks in advance.

This mod does not deal with uploading images, it simply handles their display after they are uploaded.

You have to name your additional images to go along with the base product image, and upload them by FTP to the appropriate place in your /images/ folder. See the FAQ/tutorials for complete info.

I did that, thanks. Still not working. I am working with one product at a time . All aditional images are uploded to the images folder:

image.jpg
image_1
image_2.jpg
etc

What setting do you have for Configuration > Images > Product Info - Number of Additional Images per Row ?

3 Also, the css addition caused my description to expand over my image.

The additional images showing on your site now are part of the description (looking at the Kyosho EP JET Illusion Blue). Do you have any that are currently supposed to be "additional images"? The layout with comments under each image does not look like it would lend itself to this mod.

Take a look at Sailboats -> Fairwind III

The additional images section is there, but not trying to display any images... not much more I can say from this end. What is your Additional Images per Row setting?

4 images per row.

I removed the css addition because it was starting description text over the image.

Since you are using Image Handler 2, that may be the next stop to see what could be happening. It puts files in bmz_cache with hashed names, so is not decipherable by humans.

ok. back to IH2.

Hi
I too have a question
i too made the changes but if i put a new product it stiil looks like before.Best if i show you:
Product 1: http://www.promedia-electronics.ro/i...roducts_id=783

Product 2: http://www.promedia-electronics.ro/i...roducts_id=784

what can be the problem?

What is your setting for admin > Configuration > Images > Product Info - Number of Additional Images per Row?

OK, I'm driving myself crazy with this now! :no: I would like to have my product page layout be as shown in this screen grab:
http://www.italianglassconnection.com/images/test.jpg
With the add to cart more or less aligned with the image (Where the 3 xxx's sit). This placement would also hopefully pull the productDescription up tight against the bottom of the image, eliminating some of that dead space.

I'm running zen 1.3.8a - IH2 - Faul Slimbox - Cherry Zen Template - admin > Configuration > Images > Product Info - Number of Additional Images per Row set to 3

Thanks for any help!!

The #cartAdd will never move where you want while it is inside the #leftFloat div. You have a number of nested levels which I don't have time to unravel right now, but they will need to be straightened out and #cartAdd freed from entanglements so it can move - then the CSS can be tweaked. You also have a <br /> with clear: left; which specifically forbids it to be above the bottom of the preceding element (the main image etc.)

Quote:

---

Originally Posted by gjh42

The #cartAdd will never move where you want while it is inside the #leftFloat div. You have a number of nested levels which I don't have time to unravel right now, but they will need to be straightened out and #cartAdd freed from entanglements so it can move - then the CSS can be tweaked. You also have a <br /> with clear: left; which specifically forbids it to be above the bottom of the preceding element (the main image etc.)

---

Thanks Glenn - I'll look again at this thread and and my configuation and see what I can work out.

Hello guys,

Long time no see.
Well, I'm back, that's the important thing, and with great news.
I have packaged a new version of the contrib., this time based on 1.3.8a.
From the contrib's readme:
"But, later on I discovered that if the product description was longer than the main product image plus the additional images, it would wrap around them.
The solution was to create another wrapper for the product description, only you don't need to move anything for this one, since all the code blocks are already directly underneath the first wrapper.
By creating another wrapper, and controlling it via CSS, the result is the complete elimination of tables for product layout.
Moreover, you can add a background color to your product description, thus enhancing the visual appeal."
This rewritten version works really great in my 1.3.8a test site, have already taken it for a ride and tried by all means to bring it down, but it rides strong.
Reviewers needed!
As soon as I get reviews will submit to Zen Cart.
Hint for guru gjh42.

Quote:

---

Originally Posted by ckosloff

Hello guys,

Long time no see.
Well, I'm back, that's the important thing, and with great news.
I have packaged a new version of the contrib., this time based on 1.3.8a.
From the contrib's readme:
"But, later on I discovered that if the product description was longer than the main product image plus the additional images, it would wrap around them.
The solution was to create another wrapper for the product description, only you don't need to move anything for this one, since all the code blocks are already directly underneath the first wrapper.
By creating another wrapper, and controlling it via CSS, the result is the complete elimination of tables for product layout.
Moreover, you can add a background color to your product description, thus enhancing the visual appeal."
This rewritten version works really great in my 1.3.8a test site, have already taken it for a ride and tried by all means to bring it down, but it rides strong.
Reviewers needed!
As soon as I get reviews will submit to Zen Cart.
Hint for guru gjh42.

---

Hi ckosloff,

It is me again, thanks for your support in the flyout menu

for the product info page, is it possible to have the following effect?

http://www.locomolife.com/swap%20test.htm

This is a simple HTML (without any java scripts) I built for my ebay listings. I think this is really a good presentation to buyer in terms of design and convenience

will you consider to include this effect in your coming version?

Await your good news!

Not for the moment, what I tried to achieve in this mod. was simply a neat and simple display of product that could swiftly impact the buyer.
Extra effects are up to the user, myself I use Image Handler and Lightbox, but I don't intend to mix those into a very simple presentation of product.
By the way, the last version is already up in the downloads section, I will delete the one in the thread.

Quote:

---

Originally Posted by ckosloff

Not for the moment, what I tried to achieve in this mod. was simply a neat and simple display of product that could swiftly impact the buyer.
Extra effects are up to the user, myself I use Image Handler and Lightbox, but I don't intend to mix those into a very simple presentation of product.
By the way, the last version is already up in the downloads section, I will delete the one in the thread.

---

great work!

as you are using IH2 and Light box, I can suppose that this contribution is compatible with IH2 and light box, rite?

This contrib. is compatible with anything you like, it is just a way to re-arrange the display of product.
You can use IH2, Lightbox, Fual Slimbox, or any other mod. you like.
All these mods. have their support threads, we don't discuss them here.

Quote:

---

Originally Posted by ckosloff

This contrib. is compatible with anything you like, it is just a way to re-arrange the display of product.
You can use IH2, Lightbox, Fual Slimbox, or any other mod. you like.
All these mods. have their support threads, we don't discuss them here.

---

so here is my test result with very little modification:
http://www.locomolife.com/zen/index....&products_id=8

Anyway that I can have the product description right under the product name wihtout such big space; also, I want to have the weight, stock qty right under additional images

How should I code them?

ps: I want to have 2 additional image per role but it skewed up in IE7...

thanks

You are doing something wrong.
In the contrib the product description is right under the name, there is no space.
I am now working on a totally revised version of my website, when it's online you'll see what I mean.
To show stock you need a mod called "Stock by Attributes", there is a support thread for that.
To show shipping weight under product description there is a setting in Admin.
All this is in the Zen Cart manual, you should really get a hold of that.
Catalog --> Product Types --> Product General --> Edit Layout --> Show Weight (true), you can also enable show attribute weight.

Quote:

---

Originally Posted by ckosloff

You are doing something wrong.
In the contrib the product description is right under the name, there is no space.
I am now working on a totally revised version of my website, when it's online you'll see what I mean.
To show stock you need a mod called "Stock by Attributes", there is a support thread for that.
To show shipping weight under product description there is a setting in Admin.
All this is in the Zen Cart manual, you should really get a hold of that.
Catalog --> Product Types --> Product General --> Edit Layout --> Show Weight (true), you can also enable show attribute weight.

---

Hi ckosloff, yes I knew how to turn on the weight, stock etc, but what I don't know is how to put them in the right place

as you may see, the description is now under addditional images, while stock, weight, etc are under the description

but anyway, maybe I shall wait for your update version?

thanks!

You need the Web Developer toolbar, this will tell you what each element is and then you place them using CSS.
Obviously this will not be included in any next version.

Is there a way of controlling the height of the description box, so the add cart box will lie directly under it no matter how long the product description text is?

Also just tested my site on IE browser and the layout is all over the place, and multiple images don't show. Anyone else have problems with IE?

Are you using the latest version of the contribution?
http://www.zen-cart.com/index.php?ma...roducts_id=672

Yes.

I removed the css stylesheet, and everything was fine though. So there must me something wrong with it. Can you spot anything:

Quote:

---

/*beginning of Product Display code*/
#productImageWrapper {
float: left;
width: 120px;
}

#productDescriptionWrapper {
width: 320px;
margin-left: 380px;
background-color: #FFFFF;
}

#productAdditionalImages .additionalImages a {
float: left;
margin-left: 10px;
}
/* end of Product Display code */

---

http://monkeypeach.co.uk/index.php?m...products_id=12

The stylesheet is there for your convenience, as an example.
It is clear from the instructions that you have to customize it.
It is just something that works on my site, it might not work in yours.
However, the selectors that you have to use are there, just play around with the values.

margin-left: 380px;

value in included stylesheet is 120px;
380 seems way overblown.

I guess I'll have to use another way of getting the additional images under the main pic.

380 isn't overblown when you consider how small your main image is to mine. ;) It would overlap otherwise.

You can make a thumbnail of large image and a link to it, or use Lightbox as I do.
Try clicking on any main image in my site and you will see what I mean.

#productImageWrapper {
float: left;
width: 120px;
}

If you need 380px of margin to clear your main image, limiting the image wrapper to 120px is likely to cause problems.

Quote:

---

Originally Posted by gjh42

#productimagewrapper {
float: Left;
width: 120px;
}

if you need 380px of margin to clear your main image, limiting the image wrapper to 120px is likely to cause problems.

---

welcome back!!

Hi,

I installed this mod but my product description fall below the pics in IE how can I fix that. Here is the preview page:

http://localautonj.com/zencart/index...&products_id=6

Quote:

---

Originally Posted by kpeer410

Hi,

I installed this mod but my product description fall below the pics in IE how can I fix that. Here is the preview page:

http://localautonj.com/zencart/index...&products_id=6

---

Try commenting out line 72 of tpl_product_info_display.php, like so:
/* <br class="clearBoth" /> */
Let me know the outcome, please.
There's another one on line 113, try that one too.

One more thing: I am pulling the class "clearboth" from the main stylesheet; if you tweaked the stylesheet, and the class isn't there, it won't work.
You might want to use HTML instead, like so:
<br clear="both" />

I commented out both lines and still the same.

Quote:

---

Originally Posted by kpeer410

I commented out both lines and still the same.

---

The only thing that can cause that effect is the <br /> tag, discussed above.
Try using the html version, or reuploading the template to your site, maybe it got corrupt over ftp transfer.
Please post your main CSS, additional images CSS, and template you are using in a zip file here, so I might take a look.
Thanks.

I haven't used this Mod but in checking code for the page mentioned, I can see there are coding errors in the UL that should be corrected.

Incorrect
<ul><br /><li>Vehicle Make: Ford<br /><li>Vehicle Model: Explorer<br /><li> ...

Correct
<ul><li>Vehicle Make: Ford</li><li>Vehicle Model: Explorer</li><li> ...


After that, if IE is still giving you problems, see if you can make the width of your id="productDescription" DIV smaller. Right now it is 320px which might be too wide for IE. Try 300px and see what happens.

I think the problem is solved because I am drawing a brainfreeze on where to find id="productDescription" to adjust the px. So I went into the additional images sheet and adjust the 295px to 270px and that fixed it. But I would like to adjust the id="productDescription" px. What sheet is that on?

That is CSS coding so it should be in your 'stylesheet.css' file.
If not, insert it and add your own selective. (i.e. width:300px)

You still have errors with your UL code. All<li> need a closing </li>

Quote:

---

Originally Posted by Website Rob

That is CSS coding so it should be in your 'stylesheet.css' file.
If not, insert it and add your own selective. (i.e. width:300px)

You still have errors with your UL code. All<li> need a closing </li>

---

Firefox is more forgiving of these errors than IE, that is one probable cause for different behaviors.
You can find
#productDescriptionWrapper {
width: 320px;
margin-left: 120px;
background-color: #f0e68c;
}
in your stylesheet_additional_images.css

Also, you shouldn't put a <br /> inside a ul.
The li tag creates a line by itself.
Syntax is like so:
<ul>
<li>blah</li>
<li>blah</li>
<li>blah</li>
</ul>