Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author H?kan Wennerberg

    (@puffythepirateboy)

    Hi,

    When using responsive behavior images most often gets blurry or “pixly”. Its nothing that the actual widget is doing, its just displaying your image, its the nature of responsive design.

    If you have an area of 260px, make sure to upload a 260px image and also to choose the “Full size” version of the image when picking it for the widget. Next make sure you have fixed size behavior, it should say width 260px automatically. Verify that the image seen on the page is actually rendered as 260px using the browser development tools too. If its shown in a different size, there might be CSS rules in your theme causing that.

    Thread Starter wordptester

    (@wordptester)

    Hello, thanks first for your immediate response.
    The Plugin shows the image (260×360) (with your recommended settings) first cut the central sector automatically in thumbnail-size (150×150) and this blown up to 260×360. Therefore the pictures are blurry all the time.
    The code now is:
    <img class="hwim-image" style="width:260";height:360px;" src="https://domain.de/imagename260x360-150x150.jpg"
    Note that some function adds this part to the original name of the file: “-150×150.jpg”.
    I don’t know where to stop this behavior (to choose first the thumbnail-size and then blow it up).
    I don’t understand too, what you mean with “its the nature of responsive design”. An image of a certain size has to be displayed in this size, especially when a css-definition prescribes it.

    Plugin Author H?kan Wennerberg

    (@puffythepirateboy)

    The issue is probably that you are not selecting the correct image size when picking the image. If you open up the image selector and click an image. Then you have a panel to the right with a few options in it. One of the options is what image size to use (from those generated by WordPress). Choose “full version” and it will look much better.

    When you have done this, the link should not include the “-150×150” part of the image URL.

    Thread Starter wordptester

    (@wordptester)

    Oh sorry for being so blind ;-(
    Yes, I chose the image with a double-click, not remembering these WP-size-options being then (bottom right) out of the canvas.

    I never had to check the source-code (referring to the -150×150-add) when I used these WP-image-options, because if you choose them, you know why an image has a distinct size (and suppose it’s prescribed in the css, not per renamed image).

    A big thanks for helping.

    P.S. Still I don’t understand what’s the meaning of responsive display size in the plugin. Normally the adequate section of the css-file serves for the correct ‘responsive’ position and size of an image. When I choose ‘responsive’ in your plugin, shouldn’t I better get additionally some example-canvas-sizes there as check-options or something? Now I suppose, with this option checked, the plugin blows the image to the available space?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘All Images blurred’ is closed to new replies.