Thumbnails instead of resized full images - product detail additional

[FrankA]

Currently vm 2 is not using thumbnails but resizing full images... with a large number of additional this makes it painfully slow  to load and ugly for rectangular images as the size is set to one fixed dimension and auto for the other.
How can it be changed to use thumbnails?
Have searched through posts but all I found was major hacks or the advice that it is not the best solution - Huh? But surely better to use existing thumbnails that resizing in css?

Imagine 30 additional images of 100- 200k on 1mb internet connection.... help!

[K&K media production]

you can make your own template override for default_images.php

output the additional images with something like this:

Code Select Expand


for ($i = 0; $i < $count_images; $i++) {
$image = $this->product->images[$i];
?>
        <div class="floatleft">
        <a href="<?php echo $image->file_url; ?>" class="modal"><img src="<?php echo $image->file_url_thumb; ?>"></a>
        </div>
<?php
}


[FrankA]

Thank you for responding.

eek  now searching for how to make my own template override.... and it looks a bit over my head. Also puzzled that all search hits for "template override" are in  vm 1.1 forum.

Anyway I am presuming that I need to make a copy of some file ? and insert the suggested code into it somewhere and then place that file in an html folder somewhere? Is that the gist of it?

If anyone has already changed VM to use the actual thumbnails... could you please share. No point re-inventing the wheel.

All I have found in the forums and googling is changing the pixel dimension, I guess people have not noticed the problem that creates if you have a mix of landscape and portrait format additional images that half the 'resized' images will be 2 or more times larger than the other format half. This is obviously a problem with the default install but is effectively hidden by that 50px size limit resulting in very tiny thumbs.

EDIT:  Is this the same thing that you mean - http://forum.virtuemart.net/index.php?topic=90935.0  at top of this forum   NO MORE THEME. 2.0 uses VIEWS (Layout Override)

[K&K media production]

yes

http://docs.virtuemart.net/tutorials/33-templating-layouts/78-introduction-template-system.html

[FrankA]

Having a hard time with this, I cannot find a file called default_images.php so perhaps I misread, do I just create that file with the code you suggested. And then place that in Beez5/html/com_virtuemart/productdetails/default_images.php ?

Has anyone else actually done this and can share exact details? I see lots of people asking for it here, but apart from the useless change to vmsite-ltr.css no other solutions.

[jenkinhill]

I cannot find a file called default_images.php

Is in joomla_root/components/com_virtuemart/views/productdetails/tmpl/

[FrankA]

OK copied that, added the above code right after the existing code for additional images.... so I could see if both bits of code gave the same image but it just broke everything, not even joomla parts of screen - header/menu etc. ?

All that showed on the screen was navigation, and title, as below, no formatting.... all gone. n.b. description of text is in <>

Dog\'s HeadDragon   <left and right navigation>
Back to: UNKNOWN MAKER  <text of link to category, no link>
Donkey (Marbled opaque) (Item title - only text formatted>
Edit this product <link text>
<missing image symbol> Unknown <text of short description that appears before image>


so full code is

Code Select Expand


if (!empty($this->product->images)) {
$image = $this->product->images[0];
?>
<div class="main-image">

<?php
echo $image->displayMediaFull("",true,"rel='vm-additional-images'");
?>

<div class="clear"></div>
</div>
<?php
$count_images = count ($this->product->images);
if ($count_images > 1) {
?>
    <div class="additional-images">
<?php
for ($i = 1; $i < $count_images; $i++) {
$image = $this->product->images[$i];
?>
            <div class="floatleft">
            <?php
                echo $image->displayMediaFull("",true,"rel='vm-additional-images'");
            ?>
            </div>
<?php
}
?>
        <div class="clear"></div>
    </div>
    for ($i = 0; $i < $count_images; $i++) {
$image = $this->product->images[$i];
?>
        <div class="floatleft">
        <a href="<?php echo $image->file_url; ?>" class="modal"><img src="<?php echo $image->file_url_thumb; ?>"></a>
        </div>
<?php
}
<?php
}
}
  // Showing The Additional Images END ?>


[K&K media production]

you must override this

Code Select Expand


for ($i = 1; $i < $count_images; $i++) {
$image = $this->product->images[$i];
?>
            <div class="floatleft">
            <?php
                echo $image->displayMediaFull("",true,"rel='vm-additional-images'");
            ?>
            </div>
<?php
}


with the code from my post above

you have insert it on a other place

[FrankA]

Cool that did it, it does not display the image text which is a shame but... wonderful to get the fast page load and proper sized thumbnails back. Many thanks for your help... my first override

[lostika]

Another solution to use full image as main image, thumbnails as additional image. After click on thumbnail sets the main image with corresponding full image
code is from line 20

Code Select Expand


defined('_JEXEC') or die('Restricted access');
vmJsApi::js( 'fancybox/jquery.fancybox-1.3.4.pack');
vmJsApi::css('jquery.fancybox-1.3.4');
$document = JFactory::getDocument ();
$imageJS = '
jQuery(document).ready(function() {
jQuery("a[rel=vm-additional-images]").fancybox({
"titlePosition" : "inside",
"transitionIn" : "elastic",
"transitionOut" : "elastic"
});
jQuery(".additional-images .product-image").click(function(e) {
e.preventDefault();
jQuery(".main-image img").attr("src",this.href );
jQuery(".main-image img").attr("alt",this.alt );
jQuery(".main-image a").attr("href",this.href );
jQuery(".main-image a").attr("title",this.alt );
var descr = jQuery(this).find("span").text();
jQuery(".main-image .vm-img-desc").text(descr);
});
});
';

$document->addScriptDeclaration ($imageJS);

if (!empty($this->product->images)) {
$image = $this->product->images[0];



?>
<div class="main-image">

<?php

echo $image->displayMediaFull('class="medium-image" id="medium-image"', true, "class='modal'", true);
?>

<div class="clear"></div>
</div>
<?php
$count_images = count ($this->product->images);
if ($count_images > 1) {
?>
    <div class="additional-images">
<?php
for ($i = 0; $i < $count_images; $i++) {
$image = $this->product->images[$i];

?>
            <div class="floatleft">
<a href="<?php echo $image->file_url; ?>" class="product-image">
<img src="<?php echo $image->file_url_thumb; ?>">
<span><?php echo $image->file_description; ?></span>
</a>           
</div>
<?php
}
?>
        <div class="clear"></div>
    </div>
<?php
}
}
  // Showing The Additional Images END ?>


[elgaxton]

I'm facing similar issues, but on Virtuemart3.012. This is the code in my own default_images.php

<?php
/**
*
* Show the product details page
*
* @package   VirtueMart
* @subpackage
* @author Max Milbers, Valerie Isaksen

* @link http://www.virtuemart.net
* @copyright Copyright (c) 2004 - 2010 VirtueMart Team. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php
* VirtueMart is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* @version $Id: default_images.php 9032 2015-11-02 09:19:56Z Milbo $
*/
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');
if(VmConfig::get('usefancy',1)){

vmJsApi::addJScript( 'fancybox/jquery.fancybox-1.3.4.pack', false);
vmJsApi::css('jquery.fancybox-1.3.4');
$document = JFactory::getDocument ();
$imageJS = '
jQuery(document).ready(function() {
   Virtuemart.updateImageEventListeners()
});
Virtuemart.updateImageEventListeners = function() {
   jQuery("a[rel=vm-additional-images]").fancybox({
      "titlePosition"    : "inside",
      "transitionIn"   :   "elastic",
      "transitionOut"   :   "elastic"
   });
   jQuery(".additional-images a.product-image.image-0").removeAttr("rel");
   jQuery(".additional-images img.product-image").click(function() {
      jQuery(".additional-images a.product-image").attr("rel","vm-additional-images" );
      jQuery(this).parent().children("a.product-image").removeAttr("rel");
      var src = jQuery(this).parent().children("a.product-image").attr("href");
      jQuery(".main-image img").attr("src",src);
      jQuery(".main-image img").attr("alt",this.alt );
      jQuery(".main-image a").attr("href",src );
      jQuery(".main-image a").attr("title",this.alt );
      jQuery(".main-image .vm-img-desc").html(this.alt);
      });
   }
   ';
} else {
   vmJsApi::addJScript( 'facebox',false );
   vmJsApi::css( 'facebox' );
   $document = JFactory::getDocument ();
   $imageJS = '
   jQuery(document).ready(function() {
      Virtuemart.updateImageEventListeners()
   });
   Virtuemart.updateImageEventListeners = function() {
      jQuery("a[rel=vm-additional-images]").facebox();
      var imgtitle = jQuery("span.vm-img-desc").text();
      jQuery("#facebox span").html(imgtitle);
   }
   ';
}

vmJsApi::addJScript('imagepopup',$imageJS);

if (!empty($this->product->images)) {
   $image = $this->product->images[0];
   ?>
   <div class="main-image">
      <?php echo $image->displayMediaFull("",true,"rel='vm-additional-images'"); ?>
      <div class="clear"></div>
   </div>
   <?php
}
?>

Please what part of this code do I override?
Thanks

[Studio 42]

@elgaxton : Is this your full code?
What you need to change ?

Code Select Expand

$image->file_url_thumb; is not working in VM 3.0.16, so don't use it, or on update you break your design !
CHeck the original VM code, this generate already thumbnails, perhaps your template not.

[GJC Web Design]

also what is your problem/what are u trying to fix?

This thread you added to is 3 years old...  thumbnails are used everywhere in VM now