Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • January 7, 2019 at 11:05 am #1050824
    tommy1989

    Hi, ich nutze den Avia Layout Architekt für meine Seiten.
    In den Texten füge ich Bilder in Originalgröße ein (500x333px), was auch mit der Ausrichtung und allem super funktioniert.
    Sobald ich aber eine Bildbeschreibung unter dem Bild einfüge, wird das Bild unscharf.
    Entferne ich die Beschreibung, ist es wieder scharf.
    Ich habe auch bereits versucht, ein Bild mit einer höheren Auflösung (4256x2832px) einzufügen und dann die eingestellte mittlere Größe von 500x333px ausgewählt.
    Auch hier habe ich den gleichen Effekt, dass das Bild unscharf wird, sobald ich eine Beschriftung einfüge.

    January 8, 2019 at 5:22 am #1051178
    Rikard

    Hallo tommy1989,

    Where can we see the problem images in question?

    LG,
    Rikard

    January 8, 2019 at 9:50 pm #1051507
    tommy1989

    Hello Rikard,

    At first, sorry for my English…

    You can find the access data in the private content.

    If you click at the image to edit it, you can see in the preview that the image is a bit blurred. It’s the same in the frontend.
    So, when you remove the image description in the editor, the image is sharp.
    You can experiment as much as you like in the content of this page “Anreise” – it does not matter.

    Greetings
    tommy1989

    January 11, 2019 at 7:40 am #1052611
    Ismael

    Hi,

    This should help resize the image on the frontend.

    #top .wp-caption img {
    height: fit-content;
}

    Have you tried to upload a larger image?

    Best regards,
    Ismael

    January 13, 2019 at 2:32 pm #1053360
    tommy1989

    Hello Ismael,

    I added your code in the Quick CSS, but nothing changed.

    I tried a larger image on the page “Anreise”. It’s the same – with an image description the image is a bit blurry, it’s sharp without description.

    By the way:
    I use images with descrption and without.
    When I write a description, a frame with a small border appears automatically around the image. There isn’t any frame.around the images, which are without description.
    Whatever, I can use the images with or without a frame, but for some images I need a description. The style of the images (with or without any description) should constantly be the same.
    Also I want a margin of 10px at the bottom of the images or the frames (because the text that belongs to the content is too close to it)
    Where can I adjust this and where can I change the font-style of the image-description?

    Thank you very much for your support.

    Greetings

    tommy1989

    January 14, 2019 at 8:34 am #1053571
    Ismael

    Hi,

    Thanks for the update. Are you open to removing the border or frame? You can use this css code to remove it.

    #top .wp-caption img {
    padding: 0;
}

    Best regards,
    Ismael

    January 20, 2019 at 6:19 pm #1056230
    tommy1989

    Hi,

    the border is removed but the image is still blurry…

    Greetings,

    tommy

    January 22, 2019 at 3:34 am #1056998
    Ismael

    Hi,

    It doesn’t look blurry on my end. Have you tried to insert a larger image? The size of the current image is only 500x300px.

    Best regards,
    Ismael

    February 3, 2019 at 1:32 pm #1062209
    tommy1989

    Hi,
    I inserted a larger image (4256x2832px) on the page “Anreise” with the description “Olbia” under it. The problem is still the same.
    The picture is really sharp if there isn’t any description under it.
    As soon as I insert a description the image gets a bit blurry and, after removing the description, the image turns back to its original sharpness.
    Please look on the page “Anreise” and compare the sharpness of the 2 (same) images with and without description. You will see, that the details of the first image get lightly blurry.
    Thank you very much.

    Regards
    tommy

    February 5, 2019 at 3:56 pm #1063205
    Ismael

    Hi,

    I tried to check the page again but it’s no longer available. Did you move the site? Please give us the link to the new site and create a test page if possible.

    Best regards,
    Ismael

    February 5, 2019 at 10:02 pm #1063352
    tommy1989

    Hi,
    I didn’t move the site. But I just tried and now it is available.

    To see the different sharpnesses of the images you must go to the page in the frontend.
    I send you the link in the private content.

    Thank you for helping,
    Tommy

    February 6, 2019 at 11:21 am #1063560
    Guenni007

    what I find much worse than the loss of sharpness is the slight color shift.
    The picture looks like a light veil over it, and slips into the greenish (very little but visible) over.
    (like a hue-rotation on 4 or 5deg)

    but I never saw the one with the different sharpness until you brought it up here. Thanks – now it bothers me too ;)

    https://webers-testseite.de/images-with-caption-in-text-block/

    Edit: it seems to be the padding of 5px to center that image in the border-frame
    if you get rid of it on developer tools by uncheck the rule the image is sharp

    February 6, 2019 at 11:44 am #1063564
    Guenni007

    it is definitly that the padding as Ismael supposed caused the issue – so it is better on the div container than on the image:
    ( well to see at the left rear table leg and at the shadow underneath. )
    the padding on the img does scale it – thats why there is a difference on sharpness

    div .wp-caption { padding: 4px }
#top .wp-caption img { padding: 0 !important}

    4px because of 1px border-width

    i have now three images

    • the first with the padding to the image ( enfold default)
    • the second with caption but with the padding on the container and image no padding! (see code above)
    • the third without caption

    https://webers-testseite.de/images-with-caption-in-text-block/

    by the way: delete all cachings and if you merge css and js on Enfold Options / Performance – refresh them

    February 7, 2019 at 9:04 pm #1064307
    tommy1989

    Hello guenni007,

    Thank you very much for your kind help.
    Your code was the solution to my problem. :)

    Greetings
    tommy

    February 8, 2019 at 10:02 am #1064496
    Guenni007

    You’re welcome – but
    Ismael told you to set the padding to zero : if it’s not effective immediately; try it with !important or it is a caching / merged file reason.

    But as I said: thanks for the tip – I wouldn’t have noticed that without the A/B comparison.

    February 8, 2019 at 10:24 am #1064505
    Rikard

    Hi,

    Thanks for the helping out @guenni007. Please let us know if you should need any further help on the topic or if we can close it @tommy1989.

    Best regards,
    Rikard

    February 8, 2019 at 6:52 pm #1064733
    Guenni007

    But Rikard – that would be great if this could be the default behavior. That padding goes to the parentcontainer and not to the image.

    February 9, 2019 at 2:36 pm #1064940
    tommy1989

    Hi,

    now I have my solution. :)

    You can close this topic.

    Thanks a lot

    tommy

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • You must be logged in to reply to this topic.