ShopSite Forums

by **ShopSite Lauren** » Wed Nov 05, 2014 11:42 am

Responsive Design means that the page layout (page widths, image dimensions, text size, etc) changes based on the width of the device/browser viewing your webpage. Many times, web pages will resize images using CSS by setting a max-width of 100% for all images, so they never stretch beyond the space they are in. This is the reason that the TABLE driven template squishes images. Tables are inherently flexible, so the cell containing the text is as wide as possible, and the cell containing the image is only as wide as the image forces it. If the CSS for the page has max-width: 100% set for that image, then the image is squished because the table cell is too small, the table cell is too small because it is waiting the the image to push it wider, but the image isn't going to push it wider because the CSS is telling it to always only be as wide as the container it is in (see the cycle?). DIVs can be set to not be inherently flexible like tables, so they avoid this issue. I hope this helps explain why the DIV template works and the TABLE template doesn't, because your web pages are responsive.

This same CSS is still causing issues because your image has dimensions setup (such as height="100" width="60") within the image code itself. So the CSS in your web page is saying the width can only be 100% of the space available, and the DIV is setting the amount of space available (which is based off a width of the space, not the width of the image). The DIV is smaller than the image, so the width of the image is adjusted, but the CSS doesn't do anything with the height, so the width is smaller, but the height remains the same (such as height="100" width="40"). To avoid this, you need to remove the image properties within the image itself so that the image size will be based off the CSS specifications, instead of a mix of CSS and HTML which aren't working together.

Solution: In the template I sent, you will see the tag [-- PRODUCT.Graphic ONLY_ALT_TAG --] (it is in the template a few times). The PRODUCT.Graphic part of the tag pulls in what you have specified for the product graphic. The ONLY_ALT_TAG changes the product <img> tag to ONLY include the URL for the image and the alt attribute (image description) for the image, and it leaves off all other settings such as height, width, hspace, vspace, border, etc. The reason this is not working in your store is that the tag parameter ONLY_ALT_TAG was added in ShopSite version 12, but your store is a version 11, so the tag [-- PRODUCT.Graphic ONLY_ALT_TAG --], is returning the image with the image parameters. You can 'build your own image code' by replacing all instances of [-- PRODUCT.Graphic ONLY_ALT_TAG --] with <img src="[-- OUTPUT_DIRECTORY_URL --]/media/[-- IMAGE PRODUCT.Graphic --]" alt="[-- PRODUCT.Name REMOVE_HTML --]"> (assuming your product images have been uploaded into ShopSite, if they have not, and you are specifying the entire URL for your product images under Products > Edit Product Info, then leave off the [-- OUTPUT_DIRECTORY_URL --]/media/).

by **hammer** » Wed Nov 05, 2014 12:30 pm

Thank you Loren,

I can't find those strings in the code you sent me to create the product template.

em_basiclayoutDIVs.sst

Here is the code I am using:

Code: Select all: [-- DEFINE SUBPRODUCT --] <input type="radio" name="itemnum" value="[-- PRODUCT.RecordNumber --]"> [-- PRODUCT.Name --] [-- IF PRODUCT.DisplayPrice --][-- IF PRODUCT.SaleAmount --][-- IF PRODUCT.SaleOn --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --] [-- STORE.OnSaleText --][-- PRODUCT.PriceStyle End --][-- ELSE --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.Price --][-- PRODUCT.PriceStyle End --][-- END_IF --][-- ELSE --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.Price --][-- PRODUCT.PriceStyle End --][-- END_IF --][-- END_IF --] [-- END_DEFINE SUBPRODUCT --] [-- DEFINE PRODUCT --] <style type="text/css"> #ss_em_pr {margin: 0px; padding: 0px; max-width: 100%;} #ss_em_pr, #ss_em_pr td {font-family: [-- IF STORE.Font --][-- STORE.Font --][-- ELSE --]arial, helvetica, sans-serif[-- END_IF --]; font-size: [-- IF STORE.FontSize --][-- STORE.FontSize --][-- ELSE --]10pt[-- END_IF --]; color: #[-- STORE.TextColor --];} #ss_em_pr .pr_name, #ss_em_pr .pr_sku, #ss_em_pr .pr_price, #ss_em_pr input.add {display: block;} #ss_em_pr input.add_text {border: 0px; background: #[-- STORE.LinkColor --]; color: #FFFFFF; font-weight: normal; font-size: 100%; margin: 5px 0px; padding: 8px 12px; clear: both; border-radius: 3px;} #ss_em_pr .pr_price {padding: 10px 0px;} #ss_em_pr .pr_price strike {display: block; font-size: 80%;} #ss_em_pr .pr_variable {line-height: 180%;} #ss_em_pr .Bold, #ss_em_pr .bold {font-weight: bold;} #ss_em_pr .Big, #ss_em_pr .big {font-size: 120%;} #ss_em_pr .Small, #ss_em_pr .small {font-size: 80%;} #ss_em_pr .Italic, #ss_em_pr .italic {font-style: italic;} .right {text-align: right;} .left {text-align: left;} .ss-graphic img, .ss-graphic-left img, .ss-graphic-right img {max-width: 100%; width: 100%;} .ss-graphic, .ss-productinfo {clear: both; padding: 0px 0px 10px 0px; text-align: center; margin: 0px auto;} .ss-productinfo table {margin: 0px auto;} .ss-graphic-right {float: right; width: 50%; max-width: 50%; clear: none; padding: 0px 0px 10px 0px; margin: 0px; text-align: center;} .ss-productinfo-left {float: left; width: 46%; max-width: 46%; clear: none; padding: 0px 0px 10px 0px; margin: 0px; text-align: left;} .ss-graphic-left {float: left; clear: none; width: 46%; max-width: 46%; padding: 0px 0px 10px 0px; margin: 0px; text-align: center;} .ss-productinfo-right {float: right; clear: none; width: 50%; max-width: 50%; padding: 0px 0px 10px 0px; margin: 0px; text-align: left;} .ss-productdescription {clear: both; padding: 5px 0px 10px 0px; margin: 0px auto; text-align: left;} .ss-subproducts, .ss-variables {clear: both; padding: 10px 0px; margin: 0px auto;} .clear {clear: both; padding: 0px; margin: 0px;} input.add {margin-left: auto; margin-right: auto;} </style> <div id="ss_em_pr"> [-- IF PRODUCT.ImageAlignment "Center" --] [-- IF PRODUCT.DisplayGraphic --] [-- IF PRODUCT.Graphic --] <div class="ss-graphic">[-- PRODUCT.Graphic ONLY_ALT_TAG --]</div> [-- END_IF --] [-- END_IF --] <div class="ss-productinfo"> [-- ELSE_IF PRODUCT.ImageAlignment "Right" --] [-- IF PRODUCT.DisplayGraphic --] [-- IF PRODUCT.Graphic --] <div class="ss-graphic[-- IF PRODUCT.TextWrap "On" --]-right[-- ELSE --] right[-- END_IF --]">[-- PRODUCT.Graphic ONLY_ALT_TAG --]</div> [-- END_IF --] [-- END_IF --] <div class="ss-productinfo[-- IF PRODUCT.TextWrap "On" --]-left[-- END_IF --]"> [-- ELSE_IF PRODUCT.DisplayGraphic --] [-- IF PRODUCT.Graphic --] <div class="ss-graphic[-- IF PRODUCT.TextWrap "On" --]-left[-- ELSE --] left[-- END_IF --]">[-- PRODUCT.Graphic ONLY_ALT_TAG --]</div> <div class="ss-productinfo[-- IF PRODUCT.TextWrap "On" --]-right[-- END_IF --]"> [-- END_IF --] [-- END_IF --] [-- IF PRODUCT.VariablePrice? --] [-- IF PRODUCT.VariableName? --] [-- ELSE_IF PRODUCT.DisplayName --] <span class="pr_name [-- PRODUCT.NameSize --] [-- PRODUCT.NameStyle --]">[-- PRODUCT.Name --]</span> [-- END_IF --] [-- ELSE_IF PRODUCT.DisplayName --] <span class="pr_name [-- PRODUCT.NameSize --] [-- PRODUCT.NameStyle --]">[-- PRODUCT.Name --]</span> [-- END_IF --] [-- IF PRODUCT.VariablePrice? --] [-- IF PRODUCT.VariableSKU? --] [-- ELSE_IF PRODUCT.DisplaySKU --] [-- IF PRODUCT.Sku --] <span class="pr_sku [-- PRODUCT.SKUSize --] [-- PRODUCT.SKUStyle --]">[-- PRODUCT.Sku --]</span> [-- END_IF --] [-- END_IF --] [-- ELSE_IF PRODUCT.DisplaySku --] [-- IF PRODUCT.Sku --] <span class="pr_sku [-- PRODUCT.SKUSize --] [-- PRODUCT.SKUStyle --]">[-- PRODUCT.Sku --]</span> [-- END_IF --] [-- END_IF --] [-- IF PRODUCT.ProductDescription --] [-- PRODUCT.DescriptionStyle Begin --][-- PRODUCT.DescriptionSize Begin --][-- PRODUCT.ProductDescription --][-- PRODUCT.DescriptionSize End --][-- PRODUCT.DescriptionStyle End --] [-- END_IF --] [-- IF PRODUCT.SubProduct --] [-- ELSE_IF PRODUCT.VariablePrice? --] [-- ELSE_IF PRODUCT.QuantityPricing --] [-- PRODUCT.QuantityPricing --] [-- ELSE_IF PRODUCT.DisplayPrice --] <span class="pr_price [-- PRODUCT.PriceSize --] [-- PRODUCT.PriceStyle --]"> [-- IF PRODUCT.SaleAmount --] [-- IF PRODUCT.SaleOn --] [-- STORE.Price --]: [-- PRODUCT.SaleAmount --] [-- STORE.OnSaleText --] [-- IF PRODUCT.AltPrice --]<br>[-- PRODUCT.AltSaleAmount --][-- END_IF --] <strike>[-- STORE.Price --]: [-- PRODUCT.Price --][-- IF PRODUCT.AltPrice --]<br>[-- PRODUCT.AltPrice --][-- END_IF --]</strike> [-- ELSE --] [-- STORE.Price --]: [-- PRODUCT.Price --] [-- IF PRODUCT.AltPrice --]<br>[-- PRODUCT.AltPrice --][-- END_IF --] [-- END_IF --] [-- ELSE --] [-- STORE.Price --]: [-- PRODUCT.Price --] [-- IF PRODUCT.AltPrice --]<br>[-- PRODUCT.AltPrice --][-- END_IF --] [-- END_IF --] </span> [-- END_IF --] [-- IF PRODUCT.Subproduct --] <form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post"> <input type="hidden" name="storeid" value="[-- STORE.ID --]"> <input type="hidden" name="dbname" value="products"> <input type="hidden" name="function" value="add"> <br> [-- LOOP SUBPRODUCTS --] [-- SUBPRODUCTS em_BasicLayout.sst --]<br> [-- END_LOOP SUBPRODUCTS --]<br> [-- IF ADDIMAGE? --] <input class="add" type="image" [--ADDIMAGE--]> [-- ELSE --] <input class="add_text" type="submit" value="[-- ADDTEXT --]"> [-- END_IF --] </form> [-- ELSE_IF PRODUCT.UseMultiMenus checked --] [-- ELSE --] <form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post"> <input type="hidden" name="storeid" value="[-- STORE.ID --]"> <input type="hidden" name="dbname" value="products"> <input type="hidden" name="function" value="add"> <input type="hidden" name="itemnum" value="[-- PRODUCT.RecordNumber --]"> [-- IF PRODUCT.VariablePrice? --] <span class="pr_variable"> [-- IF PRODUCT.VariableName? --] <b>[-- STORE.ProductName --]:</b> <input type="text" name="[-- PRODUCT.RecordNumber --]:name" size="20" maxlength="100" value=""><br> [-- END_IF --] [-- IF PRODUCT.VariableSKU? --] <b>[-- STORE.Sku --]:</b> <input name="[--PRODUCT.RecordNumber--]:sku" size="10" value="" type="text"><br> [-- END_IF --] <b>[--STORE.Price --]:</b> [-- STORE.CurrencySymbol --]<input type="text" name="[-- PRODUCT.RecordNumber --]:price" size="4" maxlength="10" value=""> </span><br> [-- END_IF --] [-- IF PRODUCT.DisplayOrderingOptions --] [-- IF PRODUCT.OptionText --][-- PRODUCT.OptionText --][-- END_IF --] [-- ORDER_OPTION_MENU Column --] [-- IF PRODUCT.OptionsBox --] [-- IF PRODUCT.OptionsBoxHeader --][-- PRODUCT.OptionsBoxHeader --]<br>[-- END_IF --] <textarea name="[-- PRODUCT.Recordnumber --]:freeopt" cols="[-- PRODUCT.OptionsBoxColumns --]" rows="[-- PRODUCT.OptionsBoxRows --]"></textarea><br> [-- END_IF --] [-- END_IF --] [-- IF PRODUCT.DisplayOrderQuantity --] [-- STORE.OrderQuantity --] <input type="text" size="2" name="[-- PRODUCT.RecordNumber --]:qnty" value="1"><br> [-- END_IF --] [-- IF ADDIMAGE? --] <input class="add" type="image" [--ADDIMAGE--]> [-- ELSE --] <input class="add_text" type="submit" value="[-- ADDTEXT --]"> [-- END_IF --] </form> [-- END_IF --] <div class="clear"></div> </div> [-- END_DEFINE PRODUCT --]

by **ShopSite Lauren** » Wed Nov 05, 2014 1:14 pm

Code: Select all: [-- DEFINE SUBPRODUCT --] <input type="radio" name="itemnum" value="[-- PRODUCT.RecordNumber --]"> [-- PRODUCT.Name --] [-- IF PRODUCT.DisplayPrice --][-- IF PRODUCT.SaleAmount --][-- IF PRODUCT.SaleOn --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --] [-- STORE.OnSaleText --][-- PRODUCT.PriceStyle End --][-- ELSE --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.Price --][-- PRODUCT.PriceStyle End --][-- END_IF --][-- ELSE --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.Price --][-- PRODUCT.PriceStyle End --][-- END_IF --][-- END_IF --] [-- END_DEFINE SUBPRODUCT --] [-- DEFINE PRODUCT --] <style type="text/css"> #ss_em_pr {margin: 0px; padding: 0px; max-width: 100%;} #ss_em_pr, #ss_em_pr td {font-family: [-- IF STORE.Font --][-- STORE.Font --][-- ELSE --]arial, helvetica, sans-serif[-- END_IF --]; font-size: [-- IF STORE.FontSize --][-- STORE.FontSize --][-- ELSE --]10pt[-- END_IF --]; color: #[-- STORE.TextColor --];} #ss_em_pr .pr_name, #ss_em_pr .pr_sku, #ss_em_pr .pr_price, #ss_em_pr input.add {display: block;} #ss_em_pr input.add_text {border: 0px; background: #[-- STORE.LinkColor --]; color: #FFFFFF; font-weight: normal; font-size: 100%; margin: 5px 0px; padding: 8px 12px; clear: both; border-radius: 3px;} #ss_em_pr .pr_price {padding: 10px 0px;} #ss_em_pr .pr_price strike {display: block; font-size: 80%;} #ss_em_pr .pr_variable {line-height: 180%;} #ss_em_pr .Bold, #ss_em_pr .bold {font-weight: bold;} #ss_em_pr .Big, #ss_em_pr .big {font-size: 120%;} #ss_em_pr .Small, #ss_em_pr .small {font-size: 80%;} #ss_em_pr .Italic, #ss_em_pr .italic {font-style: italic;} .right {text-align: right;} .left {text-align: left;} .ss-graphic img, .ss-graphic-left img, .ss-graphic-right img {max-width: 100%; width: 100%;} .ss-graphic, .ss-productinfo {clear: both; padding: 0px 0px 10px 0px; text-align: center; margin: 0px auto;} .ss-productinfo table {margin: 0px auto;} .ss-graphic-right {float: right; width: 50%; max-width: 50%; clear: none; padding: 0px 0px 10px 0px; margin: 0px; text-align: center;} .ss-productinfo-left {float: left; width: 46%; max-width: 46%; clear: none; padding: 0px 0px 10px 0px; margin: 0px; text-align: left;} .ss-graphic-left {float: left; clear: none; width: 46%; max-width: 46%; padding: 0px 0px 10px 0px; margin: 0px; text-align: center;} .ss-productinfo-right {float: right; clear: none; width: 50%; max-width: 50%; padding: 0px 0px 10px 0px; margin: 0px; text-align: left;} .ss-productdescription {clear: both; padding: 5px 0px 10px 0px; margin: 0px auto; text-align: left;} .ss-subproducts, .ss-variables {clear: both; padding: 10px 0px; margin: 0px auto;} .clear {clear: both; padding: 0px; margin: 0px;} input.add {margin-left: auto; margin-right: auto;} </style> <div id="ss_em_pr"> [-- IF PRODUCT.ImageAlignment "Center" --] [-- IF PRODUCT.DisplayGraphic --] [-- IF PRODUCT.Graphic --] <div class="ss-graphic"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/[-- IMAGE PRODUCT.Graphic --]" alt="[-- PRODUCT.Name REMOVE_HTML --]"></div> [-- END_IF --] [-- END_IF --] <div class="ss-productinfo"> [-- ELSE_IF PRODUCT.ImageAlignment "Right" --] [-- IF PRODUCT.DisplayGraphic --] [-- IF PRODUCT.Graphic --] <div class="ss-graphic[-- IF PRODUCT.TextWrap "On" --]-right[-- ELSE --] right[-- END_IF --]"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/[-- IMAGE PRODUCT.Graphic --]" alt="[-- PRODUCT.Name REMOVE_HTML --]"></div> [-- END_IF --] [-- END_IF --] <div class="ss-productinfo[-- IF PRODUCT.TextWrap "On" --]-left[-- END_IF --]"> [-- ELSE_IF PRODUCT.DisplayGraphic --] [-- IF PRODUCT.Graphic --] <div class="ss-graphic[-- IF PRODUCT.TextWrap "On" --]-left[-- ELSE --] left[-- END_IF --]"><img src="[-- OUTPUT_DIRECTORY_URL --]/media/[-- IMAGE PRODUCT.Graphic --]" alt="[-- PRODUCT.Name REMOVE_HTML --]"></div> <div class="ss-productinfo[-- IF PRODUCT.TextWrap "On" --]-right[-- END_IF --]"> [-- END_IF --] [-- END_IF --] [-- IF PRODUCT.VariablePrice? --] [-- IF PRODUCT.VariableName? --] [-- ELSE_IF PRODUCT.DisplayName --] <span class="pr_name [-- PRODUCT.NameSize --] [-- PRODUCT.NameStyle --]">[-- PRODUCT.Name --]</span> [-- END_IF --] [-- ELSE_IF PRODUCT.DisplayName --] <span class="pr_name [-- PRODUCT.NameSize --] [-- PRODUCT.NameStyle --]">[-- PRODUCT.Name --]</span> [-- END_IF --] [-- IF PRODUCT.VariablePrice? --] [-- IF PRODUCT.VariableSKU? --] [-- ELSE_IF PRODUCT.DisplaySKU --] [-- IF PRODUCT.Sku --] <span class="pr_sku [-- PRODUCT.SKUSize --] [-- PRODUCT.SKUStyle --]">[-- PRODUCT.Sku --]</span> [-- END_IF --] [-- END_IF --] [-- ELSE_IF PRODUCT.DisplaySku --] [-- IF PRODUCT.Sku --] <span class="pr_sku [-- PRODUCT.SKUSize --] [-- PRODUCT.SKUStyle --]">[-- PRODUCT.Sku --]</span> [-- END_IF --] [-- END_IF --] [-- IF PRODUCT.ProductDescription --] [-- PRODUCT.DescriptionStyle Begin --][-- PRODUCT.DescriptionSize Begin --][-- PRODUCT.ProductDescription --][-- PRODUCT.DescriptionSize End --][-- PRODUCT.DescriptionStyle End --] [-- END_IF --] [-- IF PRODUCT.SubProduct --] [-- ELSE_IF PRODUCT.VariablePrice? --] [-- ELSE_IF PRODUCT.QuantityPricing --] [-- PRODUCT.QuantityPricing --] [-- ELSE_IF PRODUCT.DisplayPrice --] <span class="pr_price [-- PRODUCT.PriceSize --] [-- PRODUCT.PriceStyle --]"> [-- IF PRODUCT.SaleAmount --] [-- IF PRODUCT.SaleOn --] [-- STORE.Price --]: [-- PRODUCT.SaleAmount --] [-- STORE.OnSaleText --] [-- IF PRODUCT.AltPrice --]<br>[-- PRODUCT.AltSaleAmount --][-- END_IF --] <strike>[-- STORE.Price --]: [-- PRODUCT.Price --][-- IF PRODUCT.AltPrice --]<br>[-- PRODUCT.AltPrice --][-- END_IF --]</strike> [-- ELSE --] [-- STORE.Price --]: [-- PRODUCT.Price --] [-- IF PRODUCT.AltPrice --]<br>[-- PRODUCT.AltPrice --][-- END_IF --] [-- END_IF --] [-- ELSE --] [-- STORE.Price --]: [-- PRODUCT.Price --] [-- IF PRODUCT.AltPrice --]<br>[-- PRODUCT.AltPrice --][-- END_IF --] [-- END_IF --] </span> [-- END_IF --] [-- IF PRODUCT.Subproduct --] <form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post"> <input type="hidden" name="storeid" value="[-- STORE.ID --]"> <input type="hidden" name="dbname" value="products"> <input type="hidden" name="function" value="add"> <br> [-- LOOP SUBPRODUCTS --] [-- SUBPRODUCTS em_BasicLayout.sst --]<br> [-- END_LOOP SUBPRODUCTS --]<br> [-- IF ADDIMAGE? --] <input class="add" type="image" [--ADDIMAGE--]> [-- ELSE --] <input class="add_text" type="submit" value="[-- ADDTEXT --]"> [-- END_IF --] </form> [-- ELSE_IF PRODUCT.UseMultiMenus checked --] [-- ELSE --] <form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post"> <input type="hidden" name="storeid" value="[-- STORE.ID --]"> <input type="hidden" name="dbname" value="products"> <input type="hidden" name="function" value="add"> <input type="hidden" name="itemnum" value="[-- PRODUCT.RecordNumber --]"> [-- IF PRODUCT.VariablePrice? --] <span class="pr_variable"> [-- IF PRODUCT.VariableName? --] <b>[-- STORE.ProductName --]:</b> <input type="text" name="[-- PRODUCT.RecordNumber --]:name" size="20" maxlength="100" value=""><br> [-- END_IF --] [-- IF PRODUCT.VariableSKU? --] <b>[-- STORE.Sku --]:</b> <input name="[--PRODUCT.RecordNumber--]:sku" size="10" value="" type="text"><br> [-- END_IF --] <b>[--STORE.Price --]:</b> [-- STORE.CurrencySymbol --]<input type="text" name="[-- PRODUCT.RecordNumber --]:price" size="4" maxlength="10" value=""> </span><br> [-- END_IF --] [-- IF PRODUCT.DisplayOrderingOptions --] [-- IF PRODUCT.OptionText --][-- PRODUCT.OptionText --][-- END_IF --] [-- ORDER_OPTION_MENU Column --] [-- IF PRODUCT.OptionsBox --] [-- IF PRODUCT.OptionsBoxHeader --][-- PRODUCT.OptionsBoxHeader --]<br>[-- END_IF --] <textarea name="[-- PRODUCT.Recordnumber --]:freeopt" cols="[-- PRODUCT.OptionsBoxColumns --]" rows="[-- PRODUCT.OptionsBoxRows --]"></textarea><br> [-- END_IF --] [-- END_IF --] [-- IF PRODUCT.DisplayOrderQuantity --] [-- STORE.OrderQuantity --] <input type="text" size="2" name="[-- PRODUCT.RecordNumber --]:qnty" value="1"><br> [-- END_IF --] [-- IF ADDIMAGE? --] <input class="add" type="image" [--ADDIMAGE--]> [-- ELSE --] <input class="add_text" type="submit" value="[-- ADDTEXT --]"> [-- END_IF --] </form> [-- END_IF --] <div class="clear"></div> </div> [-- END_DEFINE PRODUCT --]

by **hammer** » Wed Nov 05, 2014 3:09 pm

Thank you Loren,

We are getting there.

Images are displaying properly for most products. For all products, images are no longer distorted. But a few of the images are getting supersized. See the link:

http://www.lobsters-online.com/lobsterfly/index.php/how-to-eat-maine-lobster/

by **ShopSite Lauren** » Wed Nov 05, 2014 4:03 pm

It looks like the text wrap is set to "Off" for that product, so instead of the text wrapping to the side of the image, the image can be full width and the text is below the image. You can change this by going to Products > Edit Product Layout, and turning the text wrap "On".

by **hammer** » Wed Nov 05, 2014 4:48 pm

Success!!! They are all publishing perfect now. Thank you, Loren.

by **hammer** » Wed Nov 05, 2014 4:49 pm

Success!!! They are all publishing perfect now. Thank you, Loren.

ShopSite Forums

Wordpress not displaying shopsite plugin product images

Re: Wordpress not displaying shopsite plugin product images

Re: Wordpress not displaying shopsite plugin product images

Re: Wordpress not displaying shopsite plugin product images

Re: Wordpress not displaying shopsite plugin product images

Re: Wordpress not displaying shopsite plugin product images

Re: Wordpress not displaying shopsite plugin product images

Re: Wordpress not displaying shopsite plugin product images

Who is online