Insert product image in product layout

  • Posts: 634
  • Thank you received: 16
  • Hikashop Business
10 years 10 months ago #102690

This is very simple:


What code to insert a product image in the product layout?

My image names they all follow this pattern:

(product_code)-01
(product_code)-03
(product_code)-03

I want to insert in a certain place image -01 with my own size not depending on the HikaShop parameters for iamge and thumbnails.

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

  • Posts: 13201
  • Thank you received: 2322
10 years 10 months ago #102707

Hi,

You just have to edit the view "product / show_default" from the Display > Views menu, and add the html tag to display the image.

Something like:

<img src="<?php echo 'imagePath/'.$this->element->product_code.'-01.png';?>" alt="<?php echo $this->element->product_code.'-01'; ?>" style="" />
<img src="<?php echo 'imagePath/'.$this->element->product_code.'-02.png';?>" alt="<?php echo $this->element->product_code.'-02'; ?>" style="" />
<img src="<?php echo 'imagePath/'.$this->element->product_code.'-03.png';?>" alt="<?php echo $this->element->product_code.'-03'; ?>" style="" />

Last edit: 10 years 10 months ago by Xavier.
The following user(s) said Thank You: PeterChain

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

  • Posts: 634
  • Thank you received: 16
  • Hikashop Business
10 years 10 months ago #102734

I mussed something important!

How to check for the availability fo the picture?

For some products I have 10 pictures, for others 5, so I need the check code for each picture before publishing.

Could you be so kind to help me with this?

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

  • Posts: 25994
  • Thank you received: 4004
  • MODERATOR
10 years 10 months ago #102749

Hi,

You can use JFile::exists function, like:

<?php
for($i = 1; $i <= 10; $i++) {
    $j = ($i < 10)?'0':'' . $i;
    if(JFile::exists(JPATH_ROOT . '/imagePath/'.$this->element->product_code.'-'.$j.'.png')) {
        echo '<img src="imagePath/'.$this->element->product_code.'-'.$j.'.png" alt="" />';
    }
}
?>
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.
The following user(s) said Thank You: PeterChain

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

  • Posts: 634
  • Thank you received: 16
  • Hikashop Business
10 years 10 months ago #103274

Hi,

all this help was successful so big thanks for it!

But now a new problem comes with this.

My client is in love with HikaMarket drag and drop feature and is changing the sequence of pictures so not always the product_name-01 picture is the first one to be shown. This means that I need a way to get the names of the pictures not by my logical ordering system but by the way they are ordered in hikamarket (or whatever in admin).

I mean, this:

<img src="<?php echo 'imagePath/'.$this->element->product_code.'-01.png';?>

should be somehow converted to this:

<img src="<?php echo 'imagePath/'.$this->element-> (name of picture by its order of appearance number) '; ?>

or better explained

<img src="<?php echo first_picture;?>
<img src="<?php echo second_picture;?>
<img src="<?php echo third_picture;?>
...

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

  • Posts: 25994
  • Thank you received: 4004
  • MODERATOR
10 years 10 months ago #103289

Hi,

So you do not want at all display some pre-defined images but you want to display the product images, like the view "show_block_img" does, right ?

In the product page, you can access to "$this->element->images" array which contains all images in the right order.
You can take a look at the view "product | show_block_img" and see own the thumbnails images are displayed at the end of the view.
Using the help image is not an obligation, you can just use the objects "$image" to get the file_path information (and file_name).

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.
The following user(s) said Thank You: PeterChain

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

  • Posts: 634
  • Thank you received: 16
  • Hikashop Business
10 years 10 months ago #103291

Thanks! I'll take a look...

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

  • Posts: 634
  • Thank you received: 16
  • Hikashop Business
10 years 10 months ago #103575

WITHOUT THE PROPER PHP KNOWLEDGE and the lack of understanding of function display() I managed to put this code in my site:

			<?php
			if (!empty ($this->element->images) && count($this->element->images) > 1) {
				foreach ($this->element->images as $image) {

					$height = $this->config->get('product_image_y');
					$width = $this->config->get('product_image_x');
					if(empty($height)) $height=$this->config->get('thumbnail_y');
					if(empty($width)) $width=$this->config->get('thumbnail_x');?>

				
				<td>
				<?php
				echo '<img width="110px" src="'.$this->image->display($image->file_path, 'hikashop_main_image', '', '','', $width,  $height)
				?>
				</td>
				
				
			<?php
				}
			}
			?>
It gives me want I want, but something extra I don't want, void thumbnails pointing to this URL

http://localhost:8888/activacions/%3Ca%20title=



Could somebody please help me tune-up this small piece of code, I'm pretty sure it must be some very stupid flaw in my coding.

Thank you

Attachments:
Last edit: 10 years 10 months ago by Jerome. Reason: Add [code]

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

  • Posts: 25994
  • Thank you received: 4004
  • MODERATOR
10 years 10 months ago #103578

Hi,

Using the function "$this->image->display()" will display the image with all HikaShop features (thumbnail + popup).
You are mixing two different and incompatibles way to display an image. So it could not work.

So, you can display images by creating the "<img/>" tag yourself or you can use the HikaShop helper image. But not both in the same time.

The fast fix is to replace:

echo '<img width="110px" src="'.$this->image->display($image->file_path, 'hikashop_main_image', '', '','', $width,  $height)
By this:
echo $this->image->display($image->file_path, 'hikashop_main_image', '', '','', $width,  $height);
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.
The following user(s) said Thank You: PeterChain

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

  • Posts: 634
  • Thank you received: 16
  • Hikashop Business
10 years 10 months ago #103580

It worked perfectly!

THANK YOU A LOT! You're a great team!

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

  • Posts: 234
  • Thank you received: 4
6 years 1 month ago #286922

Hello Xavier

I am trying your code with no avail. Could you help, this is the code I am using

<div id="hikashop_product_right_part" class="hikashop_product_right_part hkc-md-6">
<img src="<?php echo 'http://www.craven-equipment.co.uk/images/'.$this->element->product_code.'Sticker.png';?>" alt="<?php echo $this->element->product_code.'A-COM-BBL'; ?>" style="" />
As I would like a specific image to be shown above the product title in the right hand side.

Could you please help.

Cheers
Iain

Last edit: 6 years 1 month ago by nicolas. Reason: please use [code] tags.

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

  • Posts: 81361
  • Thank you received: 13035
  • MODERATOR
6 years 1 month ago #286955

Hi,

The code looks fine.
Could you provide a link to a product page so that we can see the result ?

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

  • Posts: 234
  • Thank you received: 4
6 years 1 month ago #286974

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

  • Posts: 81361
  • Thank you received: 13035
  • MODERATOR
6 years 1 month ago #286975

Hi,

So in your code you have:
<div id="hikashop_product_right_part" class="hikashop_product_right_part hkc-md-6">
But if I look at your link, I see that:
monosnap.com/file/BILLsjh9UWirGyjoOEMHyHTIvGjuI5
As you can see, the " hkc-md-6" part is missing.
So you're not adding your img tag in the correct view file.
Please use the "Display view files" setting of the HikaShop configuration to check which view file you need to modify.

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

  • Posts: 234
  • Thank you received: 4
6 years 1 month ago #287123

Hi Thanks for that, which would be the file I need to add this to?

Cheers
Iain

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

  • Posts: 81361
  • Thank you received: 13035
  • MODERATOR
6 years 1 month ago #287124

Hi,

It could be show_default, or show_reverse or show_tabular or a custom show_ file you might have.
The Display view files setting will tell you which view file is used for the display of the area where you want to add your code.

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

Time to create page: 0.097 seconds
Powered by Kunena Forum