Product Image Size - Guide

  • Posts: 127
  • Thank you received: 8
13 years 3 months ago #20481

Hello i have started using the shop for a clients page.
Do you have a guide to changing the size of the images in the products page?

What i want to do is increase the size of the images displayed to;
The Large Image either 250px high or 250px wide which ever is greater.

The small images either 100px high or 100px wide which ever is greater.

Dress Displayhttp://www.sweetjojo.com.au/index.php/online-shop/product/show/59-angelina-cotton-pintuck-dress/category_pathway-18

____________________________________________________________

My second question is how do you create the tab display used in several of the 'gallery' sites
www.ricksrc.com/products/nitro/nitro-rustler-4407

I really like how this cart works i just want to learn how to customise the displays a little and make the site pop.

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

  • Posts: 127
  • Thank you received: 8
13 years 3 months ago #20482

Another Question;
www.sweetjojo.com.au/index.php/online-shop

I have created a Content Module which shows the catagories so when the user goes into the site then can swap between the catagories without having to keep going back to the main menu system.

How can lock this so that it will not change when you load a product?
At present when your on the base screen for the shop they appear no worries.
When you change into homewares it updates the catagories to the sub catagories (good idea) but to go back and change to the clothing for example you have to select the hop of the top menu again then once you load into the clothing catagory it disappears again.

I would love it to grab the catagory and expand this into a list and leave the other catagories showing to make it easier for the users.

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

  • Posts: 82725
  • Thank you received: 13338
  • MODERATOR
13 years 3 months ago #20519

1. I invite you to look at that thread: www.hikashop.com/en/support/forum/4-how-...he-product-page.html

2. I invite you to look at that thread: www.hikashop.com/support/forum/8-showcas...m.html?lang=en#15892

3. In the HikaShop options of your module, you have the option "synchronize with content" that you can disable so that the content doesn't not change based on current category.

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

  • Posts: 127
  • Thank you received: 8
13 years 3 months ago #20587

Thanks for your help i have been able to follow that and change the size of the Small image on the Product page, but i cannot seem to get the large image to change.

There is only one size of thumbnails created by hikashop. If you need different sizes, you will have to set the biggest one in the config under the tab files (you will have to delete the folder media/com_hikashop/upload/thumbnails via FTP after your modification so that hikashop can recreate the thumbnails automatically). Then, you will be able to reduce the thumbnails where you want them smaller using CSS (you can edit the CSS of hikashop in the config under the tab display):


For listings of products: .hikashop_product_image img {width: XXXpx !important; height: YYYpx !important; }
For the product page : #hikashop_main_image img {width: XXXpx !important; height: YYYpx !important; }
and for the div of the main image on the product page: .hikashop_product_main_image_thumb img{width: XXXpx !important; height: YYYpx !important;}

where XXX and YYY are the width and height desired.

For the product page's small thumbnails: div#hikashop_product_left_part img.hikashop_child_image{ margin : XXXpx; height:YYYpx; }


I cannot find this line of code in the CSS page, i added it is but more then likly in the wrong place can you give me a line number?

For the product page : #hikashop_main_image img {width: XXXpx !important; height: YYYpx !important; }

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

  • Posts: 82725
  • Thank you received: 13338
  • MODERATOR
13 years 3 months ago #20589

It's normal that you don't find it. You need to add it in the front end CSS file of the hikashop CSS via the interface in the tab Display of the configuration.

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

  • Posts: 127
  • Thank you received: 8
13 years 3 months ago #20608

Ok i found where you change the image size i think, and its worked but now the images are fuzzy i have deleted the location listed how to where else to i have to delete the images to force them to be re-created?

www.sweetjojo.com.au/index.php/online-sh.../category_pathway-40

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

  • Posts: 82725
  • Thank you received: 13338
  • MODERATOR
13 years 3 months ago #20639

You need to delete the files in the folder media/com_hikashop/upload/thumbnail and the thumbnails will be recreated.

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

  • Posts: 127
  • Thank you received: 8
13 years 3 months ago #20663

Cheers thats all that was needed, i have done that and a few other tweaks and its all displaying nowe how i want it.

The only thing i want to change now is the Catagory images when they display are on a grey background without a border and the Products are on a black background with a border...

I want them both to display with a black background with a border. i have had a look through the CSS but cannot see which one controls this, can i have a clue please.

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

  • Posts: 82725
  • Thank you received: 13338
  • MODERATOR
13 years 3 months ago #20665

The border is defined in the CSS of hikashop that you can edit in the interface of the tab Display of the config.

For the background, the option can be found in the hikashop options of your menu/module.

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

  • Posts: 127
  • Thank you received: 8
13 years 3 months ago #20710

I can find the background and i have changed that to black but i cannot find the border, is that in the CSS in the front page or is it a check box in the 'System-Display' settings?

I regards to prices...
Can you display a $ infront of the ammount if so how, and can we change the ',' between the dollars and cents to a '.'?

Last edit: 13 years 3 months ago by twhcreations.

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

  • Posts: 82725
  • Thank you received: 13338
  • MODERATOR
13 years 3 months ago #20712

The border is defined in the front end CSS file of hikashop that you can edit in the interface of the tab Display of the config.

You can personalize the display of prices for a currency via the menu System->Currencies.

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

  • Posts: 20
  • Thank you received: 0
10 years 11 months ago #131170

Dear Nicolas,
I made several attempts to change product image size with no success.
Do you see something wrong in the last 2 rows of the attached image? (thumbs resize works but main product image doesn't...)
Thanks
Claudio



If I add the following code:
.hikashop_product_main_image_thumb img{height: 200px!important;}
the image appears bigger but it overlaps thumbs and product description. The upper left corner of the image seems to be in a fixed position as the picture doesn't recenter after resizing.

Attachments:
Last edit: 10 years 11 months ago by tebba.

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

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

Hi,

The css seems to be correct.
Have you tried to simply change the values in Configuration > Main > Images ?

Thanks to follow that tutorial if the previous settings are not sufficient:
hikashop.com/support/153

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

  • Posts: 20
  • Thank you received: 0
10 years 11 months ago #131200

<<Have you tried to simply change the values in Configuration > Main > Images ?>>

No.. and it solved the issue..... :unsure:

I get lost into so many menu...
thanks for your time

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

  • Posts: 7
  • Thank you received: 0
9 years 3 months ago #207246

Hi,
i am new here, can get my image appear? :silly:

many thanks

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

  • Posts: 82725
  • Thank you received: 13338
  • MODERATOR
9 years 3 months ago #207252

Hi,

Please provide more information on your issue:
- a link to a product page with the issue
- a screenshot of the settings of that product
- a screenshot of the "Images" section of the HikaShop configuration

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

  • Posts: 7
  • Thank you received: 0
9 years 3 months ago #207284

thank you for your reply, i can not get show even one image?

please see attached

many thanks

Attachments:

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

  • Posts: 82725
  • Thank you received: 13338
  • MODERATOR
9 years 3 months ago #207319

Hi,

I wanted to check your issue on your website with the link you provided but I don't see your left module anymore:
take.ms/M72gp
Also, you didn't provide the screenshots I asked for.
So I still can't say much in order to help you.

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

  • Posts: 7
  • Thank you received: 0
9 years 3 months ago #207354

thank you Hikashop support

mistake from my site,

thank you for figure out my issue

I always hear good stuff about Hikasho

many thanks again
anne

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

Time to create page: 0.099 seconds
Powered by Kunena Forum