[tip] Easy way to get bigger image on product details page flypage (GD Library)

(1/3) > >>

Lee:
This will only work on your site if you have "automatic thumbnail creation" turned on in admin.

This hack does not affect any core files, 1 Template file only nice and simple

The code below relies on Virtuemarts built-in GD image manipulation script

find file: JOOMLA/administrator/components/com_virtuemart/html/templates/product_details/your_flypage.php
Just add this line of code into your flypage.php where ever you want the bigger image to appear:
Code:

<img src="{mosConfig_live_site}/components/com_virtuemart/show_image_in_imgtag.php?filename={full_image}&newxsize=300&newysize=300&fileout=" alt="{product_name}" title="{product_name}" border="0" align="right" />
newxsize=300  // change these numbers in the above code to suit your image size needs.
newysize=300  // change these numbers in the above code to suit your image size needs.

THATS IT - to easy


Todo: maybe a GD expert can have a crack at it:

Add a new folder with-in
JOOMLA/components/com_virtuemart/shop_image/product/new_temp_image_folder
That will allow saving of the resized image, so the web browser loads the new_saved image from the folder - rather then have GD create a temp image every time the browser loads the page.

It will speed up page load times, less strain on the server and users bandwidth.

for users with small page hits and low visitors - this script works nicely

Nielo.

Juan Hck:
Thank you man!  ;D

gdanx:
works great, but the link for popup of a bigger image disappears .. is it possible to define just a link to the full image? something like {full_imagelink},  just like it's when we use {product_image}, but just pure link without a thumbnail

gdanx:
got it working .. i wanted to get a bigger image on product details page - flypage - a resized one from the full image with the "show bigger image" link below it.

i found a solution in 2 other posts so here's a summary of them:

in /components/com_virtuemart/show_image_in_imgtag.php

replace this:

Code:

$fileout = IMAGEPATH."/product/resized/".$file."_".PSHOP_IMG_WIDTH."x".PSHOP_IMG_HEIGHT.$noimgif.$ext;


with this:

Code:

$fileout = IMAGEPATH."/product/resized/".$file."_".$newxsize."x".$newysize.$noimgif.$ext;

in administrator/components/com_virtuemart/html/shop.product_details.php

replace this:

Code:

$text = $ps_product->image_tag($product_thumb_image, "alt=\"".$product_name."\"", 1)."<br/>".$VM_LANG->_PHPSHOP_FLYPAGE_ENLARGE_IMAGE;

with this: (define you own newxsize and newysize of the bigger image)

Code:

$text = '<img src="'.$mosConfig_live_site.'/components/com_virtuemart/show_image_in_imgtag.php?filename='.urlencode($full_image).'&newxsize=200&newysize=200&fileout=" alt="'.$product_name.'" border="0"><br />'.$VM_LANG->_PHPSHOP_FLYPAGE_ENLARGE_IMAGE;

mc_moe:
in order not to lose the "see bigger image link", change the shop.product_details.php not as described before, but as follows:

original:

Code:

     /* Build the "See Bigger Image" Link */
      if( @$_REQUEST['output'] != "pdf" ) {
$link = $imageurl;
$text = $ps_product->image_tag($product_thumb_image, "alt=\"".$product_name."\"", 1)."<br/>".$VM_LANG->_PHPSHOP_FLYPAGE_ENLARGE_IMAGE;
// vmPopupLink can be found in: htmlTools.class.php
$product_image = vmPopupLink( $link, $text, $width, $height );
      }
      else {
        $product_image = "<a href=\"$imageurl\" target=\"_blank\">".$ps_product->image_tag($product_thumb_image, "alt=\"".$product_name."\"", 1)."</a>";
      }

after modification:

Code:

      /* Build the "See Bigger Image" Link */
      if( @$_REQUEST['output'] != "pdf" ) {
$link = $imageurl;
$text = $VM_LANG->_PHPSHOP_FLYPAGE_ENLARGE_IMAGE;
// vmPopupLink can be found in: htmlTools.class.php
$product_image = vmPopupLink( $link, $text, $width, $height );
      }
      else {
        $product_image = "<a href=\"$imageurl\" target=\"_blank\">".$ps_product->image_tag($product_thumb_image, "alt=\"".$product_name."\"", 1)."</a>";
      }

in the flypage refer to the image as follows:

Code:

<img src="{mosConfig_live_site}/components/com_virtuemart/show_image_in_imgtag.php?filename={full_image}&newxsize=300&newysize=300&fileout=" alt="{product_name}" title="{product_name}" border="0" align="right" />{product_image}

the modification as described in the threads before change the $text in which the image as well as the link was included. this was needed, as in the flypage there was only one variable (product_image} to which was referred. now, we have a the call for the image (<img src=...) and we have the variable {product_image} we stripped off the image; now the {product_image} is just replaced by the link text...

Navigation

[0] Message Index

[#] Next page