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!
you can make your own template override for default_images.php
output the additional images with something like this:
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
}
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)
yes
http://docs.virtuemart.net/tutorials/33-templating-layouts/78-introduction-template-system.html
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.
Quote from: FrankA on April 29, 2013, 14:19:51 PM
I cannot find a file called default_images.php
Is in joomla_root/components/com_virtuemart/views/productdetails/tmpl/
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
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 ?>
you must override this
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
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 :)
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
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 ?>
I'm facing similar issues, but on Virtuemart3.012. This is the code in my own default_images.php
Quote<?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
@elgaxton : Is this your full code?
What you need to change ?
$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.
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