Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Eliminating wrap-arounds

Eliminating wrap-arounds

Views: 41,461

Results 1 to 20 of 166
3 Jul 2007, 7:32 PM
#1
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

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?main_page=product_contrib_info&cPath=40_53&products_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?main_page=product_info&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.

3 Jul 2007, 8:37 PM
#3
designationlocutus avatar

designationlocutus

New Zenner

Join Date:
Oct 2005
Posts:
17
Plugin Contributions:
0

Re: Eliminating wrap-arounds

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

4 Jul 2007, 1:52 AM
#4
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

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.

4 Jul 2007, 9:26 PM
#5
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

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.

4 Jul 2007, 10:42 PM
#6
solarflare avatar

solarflare

Zen Follower

Join Date:
Sep 2006
Posts:
81
Plugin Contributions:
0

Re: Eliminating wrap-arounds

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.

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.

5 Jul 2007, 1:33 AM
#7
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

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.

5 Jul 2007, 5:53 AM
#8
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Eliminating wrap-arounds

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

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

#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.
5 Jul 2007, 5:14 PM
#9
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

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.

11 Jul 2007, 4:29 PM
#10
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

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!

11 Jul 2007, 4:38 PM
#11
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

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

11 Jul 2007, 6:22 PM
#12
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Eliminating wrap-arounds

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

11 Jul 2007, 7:39 PM
#13
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

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.

11 Jul 2007, 7:52 PM
#14
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

"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?main_page=product_info&products_id=2
You will see what I mean.
Please I want to work with you to get this right.
Thanks.

11 Jul 2007, 8:06 PM
#15
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Eliminating wrap-arounds

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.

11 Jul 2007, 8:35 PM
#16
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

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>
11 Jul 2007, 8:41 PM
#17
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Eliminating wrap-arounds

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.

11 Jul 2007, 9:08 PM
#18
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

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.

11 Jul 2007, 9:37 PM
#19
ckosloff avatar

ckosloff

Totally Zenned

Join Date:
Feb 2007
Location:
South Florida, USA
Posts:
1,375
Plugin Contributions:
0

Re: Eliminating wrap-arounds

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.

11 Jul 2007, 10:20 PM
#20
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Eliminating wrap-arounds

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