Hello Alain,
There is no built-in option for a 2x2 grid of large images: the default product image block is one main image with thumbnails next to it. You do not need a YOOtheme template for this, a small HikaShop view override of show_block_img.php is enough.
Do it as an override so a HikaShop update will not overwrite it: in the back end, go to Display > Views, find the "product / show_block_img" view and edit it there (this is the update-safe way); or place the file at templates/YOUR_TEMPLATE/html/com_hikashop/product/show_block_img.php.
Here is a version that shows the first four product images in a 2x2 grid (it replaces the usual main-image-plus-thumbnails markup):
Code:
<?php
// Show the first 4 product images as a 2x2 grid.
$images = !empty($this->element->images) ? array_slice($this->element->images, 0, 4) : array();
$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');
$opts = array('default' => true, 'forcesize' => $this->config->get('image_force_size', true), 'scale' => $this->config->get('image_scale_mode', 'inside'));
?>
<div id="hikashop_product_image_main" class="hikashop_global_image_div hikashop_img_grid">
<?php
foreach($images as $image) {
echo '<div class="hikashop_img_grid_cell">';
if($this->image->override) {
echo $this->image->display(@$image->file_path, true, @$image->file_name, '', '', $width, $height);
} else {
$img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $opts);
if(@$img->success) {
echo '<img src="'.$img->url.'" alt="'.$this->escape((string)@$image->file_name).'" title="'.$this->escape((string)@$image->file_description).'" />';
}
}
echo '</div>';
}
?>
</div>
<style>
.hikashop_img_grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; max-width:<?php echo (2*$width)+10; ?>px; margin:auto; }
.hikashop_img_grid_cell img { width:100%; height:auto; display:block; }
@media (max-width:480px){ .hikashop_img_grid{ grid-template-columns:1fr; } }
</style>
A few notes:
- It uses your configured product image dimensions, so the four images are rendered at the large/hero size, not the small thumbnail size.
- It shows the first four images of the product (fewer if the product has fewer); images beyond the first four are not shown with this layout.
- The grid drops to a single column on small screens; adjust the gap and max-width in the small style block to taste.
Topic Author
