Different image for thumbnail than product image

  • Posts: 158
  • Thank you received: 6
10 years 10 months ago #138461

Bonjour Nicolas,

I would like to use a cropped image for the menu item "product listing" and then use the full image on the actual product page. We did this before on another site, but now I am working on test.artrageus1.com I reviewed this ticket and found that you edited the code yourself.

I'm building this site in Joomla 3.2.1 so I went into show.php for the product and could not find the same php code in this thread. Would you please post an update on which code to change for Joomla! 3.2?

Merci Beaucoup,

Dawn

Please Log in or Create an account to join the conversation.

  • Posts: 82868
  • Thank you received: 13377
  • MODERATOR
10 years 10 months ago #138649

Hi,

The product page layout has changed quite a bit since then in HikaShop.
Now, you would need to edit the file "show_block_img" and do the modification there.

The change there is stil the same as before.

Please Log in or Create an account to join the conversation.

  • Posts: 158
  • Thank you received: 6
10 years 10 months ago #138850

Hello Nicolas,

I found the show_block_image view and the first part of the code you recommend to change and I changed it; however, I could not find the second line of code. Here is your description from the other thread.

In order to remove the first thumbnail in the product page, you have to edit the view via the menu Display->View.
The view is: product/show

Change:

$image = reset($this->element->images);
To:
reset($this->element->images);
$image = next($this->element->images);
In order to select the second image as current thumbnail.

After that you have to modify the foreach which list all thumbnails
if(count($this->element->images)>1){
  foreach($this->element->images as $image){
With:
if(count($this->element->images)>2){
  $thumbs = $this->element->images;
  array_shift($thumbs);
  foreach($thumbs as $image){


And I think it will solve your problem.

Thanks,

Dawn

Please Log in or Create an account to join the conversation.

  • Posts: 82868
  • Thank you received: 13377
  • MODERATOR
10 years 10 months ago #138864

The second piece is still there but the first line is now changed.
Instead of

if(count($this->element->images)>1){
you now have
if (!empty ($this->element->images) && count($this->element->images) > 1) {
simply change that line to
if (!empty ($this->element->images) && count($this->element->images) > 2) {
and the rest is the same.

Please Log in or Create an account to join the conversation.

  • Posts: 158
  • Thank you received: 6
8 years 4 months ago #245417

My apologies I had not seen that last comment. Ignore this post that I edited.

Last edit: 8 years 4 months ago by artisanwebandprint.

Please Log in or Create an account to join the conversation.

  • Posts: 158
  • Thank you received: 6
8 years 4 months ago #245577

I have changed the php code in the product / show_block_image.php file as described in this thread. I have achieved the goal of hiding the thumbnail image on the product page. However the lightbox is not working on products that have only two images total (thumbnail image and main product image). Here is a video that steps you through the issue: screencast.com/t/0yHzYdmwzWs

Here is the final edit to the product / show_block_image.php...

<?php
/**
 * @package	HikaShop for Joomla!
 * @version	2.6.3
 * @author	hikashop.com
 * @copyright	(C) 2010-2016 HIKARI SOFTWARE. All rights reserved.
 * @license	GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
 */
defined('_JEXEC') or die('Restricted access');
?><?php
$variant_name = '';
$variant_main = '_main';
$display_mode = '';
if(!empty($this->variant_name)) {
	$variant_name = $this->variant_name;
	if(substr($variant_name, 0, 1) != '_')
		$variant_name = '_' . $variant_name;
	$variant_main = $variant_name;
	$display_mode = 'display:none;';
}
?><div id="hikashop_product_image<?php echo $variant_main;?>" class="hikashop_global_image_div" style="<?php echo $display_mode;?>">
	<div id="hikashop_main_image_div<?php echo $variant_name;?>" class="hikashop_main_image_div">
		<?php
			if(!empty ($this->element->images)){
				reset($this->element->images);
$image = next($this->element->images);
			}
			$height = (int)$this->config->get('product_image_y');
			$width = (int)$this->config->get('product_image_x');
			if(empty($height)) $height = (int)$this->config->get('thumbnail_y');
			if(empty($width)) $width = (int)$this->config->get('thumbnail_x');
			$divWidth = $width;
			$divHeight = $height;
			$this->image->checkSize($divWidth,$divHeight,$image);

			if (!$this->config->get('thumbnail')) {
				if(!empty ($this->element->images)){
					echo '<img itemprop="image" src="' . $this->image->uploadFolder_url . $image->file_path . '" alt="' . $image->file_name . '" id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" />';
				}
			} else {
				$style = '';
				if (!empty ($this->element->images) && count($this->element->images) > 1) {
					if (!empty($height)) {
						$style = ' style="height:' . ($height + 20) . 'px;"';
					}
				}
				$variant_name='';
				if(isset($this->variant_name)){
					$variant_name=$this->variant_name;
				}

				?>

				<div class="hikashop_product_main_image_thumb" id="hikashop_image_main_thumb_div<?php echo $variant_name;?>" <?php echo $style;?> >
					<div style="<?php if(!empty($divHeight)){ echo 'height:'.($divHeight+20).'px;'; } ?>text-align:center;clear:both;" class="hikashop_product_main_image">
						<div style="position:relative;text-align:center;clear:both;<?php if(!empty($divWidth)){ echo 'width:'.$divWidth.'px;'; } ?>margin: auto;" class="hikashop_product_main_image_subdiv">
						<?php
							if($this->image->override) {
								echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image'.$variant_name.'" itemprop="image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link"', $width,  $height);
							} else {
								if(empty($this->popup))
									$this->popup = hikashop_get('helper.popup');
								$image_options = array('default' => true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside'));
								$img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options);
								if(@$img->success) {
									$attr = 'title="'.$this->escape(@$image->file_description).'"';
									if (!empty ($this->element->images) && count($this->element->images) > 1) {
										$attr .= ' onclick="return window.localPage.openImage(\'hikashop_main_image'.$variant_name.'\', \''.$variant_name.'\', event);"';
									}
									$html = '<img id="hikashop_main_image'.$variant_name.'" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/>';
									if(!empty($this->element->badges))
										$html .= $this->classbadge->placeBadges($this->image, $this->element->badges, '0', '0',false);

									echo $this->popup->image($html, $img->origin_url, null, $attr);
								}
							}
						?>
						</div>
					</div>
				</div>
<?php if(empty($this->variant_name) && !empty($img->origin_url)) { ?>
				<meta itemprop="image" content="<?php echo $img->origin_url; ?>"/>
<?php
				}
			}
			?>
			</div>
			<div id="hikashop_small_image_div<?php echo $variant_name;?>" class="hikashop_small_image_div">
			<?php
			if (!empty ($this->element->images) && count($this->element->images) > 2) {
				$firstThunb = true;
				$thumbs = $this->element->images;
  array_shift($thumbs);
  foreach($thumbs as $image){
					if($this->image->override) {
						echo $this->image->display($image->file_path, 'hikashop_main_image'.$variant_name, $image->file_name, 'class="hikashop_child_image"','', $width,  $height);
					} else {
						if(empty($this->popup))
							$this->popup = hikashop_get('helper.popup');
						$img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options);
						if(@$img->success) {
							$id = null;
							$classname='hikashop_child_image';
							if($firstThunb) {
								$id = 'hikashop_first_thumbnail'.$variant_name;
								$firstThunb = false;
								$classname.=' hikashop_child_image_active';
							}
							$attr = 'title="'.$this->escape(@$image->file_description).'" onmouseover="return window.localPage.changeImage(this, \'hikashop_main_image'.$variant_name.'\', \''.$img->url.'\', '.$img->width.', '.$img->height.', \''.str_replace("'","\'",@$image->file_description).'\', \''.str_replace("'","\'",@$image->file_name).'\');"';
							$html = '<img class="'.$classname.'" title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/>';
							if(empty($variant_name)) {
								echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image'));
							} else {
								echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image_VARIANT_NAME'));
							}
						}
					}
				}
			}
		?>
	</div>
</div>
<?php
if(empty($variant_name)) {
?>
<script type="text/javascript">
if(!window.localPage)
	window.localPage = {};
if(!window.localPage.images)
	window.localPage.images = {};
window.localPage.changeImage = function(el, id, url, width, height, title, alt) {
	var d = document, target = d.getElementById(id), w = window, o = window.Oby;
	if(!target) return false;
	target.src = url;
	target.width = width;
	target.height = height;
	target.title = title;
	target.alt = alt;
	var thumb_img = null, thumbs_div = d.getElementById('hikashop_small_image_div');
	if(thumbs_div) {
		thumbs_img = thumbs_div.getElementsByTagName('img');
		if(thumbs_img) {
			for(var i = thumbs_img.length - 1; i >= 0; i--) {
				o.removeClass(thumbs_img[i], 'hikashop_child_image_active');
			}
		}
	}
	thumb_img = el.getElementsByTagName('img');
	if(thumb_img) {
		for(var i = thumbs_img.length - 1; i >= 0; i--) {
			o.addClass(thumbs_img[i], 'hikashop_child_image_active');
		}
	}

	window.localPage.images[id] = el;
	return false;
};
window.localPage.openImage = function(id, variant_name, e) {
	if(!variant_name) variant_name = '';
	if(!window.localPage.images[id])
		window.localPage.images[id] = document.getElementById('hikashop_first_thumbnail' + variant_name);

	e = e || window.event;
	e.stopPropagation();
	e.cancelBubble = true;
	window.Oby.cancelEvent(e);
	window.localPage.images[id].click();
	return false;
};
</script>
<?php
}

Am I missing something in the code?

Thanks

Please Log in or Create an account to join the conversation.

  • Posts: 82868
  • Thank you received: 13377
  • MODERATOR
8 years 4 months ago #245592

Hi,

Could you provide a link to the page with the products listing so that we could analyse the situation ?

Please Log in or Create an account to join the conversation.

  • Posts: 158
  • Thank you received: 6
8 years 4 months ago #245665

Sure,

I've PM you with the login as we're in development.

Best,

Dawn

Please Log in or Create an account to join the conversation.

  • Posts: 26158
  • Thank you received: 4028
  • MODERATOR
8 years 4 months ago #245721

Hi,

Your lightbox can't work because you do not have any thumbnail in the page.
So the javascript which is looking for the corresponding thumbnail to launch the gallery (lightbox) cannot find any image to click on.
You can take a look at the JS function "window.localPage.openImage" and also the function "window.localPage.changeImage" to see on what content the current system is working.

If you remove the first thumbnail in your page ; you will also need to rewrite how the main image is added (to not use "openImage" and let the classical image popup)

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 158
  • Thank you received: 6
8 years 4 months ago #245935

Hello,

The idea is to show square images in the product listing. So we make a square image of the main product and then we upload also the regular photograph of the entire product. I am only trying to now show the first or default image in the product view which is working. What you are saying doesn't make sense because I am not trying to turn off the thumbnails, just pass over the first image which is redundant. Why is there not a thumbnail for the second image which is now showing up as the only image?

In any case, please provide me with the code and steps for getting the lightbox to work with the current setup. As a side note, it would be a nice feature to be able to auto crop images to square in the product listing view without having to do all of these workarounds.

Warm Regards,

Dawn

Dawn

Please Log in or Create an account to join the conversation.

  • Posts: 82868
  • Thank you received: 13377
  • MODERATOR
8 years 4 months ago #245964

Hi,

If it's only to get square images (cropped images) on listings then all that is not necessary. I didn't understand that it was what you were trying to do.
HikaShop already has an auto crop feature for thumbnails.
Go in the HikaShop configuration, under the images section, and activate the "force image size" setting and set the "Image scale mode" to "crop" and it will crop the images automatically to fit the dimensions that you specify.
And if you don't want to crop the images on the product page, just edit the file "show_block_img" via the menu Display>Views and change the line:
$image_options = array('default' => true,'forcesize'=>$this->config->get('image_force_size',true),'scale'=>$this->config->get('image_scale_mode','inside'));
to:
$image_options = array('default' => true,'forcesize'=>false,'scale'=>$this->config->get('image_scale_mode','inside'));

That way, it will greatly simplify the managing of your product images, and you won't have to rewrite the whole javascript which handles the image display on the product page.

Please Log in or Create an account to join the conversation.

Time to create page: 0.074 seconds
Powered by Kunena Forum