Missing “,” in html for thumbnails

  • Resolved henningbue

    (@henningbue)


    7 years, 2 months ago

    Hey there, after my the thumbs of my posts look very bad though I’ve set a perfect size for them I did some research in Sourcecode and there I found a mistake in the “sizes”-attribute which is automatically added to the thumbnails.
    Between the “max-width:” and the “100vw” a comma is missed.
    When I manually add it, the thumbnails are fine but without it they’re ugly.
    I’ve already did some research in the plugin files, but unfortunately I cannot find the code which is the reason for this behaviour, can you help me?

    The line of code: sizes=”(max-width: 270px) 100vw, 270px”

    P.S.: It’s a fantastic Plugin which you’ve created here! ??

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author johnzenausa

    (@johnzenausa)

    @henningbue

    I’m checking it out now.

    Plugin Author johnzenausa

    (@johnzenausa)

    Where exactly are the thumbnails coming up funny. The way I see it the code looks correct.

    I have attached an image below:

    https://motoroilinfo.com/2018-01-15_17-20-14.jpg

    As you can see the image looks fine.

    • This reply was modified 7 years, 2 months ago by johnzenausa.
    Thread Starter henningbue

    (@henningbue)

    @johnzenausa
    yes the Images are there, but the looks like a kind of “crunchy” (I don’t know a better english word for it).
    They should be sharp and clear.
    You can easily check this if you take a look on the code with the developer-tools of your browser and check the following html-code:

    
img src="https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459.jpg" class="alignleft more-column wp-post-image" alt="" srcset="https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459.jpg 2048w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-300x200.jpg 300w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-768x512.jpg 768w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-1280x853.jpg 1280w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-150x100.jpg 150w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-250x167.jpg 250w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-350x233.jpg 350w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-610x407.jpg 610w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-1080x720.jpg 1080w" sizes="(max-width: 270px), 100vw, 270px" width="270" height="180">

    There in the forelast line of code the “sizes” are defined and when you put manually a “,” between “(max-width: 270px)” and the “100vw” and press enter, then you can see how the image will change from this kind of crunchy-look to cristal-sharp ??

    Hope you’ll understand this ??
    Mfg Henning

    • This reply was modified 7 years, 2 months ago by henningbue. Reason: I forgot, that www.remarpro.com will render HTML-Code in Replys so I've had to delete the opening "<" at the beginning of HTML-Code :)
    • This reply was modified 7 years, 2 months ago by Jan Dembowski. Reason: Fixed formatting
    Thread Starter henningbue

    (@henningbue)

    Ah sorry, I’ve just pasted my manually corrected Code from Dev-Tools, the original code looks like this:
    <img src="https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459.jpg" class="alignleft more-column wp-post-image" alt="" srcset="https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459.jpg 2048w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-300x200.jpg 300w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-768x512.jpg 768w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-1280x853.jpg 1280w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-150x100.jpg 150w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-250x167.jpg 250w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-350x233.jpg 350w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-610x407.jpg 610w, https://teiltonung.de/wp-content/uploads/sites/7/2017/12/MG_5459-1080x720.jpg 1080w" sizes="(max-width: 270px) 100vw, 270px" width="270" height="180">

    Plugin Author johnzenausa

    (@johnzenausa)

    Okay give me a couple of days to check it out.

    Plugin Author johnzenausa

    (@johnzenausa)

    I see the problem, you are 100% correct. Didn’t look close enough I guess. The problem will be resolved on the next update.

    Plugin Author johnzenausa

    (@johnzenausa)

    The plugin is set up when (max-width: 270px) 100vw tells a browser to load low resolution image when its width is less or equal to 270px.

    I’m working on a fix for you and will be available in github when finished.

    Thread Starter henningbue

    (@henningbue)

    Thank you very much @johnzenausa ??

    Plugin Author johnzenausa

    (@johnzenausa)

    I haven’t forgotten about you. I’m going to add an option in the admin menu to turn off this wp feature via checkbox. That way all users will have the option. Available in next update.

    Plugin Author johnzenausa

    (@johnzenausa)

    Please update to the latest version. Images should remain high quality.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Missing “,” in html for thumbnails’ is closed to new replies.