Thumbnail/Course Picture Resolution Problem

Hello Chris,

I could not reproduce this on our end, the thumbnails usually scale fine.
Could you provide some info about your environment?

• What WordPress and CLUEVO Version are you using?
• Do you have any optimization or image compression Plugins active?
• Have you declared any custom image sizes in your functions-php?
• Are there maybe any custom stylings active that could be causing this?

Please try to deactivate all plugins other than CLUEVO and activate a standard theme like Twenty Twenty-One.
If this does not help, please check the imagesize shown in the development console of you browser and get back to me.
For opening the development console in chrome, right click the image and choose inspect from the menu. Then in the list of html elements there should somewhere be an image tag that looks similar to this: <img src="https://example.com/wp-content/plugins/cluevo-lms//images//exampleimage.jpg" alt="" />"
If you hover this tag with your mouse the image itself and some information should be displayed. Please provide that information.

Greetings from Austria,
Elias

• This reply was modified 3 years, 5 months ago by eliasatcluevo.
• This reply was modified 3 years, 5 months ago by eliasatcluevo.

Hi Elias,

thank you for your reply!

I did another test and at first, the thumbnails are normally scaled right after an upload, but as soon as you click through the LMS structure, the thumbs are getting blurry again…

What WordPress and CLUEVO Version are you using?
– WordPress version is 5.5.6 – CLUEVO version is 1.7.1

Do you have any optimization or image compression Plugins active?
– We only have 3 Plugins installed: Classic Editor, Ninja Forms and CLUEVO

Have you declared any custom image sizes in your functions-php?
– as far as I know, we haven’t; unfortunately I have no access to the functions-php

Are there maybe any custom stylings active that could be causing this?
– basicall, there is only one design in use, which is the “KnowHow Child Theme”

Here’s the element info from the console when the thumb is shown normally: <img width="60" height="32" src="https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2-60x32.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2-60x32.png 60w, https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2-300x158.png 300w, https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2-1024x538.png 1024w, https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2-768x404.png 768w, https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2-1536x807.png 1536w, https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2-150x79.png 150w, https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2.png 1865w" sizes="(max-width: 60px) 100vw, 60px">

And here’s the element info, after the thumb got its blurry-state: <img width="60" height="32" src="https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2-60x32.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2-60x32.png 60w, https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2-300x158.png 300w, https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2-1024x538.png 1024w, https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2-768x404.png 768w, https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2-1536x807.png 1536w, https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2-150x79.png 150w, https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2.png 1865w" sizes="(max-width: 60px) 100vw, 60px">

Unfortunately, I am not that good in webdesign, so I would really appreciate your help here.

Thank you very much and kind regards,
Chris

Hi Chris,
it looks like the responsive images could be the reason for the blurriness.

this part:

https://infovbhot.verkehrsbuero.lan/wp-content/uploads/2021/06/VERKEHRSBUERO_HOSPITALITY_LOGO_RGB_2104_mitSchutzzone-2.png 1865w” sizes=”(max-width: 60px) 100vw, 60px”

looks to me like the image is defaulting to a 60px width but i am not an expert in responsive images.

The images of the CLUEVO plugin share their settings with the post thumbnails of your theme. To me it looks like your theme has defined a thumbnail size of 60px.
Maybe there is a setting in your theme, where you can increase said thumbnail size.

greetings,
Elias