Author Topic: Browse page linking item thumbnail to product flypage  (Read 5816 times)

hummblebee

  • Beginner
  • *
  • Posts: 14
Browse page linking item thumbnail to product flypage
« on: January 20, 2010, 00:23:56 am »
I am very close to being happy with how my new website looks.  I just have a couple of browse-page questions I'm hoping you wizards can give me insight on before I move it to my main server.  

Is there a simple way to link the thumbnail on the category browse page to the flypage for that product?  Right now it is still doing the default - opening the full-size image in a new window - and I don't really like that at all.  

I would also like to find a way to vertically center the thumbnail in it's field, and perhaps put a border around it.  

I know these are pretty basic questions, I don't know much about php or css, so I've been feeling my way through this whole process.

Page can be seen here: http://joomla.hummblebee.com/index.php?option=com_virtuemart&page=shop.browse&category_id=5&Itemid=0


hummblebee

  • Beginner
  • *
  • Posts: 14
Relevant code
« Reply #1 on: January 20, 2010, 00:24:45 am »
Relevant code follows:

From "/components/com_virtuemart/themes/beetheme/templates/browse/browse_1.php"

Quote
<div class="browseProductContainer">

        <div class="browseProductLeftCol">

        <div class="browseProductImageContainer">
           <script type="text/javascript">//<![CDATA[
           document.write('<a href="javascript:void window.open(\'<?php echo $product_full_image ?>\', \'win2\', \'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=<?php echo $full_image_width ?>,height=<?php echo $full_image_height ?>,directories=no,location=no\');">');
           document.write( '<?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?></a>' );
           //]]>
           </script>
           <noscript>
               <a href="<?php echo $product_full_image ?>" target="_blank" title="<?php echo $product_name ?>">
               <?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?>
               </a>
           </noscript>
        </div>
       

        </div>

       


From "/components/com_virtuemart/themes/beetheme/theme.css"
 
Quote
/** BROWSE PRODUCTS STYLES **/
.browseProductContainer {
   width:100%; height:210px;
   padding: 3px 3px 3px 3px;
   vertical-align: top;
}

.browseProductLeftCol {
   width:210px; height:210px;
   padding: 3px 3px 3px 3px;
   vertical-align: center;
        float: left;
        background: #4c86ac;
        text-align: center;
}

.browseProductColSpace {
   width:10px; height:210px;
   padding: 3px 3px 3px 3px;
   vertical-align: center;
        float: left;
        text-align: center;
}

.browseProductTitle {
   font-size: 16px;
   font-weight: bold;
   padding: 3px;
   margin-top: 3px;
   width: auto;
   float: left;
}
.browseProductImageContainer {
   float: center;
   width: auto;
   margin: 3px;
        border: 2px;
        vertical-align: middle;
       
}
.browseProductDetailsContainer {
   float: auto;
   width: 70%;
}
.browseProductDescription {
   margin-top: 20px;
        float: center;
   width: auto;
}
.browsePriceContainer {
   float: right;
   margin: 5px;
   width:20%;
}
.browseAddToCartContainer {
   width:30%;
   text-align:center
}

I'm sure there's probably relevant php that I'm missing, that will explain what the heck I'm missing here.  If any of you guys could point me some direction I'd appreciate it!

Skullmon

  • Beginner
  • *
  • Posts: 10
Re: Browse page linking item thumbnail to product flypage
« Reply #2 on: January 20, 2010, 02:46:15 am »
Well you could simply select another browse page template for your store - one of them goes directly to the flypage from the product page.

But it's always good to get your hands dirty. Backup your browse_1.php file in case my solution does not work.

You are using the default browse_1.php. If you want to edit this one just delete the entire <script > CODE </script> tag.

Place this code before the <noscript > open tag.

Code: [Select]
<a href="<?php echo $product_flypage ?>">
then remove the noscript tags (NOT the code in between, just the tags. also remove the entire first line of code after the open <noscript > tag.

Your code should be similar to this:

Code: [Select]
<div class="browseProductLeftCol">

        <div class="browseProductImageContainer">
          
              
<a href="<?php echo $product_flypage ?>">
               <?php echo ps_product::image_tag$product_thumb_image'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ?>
               </a>
          
        </div>

Hope this helps with your first issue.

hummblebee

  • Beginner
  • *
  • Posts: 14
Re: Browse page linking item thumbnail to product flypage
« Reply #3 on: January 20, 2010, 03:33:55 am »
Perfect!  That helped so much and I totally understand now the problems with the things I tried before. :) Thanks Skullmon!

I also had to delete the whole segment between the <script> tags.  This might have seemed obvious to y'all - and I noticed it wasn't there in your example - but I left it in at first, to be on the safe side.  I ended up with one thumbnail below the other - the first one did what it had before, and the second linked to the flypage.  After I deleted that section of code it appeared how I want it to. 

I still have to figure out how to vertically align the thumbnail in the middle of it's column, and give it a border if possible. 

I've tried this by adding a border to the code in browse_1.php:
Quote
<a href="<?php echo $product_flypage ?>">
               <?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="2" title="'.$product_name.'" alt="'.$product_name .'"' ) ?>

I've also tried adding "vertical-align: center;" and "vertical-align: middle;", as well as adding a border, in theme.css under both ".browseProductLeftCol" and .browseProductImageContainer" classes.  None of this seems to be working so far.  Am I missing a big piece here? 

Thanks so much for the help!!

Skullmon

  • Beginner
  • *
  • Posts: 10
Re: Browse page linking item thumbnail to product flypage
« Reply #4 on: January 20, 2010, 03:48:13 am »
Well I am glad that it worked out for you. Let me see if I understand your other issue. You want the product images to be centered within the blue box, both vertically and horizontally irrespective of the actual image dimension or size?

If you could maybe place an image that is smaller than the ones you have now, so that I can see where it aligns to, that would help me to solve your issue. I am no expert on these things but it helps me when I see the issue.

I would not recommend altering the code in the browse_1.php to accomplish this since I am certain that it can be done in the css, which is usually the better option.

I just realized something, which thumbnail do you want to edit, the one on the browse page or the one on the flypage?

Skullmon

  • Beginner
  • *
  • Posts: 10
Re: Browse page linking item thumbnail to product flypage
« Reply #5 on: January 20, 2010, 04:00:16 am »
You can add a black border for example around the blue box by adding this to your "/components/com_virtuemart/themes/beetheme/theme.css" file.

edit the first class name

Code: [Select]
.browseProductContainer {
   width:100%; height:210px;
   padding: 3px 3px 3px 3px;
   vertical-align: top;
}

to this

Code: [Select]
.browseProductContainer {
   width:100%; height:210px;
   padding: 3px 3px 3px 3px;
   vertical-align: top;
   border:1px solid #000000;
}

the 1px is the size of the border, and you must add a colour using # or simply write white or black or blue without using the #. Example border:1px solid black; it seems after adding a border using the browse_1.php file you did not add a distinct colour. However you should remove this change from the browse_1.php file since the css file will handle it.

Skullmon

  • Beginner
  • *
  • Posts: 10
Re: Browse page linking item thumbnail to product flypage
« Reply #6 on: January 20, 2010, 05:46:43 am »
The div that controls the positioning of the actual image is  .browseProductImageContainer.

Try editing the following class in your "/components/com_virtuemart/themes/beetheme/theme.css" file

Code: [Select]
.browseProductImageContainer {
   float: center;
   width: auto;
   margin: 3px;
        border: 2px;
        vertical-align: middle;
      
}

to

Code: [Select]
.browseProductImageContainer {
width:200px;
height:200px;
margin-top:7px;
margin-bottom:7px;
margin-right:auto;
margin-left:auto;
border: 2px solid #000000;
}

Now this may not give you the exact results you are looking for but you can then tweak it a bit to suite your site. Essentially we a resizing all the images to 200 x 200 since your blue box is 210 x 210 and has 3px padding all a round you are then going to force a 7px margin from the top and bottom of the image and have it centered. 7px + 3px padding gives 10px + 200px gives the 210 x 210 blue box we have to work with...well that's what I hope...

Even after doing this, I realize that small images will not be centered vertically. It would be best if you simply crop all your images to 200 x 200 and use them so that there can be consistency among the product thumbnails. Well until someone else has a solution...

hummblebee

  • Beginner
  • *
  • Posts: 14
Re: Browse page linking item thumbnail to product flypage
« Reply #7 on: January 20, 2010, 06:24:17 am »
Thanks for all your help! 

My problem is that the way I had the site planned, I would generate the thumbnails for most items automatically from the full size image, which (because of the nature of my art) wouldn't always be square.  For most items, the image height will be greater than the width - and I have successfully centered those thumbnails in the blue background by adding "text-align: center;" to the div ".browseProductLeftCol" .

For the items that are wider than they are high, though, I want the image vertically centered in the background field. 

The ideas you have for the border work better than what I'd tried before, but they are providing a border for the entire 200x200px area, and I was hoping to just border the photo itself.  Is that possible?

Skullmon

  • Beginner
  • *
  • Posts: 10
Re: Browse page linking item thumbnail to product flypage
« Reply #8 on: January 20, 2010, 07:12:57 am »
Sorry, I misunderstood where the border had to go. I did find a solution for centering the images, but it involves editing some elements of the template files. I will have a look at it and post my findings, hopefully in a day or so.

So for the border you can still do it using css, look for the class .browseProductImage in your css file and simply place this

 border: 2px solid #000000;

just as we did before.

Note if you don't see the class just add it yourself below .browseProductContainer as shown below:

Code: [Select]
.browseProductContainer {
   width:100%; height:210px;
   padding: 3px 3px 3px 3px;
   vertical-align: top;
  
}

.browseProductImage{border:2px solid #000000;}

hummblebee

  • Beginner
  • *
  • Posts: 14
Re: Browse page linking item thumbnail to product flypage
« Reply #9 on: January 20, 2010, 08:25:23 am »
That worked perfect!!! Thank you again!

I've spent so long stumbling through this process, and you know where to go right away! :)  I will get there eventually, I suppose.  Tomorrow evening when I get home from my day-job I will continue to try for the vertically centered images, but so far you've solved all my other problems!  I'm nearly ready to move over to the main server and start populating my inventory!

Skullmon

  • Beginner
  • *
  • Posts: 10
Re: Browse page linking item thumbnail to product flypage
« Reply #10 on: January 20, 2010, 09:45:09 am »
Well I have found the solution after reading the explanation here: http://www.brunildo.org/test/img_center.html

You can read it as well, to have a better understanding of how it was done by the site owner.

Now we need to apply it to VM.

Go to your "/components/com_virtuemart/themes/beetheme/theme.css" file and copy the following code into it; placing it after

.browseProductImage{border:3px solid #000000;}   (this is the css needed for the image border)

There is no special reason for placing it here, but it will allow you to find it easily and will also help group css that affect the product thumbnail on your browse page.


Code: [Select]


.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 207px;
    height: 207px;
border:1px solid red; /*delete this border value to remove the red border*/
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
<![endif]-->



I did not change the name of the class "wraptocenter" that the site used but feel free to change it if you must. Just ensure that you change it everywhere it occurs in the code. I also added this line

border:1px solid red; /*delete this border value to remove the red border*/ so that you can see exactly how the image is centered. You can simply delete the above line in the theme.css file when you are ok with it.

Now we need to edit the browse_1.php file. Simply replace this entire code

<div class="browseProductImageContainer">

with this

<div class="wraptocenter"><span></span>

it should look similar to the code below:

Code: [Select]
<div class="browseProductLeftCol">

        <div class="wraptocenter"><span></span>
           
               
<a href="<?php echo $product_flypage ?>">
               <?php echo ps_product::image_tag$product_thumb_image'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ?>
               </a>
           
        </div>


This should do it, unless it screws up other formatting on the page. I left the original code as I got from the site for compatabiliy with various browsers. For me it has worked in FF and IE8.

Hopefully you won't run into any problems implementing it for your site.



hummblebee

  • Beginner
  • *
  • Posts: 14
Re: Browse page linking item thumbnail to product flypage
« Reply #11 on: January 20, 2010, 20:10:22 pm »
OK, I'm home sick from my day-job and back at this.  I tried implementing the code you suggested and it DOES work to center the image in the field, but messes up the rest of the formatting.  I will play with it for a bit and see if I can come up with some combination that works...

hummblebee

  • Beginner
  • *
  • Posts: 14
Re: Browse page linking item thumbnail to product flypage
« Reply #12 on: January 20, 2010, 20:44:57 pm »
I think I've narrowed down my problem a bit at least. 

The wraptocenter seems to have messed up the ".browseProductLeftCol" div I created. Some of my formatting was dependent on that class - I had set it to 210px square, with the blue background, and added a "float: left;" so that the rest of the item details would fill in the area to the right. 

I've tried taking out the .browseProductLeftCol class from the browse_1.php page, and adding those attributes I wanted to the .wraptocenter class in theme.css. 

Everything works up until I add the float: left; attribute.  At that point, the rest of the page formatting shows as it should and the vertical alignment goes back to the top. 

I'm probably breaking some basic rule or missing something obvious here.  Any ideas?

Skullmon

  • Beginner
  • *
  • Posts: 10
Re: Browse page linking item thumbnail to product flypage
« Reply #13 on: January 21, 2010, 01:56:20 am »
Show the code where you made the changes in your theme.css and browse_1.php so that I can see what's going on. When I did it using a saved copy of your webpage, the formating is not all over the place. The wraptocenter must be the inner most div, if it is, it should not affect any of the other divs.

From your current page it appears that the ".browseProductLeftCol" div is not being used.

Revert the wraptocenter div to its original, the ".browseProductLeftCol" div should be on its own, at least that's how it worked for me.

hummblebee

  • Beginner
  • *
  • Posts: 14
Re: Browse page linking item thumbnail to product flypage
« Reply #14 on: January 21, 2010, 02:20:34 am »
OK I've just reverted everything to the last code you posted. 

Here is that segment of my current browse_1.php:
Quote
<div class="browseProductContainer">

        <div class="browseProductLeftCol">

        <div class="wraptocenter"><span></span>
          
          
               <a href="<?php echo $product_flypage ?>">
               <?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?>
               </a>
          
        </div>
       

        </div>



And here is that part of theme.css:
Quote
.browseProductContainer {
   width:100%; height:210px;
   padding: 3px 3px 3px 3px;
   vertical-align: top;
}

.browseProductImageContainer {
width:200px;
height:200px;
margin-top:7px;
margin-bottom:7px;
margin-right:auto;
margin-left:auto;
}


.browseProductImage  {
        border:2px solid #000000;
}


.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 207px;
    height: 207px;
   border:1px solid red; /*delete this border value to remove the red border*/
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
<![endif]-->


.browseProductLeftCol {
   width:210px; height:210px;
   padding: 3px 3px 3px 3px;
   vertical-align: center;
        float: left;
        background: #4c86ac;
        text-align: center;
}