Full size image on product page

  • Posts: 17
  • Thank you received: 0
13 years 10 months ago #3776

Is it possible to display the full size image on the product page instead of the (clickable) thumbnail? I have my listings by category, and do want it to be a thumbnail there. However, when the user browses to the actual product page, I would like it to show the full size there, such that the user does not have to click on it to see the bigger size in the iframe window.

Thanks in advance for any help.

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

  • Posts: 82723
  • Thank you received: 13338
  • MODERATOR
13 years 10 months ago #3777

You can do that:
Edit the file show of the view product (via the interface in the menu Display->Views) and replace the code:

echo $this->image->display($image->file_path,true,$image->file_name,'id="hikashop_main_image" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link"');

by the code:
echo '<img 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" />';

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

  • Posts: 17
  • Thank you received: 0
13 years 10 months ago #3778

Nicolas, you are "Da Man"!!! Thank you very much! :)

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

  • Posts: 35
  • Thank you received: 0
13 years 10 months ago #4076

On a similar note, can I limit the display size? eg... 200px x 300px...

some of my images are too large and go outside my template.


or... can I increase the size of the thumbnail, but still keep it as an active thumb?

Stu.

Last edit: 13 years 10 months ago by gemmill.

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

  • Posts: 82723
  • Thank you received: 13338
  • MODERATOR
13 years 10 months ago #4080

Yes.
In the configuration, under the tab files you have two options to define the size of images.
Note that this option will only apply for new upload of images as the resizing process is done when the image is uploaded, so if you already have images, you will have to remove them and reupload them if you want them to be at the new size.

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

  • Posts: 45
  • Thank you received: 0
13 years 1 month ago #24865

Hi Nicolas,

Please how can i display full images size also for porduct variants and if product descirption contain more images ?
They are changing on mouse scroll and when variant is changed..

thank you very much

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

  • Posts: 82723
  • Thank you received: 13338
  • MODERATOR
13 years 1 month ago #24871

The easiest is to use the latest version. With it you can define in the config the thumbnail size of images on the product pages and in the hikashop options of each of your menu/module the thumbnail sizes of the listing.
That way, it will works with variants and won't need any code modification.

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

  • Posts: 6
  • Thank you received: 0
11 years 5 months ago #105680

I am trying to make this happen on Joomla! 2.5 and the latest version of HikaShop but I can't find which view to change it in.

What I need is the main image to be large, and not a thumbnail, and on the left, and then I want the text to the right of it with the description and then the "Add to cart" button below.

Also my social plugin icons are all out of shape.

Can you please help?

The website looks like this at the moment: tenillerogers.cloudaccess.net/wineshop/p...6-2010-verdelho.html

But I would like it to look like the attached.

Attachments:

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

  • Posts: 82723
  • Thank you received: 13338
  • MODERATOR
11 years 5 months ago #105717

For the image, you can simply change the "product page image width/height" options of the configuration. There is no code to edit anymore.

For the positioning changes, you can move the different blocks of code of the file "show_default" of the view "product" via the menu Display->Views the way you want them.

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

  • Posts: 6
  • Thank you received: 0
11 years 5 months ago #106109

nicolas wrote: For the positioning changes, you can move the different blocks of code of the file "show_default" of the view "product" via the menu Display->Views the way you want them.


I went into it and copy-pasted what I thought should change but I really don't know PHP very well.

I have copied:
<div id="hikashop_product_description_main" class="hikashop_product_description_main">
    <?php
    echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
    ?>
  </div>

And put it before the SPAN for the price in the product_right_part

But all it does is push the price and stuff from the right down to the bottom.

Please can you tell me what it is I need to copy and where I need to put it?

I'm really stuck :dry:

Last edit: 11 years 5 months ago by Nayeh.

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

  • Posts: 82723
  • Thank you received: 13338
  • MODERATOR
11 years 5 months ago #106114

That's the solution actually.
What you're missing is that the description being too big for the right area, you need to add a CSS rule to force it on the right or it goes at the bottom because the description takes too much space.
So simply add that CSS and that should be enough:
.hikashop_product_right_part{ width: 45%; }

The following user(s) said Thank You: Nayeh

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

  • Posts: 6
  • Thank you received: 0
11 years 5 months ago #106180

Wonderful! Thanks Nicolas, you are a star!

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

  • Posts: 6
  • Thank you received: 0
11 years 5 months ago #106181

Nayeh wrote: What I need is the main image to be large, and not a thumbnail


Sorry, me again - I can't figure out how to make the image NOT a thumbnail from the clue above (I did a search for that text in the view files and I can't find a match).

Last edit: 11 years 5 months ago by Nayeh.

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

  • Posts: 82723
  • Thank you received: 13338
  • MODERATOR
11 years 5 months ago #106269

In the configuration, under the tab files you have two options to define the size of images on the product page.

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

  • Posts: 6
  • Thank you received: 0
11 years 5 months ago #106270

Oh man I'm dumb... I meant not a LINK lol... sorry!

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

  • Posts: 8
  • Thank you received: 0
11 years 5 months ago #106627

"For the image, you can simply change the "product page image width/height" options of the configuration. There is no code to edit anymore."

Could you please be specific about where this is located? I have looked everywhere and can't find it...

Last edit: 11 years 5 months ago by zoombi3.

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

  • Posts: 2334
  • Thank you received: 403
11 years 5 months ago #106639

Hi there,

Just go in System>Configuration>Main>Images and you'll find the options

The following user(s) said Thank You: zoombi3

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

  • Posts: 11
  • Thank you received: 1
7 years 10 months ago #257834

Hi
This is obviously no longer the right menu options and/or possibly the wrong code..

Could you please update this.. firstly I'm wanting to move the image to the centre of the products page which is reached from the category link and also make the thumbnails larger which appear here..

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

  • Posts: 12953
  • Thank you received: 1778
7 years 10 months ago #257851

Hello,

firstly I'm wanting to move the image to the centre of the products page which is reached from the category link and also make the thumbnails larger which appear here..

Both these things are possible by using some CSS code :
www.hikashop.com/support/documentation/1...the-display.html#css

Also, note that you can still use image options through the page "Hikashop->System>Configuration>Main>Images".

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

  • Posts: 11
  • Thank you received: 1
7 years 10 months ago #257884

Thank you for the microsoft help explaination... yes it very correct but useless to me... the previous replies to this question were detailed responses to the question which were helpful... your documentation is written by people who already have a vast amount of knowledge regarding your product and they assumes we have the same level of knowledge. I read the documentation and watch ALL of your video's and several third party one including the OS Training series on Hika but none of them cover these points unless you listen to the bit that is all very flexible and you can almost edit the whole shop... I could almost write my own program to.. but I don't have the knowledge so we rely on forums and help desks to make the programs work in the way we need them to.. i.e. from another forum post I was able to glean that the thumpnails at the bottom of the product page are refered to as child and so was then able to find the css that worked.. These are not documented any where that I can see.

The product page which is displayed after clicking on the category link isn't talked about any where either... nor is there an ability to control its look either in the menu or the config are except the display>view area... and of course once again if I was dealing with this all the time I would know exactly what all 600 odd of these was the right one but sadly i don't...

So any chance of give me a direct, effect answer on how to make this pic atleast centred on the page...I'll work the rest out..

As I said a different post told me you call the thumbnails "child" so I was able to increase these to 100px. but unfortunately this is was done by editing the CSS directly so I'm guessing that with the next update I'll have to find it again and re-edit.

Last edit: 7 years 10 months ago by maxoid.

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

Time to create page: 0.152 seconds
Powered by Kunena Forum