Contrib.social

Floated, resized images inserted via CKEditor are distorted, height is kept

Open on Drupal.org →
Created on 10 January 2023, about 2 years ago
Updated 1 November 2023, over 1 year ago

Problem/Motivation

Floating and size-adjusted image appears correct in CKEditor when creating content, as well as when viewed in Olivero. After saving, the image appears with it's full height, becoming distorted.

This seems to be a general Bootstrap problem, since it happens in these themes:

Steps to reproduce

Create new content, insert an image, adjust its size and align to float left or right with text wrapping. Add a few paragraphs and save the content.

Proposed resolution

Add this, from Olivero theme css/base/base.css:

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

Margin for floated images?

Should we consider adding a bit of margin to floated images?

img.align-left {
  margin: 1em 1em 1em 0;
}
img.align-right {
  margin: 1em 0 1em 1em;
}
🐛 Bug report
Status

Active

Version

3.0

Component

Code

Created by

🇧🇷Brazil amarcanth

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment about 2 years ago →
    🇳🇱Netherlands jurriaanroelofs

    Thank you for bringing this issue to our attention. We apologize for the inconvenience caused by the distorted floating images after saving content. We will investigate this further and consider the proposed change to the CSS rule in the dxpr_theme/css/base/layout.css file.

    We appreciate your patience and understanding while we work on resolving this issue.

  • Comment about 2 years ago →
    🇬🇧United Kingdom shas3n

    Thank you for taking time to look into this issue. It is a great theme (and we are also using the DXPR builder). Solid products overall. Thanks for your work!

  • Comment about 2 years ago →
    🇧🇷Brazil amarcanth

    Hi, sorry it took me a lot to answer. Well, I am attaching an image of what I've done and the results. But before, a few info about my environment. I am using Fedora 36 Linux with KDE, Firefox 109.0, 64 bits, Brave Browser Version 1.47.186 Chromium: 109.0.5414.119 (Official Build) (64-bit) and Chromium Version 109.0.5414.119 (Official Build) Fedora Project (64-bit). The results where the same in all three browsers. To see the results of modification in css file, I pressed ctrl+F5. Here is the screenshot of before and after.

  • Comment about 2 years ago →
    🇧🇷Brazil amarcanth

    Update:

    I was checking this problem again and found out that this will not work when "Aggregate CSS checking" activated in /admin/config/development/performance page. I apologize for forgetting to mention this earlier. With the example I put here, I had already unchecked this option.

  • Comment about 2 years ago →
    🇳🇱Netherlands jurriaanroelofs

    Hi amarcanth, thanks we will test this. Enabling aggregation should not make any difference, if it does we might just need to tweak some weights on CSS files. Are you using the advagg module or just Drupal core's aggregation?

  • Comment about 2 years ago →
    🇧🇷Brazil amarcanth

    Hi JurriaanRoelofs. Thanks for answering. Well, I am using just the Drupal cores's aggregation.

  • Comment over 1 year ago →
    🇩🇰Denmark ressa Copenhagen

    I am moving this from DPXR theme to Boostrap5, since if it is fixed there, it will also be fixed in DPXR theme, since it relies on Bootstrap5, as far as I can see.

  • Comment over 1 year ago →
    🇩🇰Denmark ressa Copenhagen

    Add margin suggestion in Issue Summary.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024