[SOLVED] Images not scaled proportionally in news template

More
8 years 6 months ago #57575 by grabit
I understand perfectly what you are saying and that is the meaning of my thread.

I want my logos to be limited in height to 100 px and in width 350.

In the category blog, I am using the small thumbnail set to be scaled 100x350 and it is working fine.

Later on another page, I am selecting some of those companies to be shown as member of that group and I am using a module inserted in that item.

If I am using small thumbnail in the image setting setting, the logos are 1st too small (first limited by 80x80 pixels because nothing was inputed in the size field) then I selected resize and found 80x80 in the field, I changed that to 350x100 and the images were distorted (see my attachement)



Then the same problem was there when I reselected small thumbnail they were distorted at 350x100 (keeping the size setting of the resize)

The only solution is to put the same size in width and height (200x200) to have the picture not distorted. But this leads me to an not good graphical solution vertical logos are too big (see here ).



The thing I was waiting was like the category where we found a compromise between height and width (see here).



Is it a way to do that with the module?

An Apple a days keeps the doctor away
Attachments:

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

More
8 years 6 months ago #57576 by ggppdk
Hello

do you mean that in your website our default CSS is causing the image to look / be compressed (stretched) ?

you can see if it is the image or CSS fault by right clicking on the image and selecting "view image"


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

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

More
8 years 6 months ago #57580 by ggppdk
Hello

i visited the page and the inline CSS applied at the <img> HTML Tags is as we inteneded:
Code:
width: 100%; height: auto; max-width:200px; /*(which is the configured image width in module parameters)* max-height:200px; /*(which is the configured image height in module parameters)*/

what is wrong with the above ?


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

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

More
8 years 6 months ago #57581 by grabit
I had to change it to 200x200 because it was distorted otherwise and we have to go further in the development.

I will change one page using the module:

www.euric-aisbl.eu/members-euric/europea...er-organisations/efr

for the weekend to 350x150 what is also used in category page without any problems:

www.euric-aisbl.eu/members-euric/affiliated-members

So please go back to see the problem.

The images are well proportioned so I think that the problem is in the default css.

An Apple a days keeps the doctor away

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

More
8 years 6 months ago - 8 years 6 months ago #57583 by ggppdk
Hello

i think i see why this is happening
the CSS code assumes that the images are have the width configured in module parameters,

here is what to do:
use the width that you want e.g. 250
and set the image height to a big value e.g. 2000
(the 2000 will not be reached but it will make sure that width will be reached while thumbnailing)

will see if we can do something about this, may this is better (and will work in all browsers regardless of image size:
Code:
width: auto; height: auto; max-width:100%; max-height:100%;

also i see that the width / height parameters are also used when using specific image thumbnail, but they should not

will make test and update this


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...
Last edit: 8 years 6 months ago by ggppdk.

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

More
8 years 6 months ago - 8 years 6 months ago #57584 by ggppdk
Hello

also try this fix:
edit files
tmpl/news.php
tmpl/carousel.php

change:
Code:
...........=" width: 100%; height: auto; display: block !important; border: 0 !important;";
to
Code:
...........=" width: auto; height: auto; display: block !important; border: 0 !important;";


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...
Last edit: 8 years 6 months ago by ggppdk.

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

Moderators: vistamediajoomlacornerggppdk
Time to create page: 0.475 seconds
Save
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Essential
These cookies are needed to make the website work correctly. You can not disable them.
Display
Accept
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline