Printable View
In the process of getting my images to line up on the left I can't find out what I did to make the description stay below the images, eek!
I'm hoping/guessing this is something simple that I'm missing?
Thanks for any help.
http://ratkiss.net/index.php?main_pa...&products_id=4
Hi,
Are you looking for a layout like this?
http://milesfiberglass.com/catalog/
Justus
Remove the red entry and might need some css tweaking after
Code:<!--bof Additional Product Images -->
<div id="productAdditionalImages">
<div class="additionalImages centeredContent back" style="width:50%;">
<script language="javascript" type="text/javascript"><!--
document.write('<a href="javascript:popupWindow(\'http://ratkiss.net/index.php?main_page=popup_image_additional&pID=4&pic=0&products_image_large_additional=images/large/bif_01_LRG.jpg\')"><img src="bmz_cache/5/580738cd98dd6ad26ec00a7af3ae0267.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail(\'bmz_cache/6/6a11364cd90c1dd6ac132c7890571fab.image.200x200.jpg\',\'Test\',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();" /><br /></a>');
//--></script>
<noscript><a href="http://ratkiss.net/index.php?main_page=popup_image_additional&pID=4&pic=0&products_image_large_additional=images/large/bif_01_LRG.jpg" target="_blank"><img src="bmz_cache/5/580738cd98dd6ad26ec00a7af3ae0267.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail('bmz_cache/6/6a11364cd90c1dd6ac132c7890571fab.image.200x200.jpg','Test',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();" /><br /></a></noscript></div>
<div class="additionalImages centeredContent back" style="width:50%;">
<script language="javascript" type="text/javascript"><!--
document.write('<a href="javascript:popupWindow(\'http://ratkiss.net/index.php?main_page=popup_image_additional&pID=4&pic=1&products_image_large_additional=images/large/bif_02_LRG.jpg\')"><img src="bmz_cache/7/74c3b4147a0816fd5ae47ac6fbd082f3.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail(\'bmz_cache/b/bbd7320c82ae660faadc1cdf13fcb87c.image.200x200.jpg\',\'Test\',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();" /><br /></a>');
//--></script>
<noscript><a href="http://ratkiss.net/index.php?main_page=popup_image_additional&pID=4&pic=1&products_image_large_additional=images/large/bif_02_LRG.jpg" target="_blank"><img src="bmz_cache/7/74c3b4147a0816fd5ae47ac6fbd082f3.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail('bmz_cache/b/bbd7320c82ae660faadc1cdf13fcb87c.image.200x200.jpg','Test',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();" /><br /></a></noscript></div>
<br class="clearBoth" />
</div>
<!--eof Additional Product Images -->
I removed the code in red from my tpl product info display.
Can you guide me in the right direction as what I need to tweek in the stylesheet.css possibly?
Checked and the clear both is still there??
Code:<!--bof Additional Product Images -->
<div id="productAdditionalImages">
<div class="additionalImages centeredContent back" style="width:50%;">
<script language="javascript" type="text/javascript"><!--
document.write('<a href="javascript:popupWindow(\'http://ratkiss.net/index.php?main_page=popup_image_additional&pID=4&pic=0&products_image_large_additional=images/large/bif_01_LRG.jpg\')"><img src="bmz_cache/5/580738cd98dd6ad26ec00a7af3ae0267.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail(\'bmz_cache/6/6a11364cd90c1dd6ac132c7890571fab.image.200x200.jpg\',\'Test\',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();" /><br /></a>');
//--></script>
<noscript><a href="http://ratkiss.net/index.php?main_page=popup_image_additional&pID=4&pic=0&products_image_large_additional=images/large/bif_01_LRG.jpg" target="_blank"><img src="bmz_cache/5/580738cd98dd6ad26ec00a7af3ae0267.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail('bmz_cache/6/6a11364cd90c1dd6ac132c7890571fab.image.200x200.jpg','Test',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();" /><br /></a></noscript></div>
<div class="additionalImages centeredContent back" style="width:50%;">
<script language="javascript" type="text/javascript"><!--
document.write('<a href="javascript:popupWindow(\'http://ratkiss.net/index.php?main_page=popup_image_additional&pID=4&pic=1&products_image_large_additional=images/large/bif_02_LRG.jpg\')"><img src="bmz_cache/7/74c3b4147a0816fd5ae47ac6fbd082f3.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail(\'bmz_cache/b/bbd7320c82ae660faadc1cdf13fcb87c.image.200x200.jpg\',\'Test\',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();" /><br /></a>');
//--></script>
<noscript><a href="http://ratkiss.net/index.php?main_page=popup_image_additional&pID=4&pic=1&products_image_large_additional=images/large/bif_02_LRG.jpg" target="_blank"><img src="bmz_cache/7/74c3b4147a0816fd5ae47ac6fbd082f3.image.100x100.jpg" alt="Test" title=" Test " width="100" height="100" style="position:relative" onmouseover="showtrail('bmz_cache/b/bbd7320c82ae660faadc1cdf13fcb87c.image.200x200.jpg','Test',100,100,200,200,this,89,89,11,11);" onmouseout="hidetrail();" /><br /></a></noscript></div>
<br class="clearBoth" />
</div>
<!--eof Additional Product Images -->
Should I be doing this to the default classic template tpl file?
I was using the override and editing my custom one, and I don't see it as it shows here:
Sorry, I just want to get it right.
PHP Code:<!--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>
includes/templates/custom/templates/tpl_product_info_display.php
Thank you, I'm posting part of my file here because I believe I removed it:Quote:
Originally Posted by kobra
:huh:
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>
Are you editing the file in the path I posted?
At your site - view your page source and see this:
It is still being usedCode:<br class="clearBoth" />
</div>
<!--eof Additional Product Images -->
Hi Kobra,
I followed the path you posted to edit.
There are only 3 "clearBoth" left in that file now.
I viewed the source and see that as well, but do not see it in the file.
I'm feeling like I'm missing something here completely obvious, and double
checked the path to make sure.
:unsure:
I just searched the developers tool kit for "clearboth"
There are many others, but the file specified: /www/includes/templates/custom/templates/tpl_product_info_display.php
has this:
/home/ratkiss/public_html/includes/templates/custom/templates/tpl_product_info_display.php
Line #134 : <br class="clearBoth" />
Line #193 : <br class="clearBoth" />
Line #197 : <br class="clearBoth" />
None of which are near the additional images in the file itself?
This makes no sense as to why it still shows and is being used. I'm a little confused and I guess I will have to let it be how it is. Thanks for trying Kobra.
I found a little something in my stylesheet.css! :clap:
I had
#productDescription { clear: both}
I removed that and went back to the default modules_product_info_display.php
That lined up the description to the right. Any suggestions what I can do to line the images up again, or is this not possible?
Great!!! That would have added it back in where you removed it from the code...
Now on to the next:
Make these changes/additions to the stylesheet
Now back to the code:Code:#productDescription {
float: right;
width: 68%;
}
#productAdditionalImages {
width: 180px;
}
#productAdditionalImages img {
margin : 1em 0 1em 0;
float : left;
}
Reduce this tag to a single entry by deleting it from others
.additionalImages {
clear: both;
}
#productAdditionalImages exists outside of the div, id=productGeneral, class=centerColumn and is probably from moving/editing tpl_product_info_display.php.
Check where the center div begins & ends and where the additional images starts. This needs to be contained within or before the end of the center to be able to move them up higher
Thank you I got through the stylesheet corrections/changes. :DQuote:
Originally Posted by kobra
But, (you know there had to be a but, sorry!)
I'm a little confused about the last part.
Is this what I am looking for? This is at the very beginning of my tpl__product_info_display.php file.
Now I looked for the additional images <--bof--> <--eof-->PHP Code:<div class="centerColumn" id="productGeneral">
and move that above the div shown above. Is that what you meant to do?
I tried that and it looked funny.
I don't think I'm following you right here, sorry!
Is this red highlighted entry in your tpl_product_info_display.php file ? Or might it be from a setting in the admin?
Code:<div class="additionalImages centeredContent back" style="width:50%;">
No, that isn't in my product_info_display.php file.
I found it in an admin setting.
I had additional images per row set to 2
Changed it to 1 and now it shows the code as follows:
PHP Code:<div class="additionalImages centeredContent back" style="width:100%;">
Is this what I want? I've been fiddling with my php file for a couple days and when I move something another gets out of wack.Quote:
Originally Posted by sheba10
I'm coming to think I'm at a loss here.
:frusty:
I searched on here some more and moved my additional images right under the main image and put them together in their own <div>.
I floated some things differently in the stylesheet and now I don't think I can get any closer than that!
If anyone can help with one last thing:
How can I make the additional images display right next to each other under the main image.
Like:
1
23
If not broken by your edits this should be controlled in the admin > config > images > Product Info - Number of Additional Images per Row > set to the desired # per row
Thank you so much for all your efforts trying to help me out, Kobra!
I just changed things back in my stylesheet and removed the <div> in the file, checked to make sure additional images were set to 2 and it wont work.
I'm guess I'm just a lost cause.
Thank you again.
If you are using overrides change to the classic template to see if your admin change elicits the desired response
Good idea, I'm using overrides. It's in classic right now and things still aren't quite right.
Do you thing this could this something in my stylesheet causing these problems?
Thanks again, Kobra!
From your post here #12
I seems that you are going in circles having it aligned to the right and later not.Quote:
I removed that and went back to the default modules_product_info_display.php
That lined up the description to the right.
You are very patient with me, thanks again.
I am going in circles. I thought it would be much more simpler of a task, I guess I was wrong.
Has anyone done this before that has a site to take a peek at, I'm curious?
So now I head back to post #12 of mine....
I just got rid the override for the product_info_display, I'm back to the default.
I followed through the posts we've made and the stylesheet is back to where it was.
Sigh.:wacko:
I'm giving up on this idea.
Is there any hope for me do align my images horizontally like this website instead?
http://www.wolfandrabbit.com/index.p...roducts_id=187
Do you have PhotoShop or Paint Pro or another image editor?
Sure do, I have photoshop.Quote:
Originally Posted by kobra
Kobra,
Thanks for the help off the boards.
After looking at the demo page you put up for me I think I finally got it together!
You're a valuable help and I just had to say thanks again for putting up with me.
:thumbsup:
I cant find out where to change that <br class="clearBoth" /> in the following section
<br class="clearBoth" />
</div>
<!--eof Additional Product Images -->
when I look at my source cod does anyone know where I can find it I have looked thru my stylesheet but nothing :(
Any help is much appreciated