Shopping Basket

 x 

Cart empty


Log In

Find Us Elsewhere

SSL

Forum Search

Keyword

Smaller book image in my store

3 months 2 days ago #3957 by paulearley
I am using amazonws, listing several book selections in a Joomla article. The book images are WAAAY too big, is there a way I can use the amazonws template system or CSS to have the image smaller?

Thanks
Paul Earley

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

3 months 15 hours ago - 3 months 15 hours ago #3958 by boggler
Hello, yes you can always use CSS to control the size that images display at. The images have the CSS classes amazonWS_img.main, and amazonWS_img.thumb

The css in the plugin that controls their display is this:
img.amazonWS_img {
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	display:inline-block;
	border:0px !important;
}
img.amazonWS_img.main {
	float:left;
	margin-right:30px;
}

It is in the plugin file amazonWS/media/css/amazonWS.css, you can edit this, then upload it to the Joomla media/amazonWS/media folder. Try putting the max-width to something less than 100%.

If they are looking very large this might be something to do with your site template. If that is the case you can use the developer tools in Chrome or Firefox to check what is controlling the size. Just right-click on the image and select 'inspect element'.

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

1 month 2 weeks ago - 1 month 2 weeks ago #3979 by b6Hepy1ybbGqGoKKz1Us
greetings from germany

i got the same problem with the pictures.

i found the problem, its a missing dot in the class filename "amazonWS_img main"

<img src=" images-eu.ssl-images-amazon.com/images/I/41y3%2Bsulm-L.jpg " class="amazonWS_img main" align="right">

its a picture showed by the rendered articles, where there is the keyword results exposed. could be the same problem like with the search results pictures

where do i have to fix the missing dot? which file?

thnx & best regards
thomas

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

1 month 2 weeks ago #3984 by boggler
There is no missing dot, this is how css and html work. If you want to give an image multiple classes you just list them in the html separated by spaces, eg class="amazonWS_img main"
<img src=" images-eu.ssl-images-amazon.com/images/I/41y3%2Bsulm-L.jpg " class="amazonWS_img main" align="right">

But in css if you want to refer to an image with multiple classes you separate them with dots, eg img.amazonWS_img.main. Just apply a maximum width to the main image, eg
img.amazonWS_img.main {
	float:left;
	margin-right:30px;
       max-width: 200px;
}

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

1 month 2 weeks ago #3986 by b6Hepy1ybbGqGoKKz1Us
i was placing the dot in the developer tools in firefox and the picture was working correctly, befor that the edge side was cutting the image so it was working not correctly. but it was just in the developer tools. i tryed already to change the size in the css file, but that was not working, that means the image was not exposed correctly

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

1 month 2 weeks ago #3987 by boggler
The image is definitely exposed correctly, I tried it myself in Firefox on our demo site and it works as it should (see screenshot ). There is no missing dot.

I think that it is possible that you are uploading the replacement stylesheet to the wrong place, the file should be uploaded to media/amazonws/css/amazonWS.css, not to the plugin css folder.
Attachments:

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

1 month 2 weeks ago - 1 month 2 weeks ago #3988 by b6Hepy1ybbGqGoKKz1Us
"I think that it is possible that you are uploading the replacement stylesheet to the wrong place"

its copied to the right place


its not the pictures on the main details site, they work on my site too,
its the pictures in the search results

thnx & best regards
thomas

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

1 month 1 week ago #3995 by boggler
Could you give a URL where I can see the problem? It sounds like there might be an issue with your site template. There really is not any difference between the css for the product details page and the search results images, they all have a default max-width of 100%, so they should not be larger than the available space.

You can try setting some specific styles for the images in search results, since they are all inside a container with the searchimage class, for example
div.searchimage img.amazonWS_img.main{
  max-width: 200px;
}

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

Moderators: boggler
Time to create page: 0.484 seconds