Product images

Hi

How can the space for product photo be 130x130 at all times.

In categories and home page, because when showing images, some are horizontal, some are vertical 89x130 or 130x89 pixels and it's not nice to have different bottom space.

Thanks

Hi

I think the simpliest way is to set it to "stretch" in settings (I assume You are taking about NSP module).

Hi teitbite,

I dont want to stretch the image in NSP .

I just want to have a specific box or div in 130x130 pixels size (maybe it not the correct definition),
so any kind of horizontal or vertical, 89x130 or 130x89 pixels can fit in it without having different distance from bottom text.

So the text under the photo is align no matter what the photo size is (130 or 89 height).

thanks in advance

Hi

Ok. Now I understand. Please show me Your site.

The site is still under construction,

Can you provide me a solution so i can add photos and complete inserting products.

Thanks in advance

Hi

Sorry. I need to work on a live site to have an exact code. So I'll give You some tips than.

What I would do is to make some small modification to image load element and replace the image with an equal height transparent picture than load proper images as a backgorund with position "center center" and size "auto 100%" this way a middle of the image will be shown.

Hi teitbite,

I didnt know that you dont have a test site for support.

I sent you on your mail details in test site.

Please give me the code changes after, so i can implement them the original site.

thanks in advance

Hi

It's not about test site I can use but about 3rd party extentions which may not allow to make this modification. This is why it's easier to make it directly on Your website. Please send me an ftp access via PM or mail.

Hi teitbite,

I dont use any other plugin and you can even disable K2 if this helps you.

It's the same same site, plus content.

Thanks in advance

Hi

I've found ftp access in mails. Here are modified files:

_blank.png - to joomla /images/ folder
layout.parts.php - to joomla /modules/mod_news_pro_gk4/tmpl/

Hi,

I did it, but it's not working, it stretches images and i believe you agree that is not a professional way to do this.

I want images to keep their dimensions, by setting a space of 139x139 pixels so every image can fit keeping the same distance always.

It is very logical to have horizontal or vertical product images, not all products have the same dimensions.

Thanks for your understanding, please provide me a drastic solution for this

Hi

So right now I'm not sure if I understood You correctly at the beginning. Looks like Your question was not about images as I thought but about product boxes. Remove last changes and try add this code to override.css (remember to allow using override in template settings).

Code: Select all

.nspArt > div > div >a {
display: block;
height: 130px;
}


Thanks!

that's what i wanted.

One more question: how can i align all photos to bottom?
I tried "vertical-align:baseline;" but didnt work.

Thanks again

Hi

Try this code:

Code: Select all

.nspArt > div > div >a {
    position: relative;
}

.nspArt > div > div >a img {
    position: absolute;
    bottom: 0;
}


but it's just a guess, so it may not work.

I tried it (with the previous addition you gave me, but it didnt work)

.nspArt > div > div >a {
display: block;
height: 130px;
position: relative;
}

.nspArt > div > div >a img {
position: absolute;
bottom: 0;
}

Thanks

Hi

Can You please show me an example of a smaller image so I'll be able to check the code. I had to guess because all Your images are covering 100% of height so no way to make tests with that.

Hi,

I hope this image helps.
Image sizes are 130x86 or 86x130 pixels.

Thanks

Hi

I'm really sorry, but I cannot locate the page where You have made this screen ;/ All I can see are equal in height images like this:

Every time you try to avoid to give a solution, don't you have a test site to check if the solution you suggest works?
You can simply ad 2 photos with 89x130 and 130x89 pixels and see the results.

- In the previous message, you asked for the photo, i have sent you the photo from the original site.
download/file.php?id=10391

- This photo is from the demo site, after your post "by teitbite » Tue Jun 11, 2013 9:40 am"
That it didn't work and the images are distorted !! - Check the 1rst and 2nd image to see.
download/file.php?id=10392&t=1

Thanks in advance

Hi

When I asked to show me an example I didn't have an image in mind. I cannot work with the example code if I see only an image. I need to see Your site to be the most accurate with the solution, but ok I'll prepare it myself and will try.

Ok I did, but the code I gave You couple of posts before is working fine. Just one more line to center the image was missing. So code which worked looks like this:

Code: Select all

.nspArt > div > div >a {
display: block;
height: 130px;
position: relative;
}

.nspArt > div > div >a img {
position: absolute;
bottom: 0;
margin: 0 auto 10px;
}


So You have tried that already and said it's not working. This is why I need to see a live example. Please send me an url to the page where I can see it.