Keyword
Please note that official support for commercial extensions & templates is provided in the Subscriber Help Desk.
Support requests should ONLY be directed there and require an active subscription plan.
This forum board is to be used for archive purposes and knowledge exchange ONLY.

Incorrect image height on thumbnails

  • Luke Douglas
  • Luke Douglas's Avatar Topic Author
  • Offline
  • Junior Member
More
4 years 11 months ago - 4 years 11 months ago #172026 by Luke Douglas
Incorrect image height on thumbnails was created by Luke Douglas
I have used SIG (the free version for about 6-7 years and the Pro version for the past 4-5 years). I have 'always' had to add CSS override coding to correct thumbnail borders. I use Joomla on all of my client websites, all are updated to the most recent version, I use the Gantry platform which is the most recent version. It has been a perplexing problem.

webbering.com/images/troubleshooting/sig-thumb-borfder-problem.jpg

Here is the code for a specific thumbnail. It forces a "style="width:200px;height:160px;" " for the <A> tag. However, it also forces a "style="width:200px;height:160px;" in the <IMG> tag. If I view with developer tools, it is calculating the <IMG> tag as "img.sigProImg 172x160". However, in the <A> tag, it calculates the size as "a.sigProLink.fresco 200x172". With a 4 pixel border, I think you can see the problem. The calculation of the <IMG> tag should be "172x144" as the <A> tag contains the "200x160" image background to match up with the 200x160 settings in the component.

<span class="sigProLinkWrapper">
<a href="/images/gallery/2019-04-12-VOCAL-NCVRW-Vigil/2019-04-12-VOCAL-NCVRW-Vigil-001.jpg" class="sigProLink fresco" style="width:200px;height:160px;" rel="fresco[galleryd0f096cea0]" title="" data-fresco-caption="" target="_blank" data-thumb="/cache/jw_sigpro/jwsigpro_cache_d0f096cea0_2019-04-12-vocal-ncvrw-vigil-001.jpg" data-fresco-group="d0f096cea0">
<img class="sigProImg" src="/plugins/content/jw_sigpro/jw_sigpro/includes/images/transparent.gif" alt="Click to enlarge image 2019-04-12-VOCAL-NCVRW-Vigil-001.jpg" title="Click to enlarge image 2019-04-12-VOCAL-NCVRW-Vigil-001.jpg" style="width:200px;height:160px;background-image:url('/cache/jw_sigpro/jwsigpro_cache_d0f096cea0_2019-04-12-vocal-ncvrw-vigil-001.jpg');"></a>
</span>

I have tried enabling "Smart thumbnail resize based on above dimensions" but it had no effect.

I believe the culprit is the "height:auto !important" setting in the CSS.

Here is the link:
vocalonline.org/news/vocal-news/291-2019-vocal-vigil-honoring-our-past-creating-hope-for-the-future

If you have any suggestion, I would appreciate some feedback.
Last edit: 4 years 11 months ago by Luke Douglas.

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

More
4 years 11 months ago #172045 by JoomlaWorks
Replied by JoomlaWorks on topic Incorrect image height on thumbnails
See my response in our helpdesk system. Long story short, it's a CSS issue caused by a global rule in Gantry.

Fotis / JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

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


Powered by Kunena Forum