Chit-Chat

Concrete5 Ecommerce Image issue

Permalink September 16, 2011 at 8:52 AM

No idea which forum to post this in (sorry):
I've been building a nice concrete5 eCommerce store using the plugin. As amazingly flexible as it is, there doesn't seem to be a way of display multiple product images. All I want to do is this:

http://www.bargainbooty.co.uk/gi/20-official-disney-classic-winnie-...

One image, three thumbs, change on hover.

Am I going mental, or is there no way of doing this (decent level coder [made the attached site] no problems getting my hands dirty with php/jquery).

Cheers!

GregJoyce replied on Sep 16, 2011 at 12:47 pm Permalink Reply

A good place for this would be the discussion area for the add-on, every add-on has its own forum and also a support area.

What you are talking about doing is creating a template for the product block. Here are two useful template how-tos:

http://www.concrete5.org/documentation/how-tos/designers/customize-...
http://www.concrete5.org/documentation/how-tos/developers/change-bl...

Here is a good discussion on templates:
http://www.concrete5.org/community/forums/customizing_c5/contributi...

An interesting thing about the product block is that it actually loads two "elements" to finish out all the data display, which it shares with the product list block. So when you open up /packages/core_commerce/blocks/product/view.php you will see that in two places it calls "Loader::packageElement". You will probably want to copy everything from the file 'elements/product/display.php' into your template's view.php instead of loading the element. Now you should have all the code you need to make a mini-gallery for your product block.

bazzlad replied on Oct 5, 2011 at 4:27 pm Permalink Reply

Sorry it's taken so long to reply, had a break - still stuck despite the template advice:

This code creates the $img variable to use later

[code]if ($displayImage) {
$pi = $primaryImage;
if (is_object($pi)) {
if($imageMaxWidth<=0) {$imageMaxWidth = 200;}
if($imageMaxHeight<=0) {$imageMaxHeight = 200;}
$thumb = $ih->getThumbnail($pi, $imageMaxWidth, $imageMaxHeight);
$img = '<img src="' . $thumb->src . '" width="' . $thumb->width . '" height="' . $thumb->height . '" ';
if (is_object($primaryHoverImage)) {
$hthumb = $ih->getThumbnail($primaryHoverImage, $imageMaxWidth, $imageMaxHeight);
if (is_object($hthumb)) {
$img .= 'onmouseover="this.src=\'' . $hthumb->src . '\'" onmouseout="this.src=\'' . $thumb->src . '\'"';
}
}
$img .= ' />';
if (!$useOverlaysL) {
$img = $link_before.$img.$link_after;
}
}

if ($useOverlaysL) {
$images = $product->getAdditionalProductImages();
if (is_object($images[0])) { // load up first image for the lightbox
$fi = $images[0];
if($overlayLightboxImageMaxWidth<=0) {$overlayLightboxImageMaxWidth = 600; }
if($overlayLightboxImageMaxHeight<=0) {$overlayLightboxImageMaxHeight = 600; }
$resized = $ih->getThumbnail($fi, $overlayLightboxImageMaxWidth, $overlayLightboxImageMaxHeight);
$img = '<a href="' . $resized->src .'" class="ccm-core-commerce-add-to-cart-lightbox-image" title="' . $fi->getTitle() . '">' . $img . '</a>';
}
}
}[code]

And this code displays the image

[code]<tr>
<td valign="<?php echo $valign?>" align="<?php echo $halign?>" class="ccm-core-commerce-add-to-cart-thumbnail-top" <?php if ($imageMaxHeight > 0) { ?>style="height:<?php echo $imageMaxHeight?>px"<?php } ?>>
<div class="ccm-core-commerce-add-to-cart-image"><?php echo $img?></div>
</td>
</tr>[code]

I'm still none the wiser to how to display image 2, image 3 etc.

nomaknz replied on May 5, 2012 at 11:21 am Permalink Reply

Seems like this feature is commonly requested, shame it wasn't built in. Does anyone know how to do this? I might be able to if I could work out what code is used to bring in the additional images.

bazzlad replied on May 5, 2012 at 11:27 am Permalink Reply

I did manage to do it in the end, I'll find my code and post it.

bazzlad replied on May 5, 2012 at 11:33 am Permalink Reply

This needs to be in product/view.php

Bear in mind, some of the first block has things that I'm using (fancybox for example) that you probably won't need.

if ($images[0]){
   $imgFile0 = $images[0];
   $thumb0 = $ih->getThumbnail($imgFile0, "105","105");
   $large0 = $ih->getThumbnail($imgFile0, "333","420");
      $images = $product->getAdditionalProductImages();
      if (is_object($images[0])) { // load up first image for the lightbox
         $fi = $images[0];
         $overlayLightboxImageMaxWidth = 500; 
         //if($overlayLightboxImageMaxHeight<=0) {$overlayLightboxImageMaxHeight = 400; }
         $resized = $ih->getThumbnail($fi, $overlayLightboxImageMaxWidth, $overlayLightboxImageMaxHeight);
         $img0 = '<a href="' . $resized->src .'" class="fancybox" data-fancybox-group="gallery">' . '<img src = "' . $large0->src . '" rel="scrollThrough" title="' . $fi->getTitle() . '"  width="257" height="240" class="productImg" id="img0" />' . '</a>';
      }
         $thumb0 = '<a href="' . $resized->src .'" class="thumb fancybox" data-fancybox-group="gallery2">' . '<img src = "' . $thumb0->src  . '" title="' . $imgFile0->getTitle() . '" width="79" height="60" />' . '</a>';
}
if ($images[1]){

Viewing 15 lines of 56 lines. View entire code block.

 
if ($images[0]){
   $imgFile0 = $images[0];
   $thumb0 = $ih->getThumbnail($imgFile0, "105","105");
   $large0 = $ih->getThumbnail($imgFile0, "333","420");
 
      $images = $product->getAdditionalProductImages();
      if (is_object($images[0])) { // load up first image for the lightbox
         $fi = $images[0];
         $overlayLightboxImageMaxWidth = 500; 
         //if($overlayLightboxImageMaxHeight<=0) {$overlayLightboxImageMaxHeight = 400; }
         $resized = $ih->getThumbnail($fi, $overlayLightboxImageMaxWidth, $overlayLightboxImageMaxHeight);
         $img0 = '<a href="' . $resized->src .'" class="fancybox" data-fancybox-group="gallery">' . '<img src = "' . $large0->src . '" rel="scrollThrough" title="' . $fi->getTitle() . '"  width="257" height="240" class="productImg" id="img0" />' . '</a>';
      }
 
         $thumb0 = '<a href="' . $resized->src .'" class="thumb fancybox" data-fancybox-group="gallery2">' . '<img src = "' . $thumb0->src  . '" title="' . $imgFile0->getTitle() . '" width="79" height="60" />' . '</a>';
}
 
if ($images[1]){
   $imgFile1 = $images[1];
   $thumb1 = $ih->getThumbnail($imgFile1, "105","105");
   $large1 = $ih->getThumbnail($imgFile1, "333","420");
 
      $images = $product->getAdditionalProductImages();
      if (is_object($images[1])) { // load up first image for the lightbox
         $fi = $images[1];
         $overlayLightboxImageMaxWidth = 500; 
         //if($overlayLightboxImageMaxHeight<=0) {$overlayLightboxImageMaxHeight = 400; }
         $resized = $ih->getThumbnail($fi, $overlayLightboxImageMaxWidth, $overlayLightboxImageMaxHeight);
         $img1 = '<a href="' . $resized->src .'" class="fancybox" data-fancybox-group="gallery" title="' . $fi->getTitle() . '">' . '<img src = "' . $large1->src . '" rel="scrollThrough"  title="' . $fi->getTitle() . '"  width="257" height="240" class="productImg" id="img1" />' . '</a>';
      }
 
         $thumb1 = '<a href="' . $resized->src .'" class="thumb fancybox" data-fancybox-group="gallery2">' . '<img src = "' . $thumb1->src  . '" title="' . $imgFile1->getTitle() . '" width="79" height="60" />' . '</a>';
 
}
 
if ($images[2]){
   $imgFile2 = $images[2];
   $thumb2 = $ih->getThumbnail($imgFile2, "105","105");
   $large2 = $ih->getThumbnail($imgFile2, "333","420");
 
      $images = $product->getAdditionalProductImages();
      if (is_object($images[2])) { // load up first image for the lightbox
         $fi = $images[2];
         $overlayLightboxImageMaxWidth = 500; 
         //if($overlayLightboxImageMaxHeight<=0) {$overlayLightboxImageMaxHeight = 400; }         
         $resized = $ih->getThumbnail($fi, $overlayLightboxImageMaxWidth, $overlayLightboxImageMaxHeight);
         $img2 = '<a href="' . $resized->src .'" class="fancybox" data-fancybox-group="gallery">' . '<img src = "' . $large2->src . '" rel="scrollThrough"  title="' . $fi->getTitle() . '"  width="257" height="240" class="productImg" id="img2" />' . '</a>';
      }
 
         $thumb2 = '<a href="' . $resized->src .'" class="thumb fancybox" data-fancybox-group="gallery2">' . '<img src = "' . $thumb2->src  . '" title="' . $imgFile2->getTitle() . '" width="79" height="60" />' . '</a>';
 
}
 
 
 
<?php  if ($displayImage) { ?>
   <?php echo $img0; ?>
   <?php echo $img1; ?>
   <?php echo $img2; ?>
 
   <?php  if ($images[0]){ ?>
   <?php echo $thumb0; ?>
   <?php } ?> 
 
   <?php  if ($images[1]){ ?>
   <?php echo $thumb1; ?>
   <?php } ?>
 
   <?php  if ($images[2]){ ?>
   <?php echo $thumb2; ?>
   <?php } ?>
<?php  } ?>

zoinks replied on Aug 4, 2012 at 7:19 pm Permalink Reply

product/view? There is no product/view.

oh, you mean blocks/product/view.php

gotcha. thanks.

didn't work for me, though. Just a lot text and broken images. Then, I put the header stuff back in and it worked up to like 59 where there is an unexpected '<' error.

citytech2 replied on Aug 5, 2012 at 11:04 am Permalink Reply

I have done this many times in various projects. If you want me to do this, then send me a PM

bazzlad replied on Aug 5, 2012 at 12:16 pm Permalink Reply

It's not meant to replace the whole page - replace the image generating part: if you need help I can post the whole thing, but it'll have my layout in it (Which may not be useful to you).

jincmd replied on Feb 6, 2013 at 8:01 pm Permalink Reply

would you be able to post some instructions on what to do with the code aboove?

Forums

Chit-Chat

Concrete5 Ecommerce Image issue

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?