Problem/Motivation

Images are larger than the parent element by default (see attached screen)

Steps to reproduce

Unformatted List view of articles with bootstrap row classes col-12 col-lg-6 col-xl-4 (Bootstrap Grid view results in rather strange formatting, e.g. padding/margins not aligned)

Proposed resolution

Adding img-fluid class directly to images - recommended approach of bootstrap framework - https://getbootstrap.com/docs/4.4/content/images/

This achieves the desired result with a manual fix in the browser inspect mode.

Views: No place was found where the img-fluid class could be added for views; adding the class to the image view field appears too far up in the div hierarchy and has no effect in Barrio.

The same issue appears outside views with normal image formatting.

Question: Is the only option to override the twig image template? Wouldn't it be better if img-fluid would be part of the template by default?

Follow-up questions:

  1. Which breakpoints are relevant - Bootstrap or Drupal?
  2. Do Drupal breakpoints and image styles have an effect when using the Bootstrap framework?

My impression is that Drupal breakpoints and image styles have no effect at all.

Note: I was using the Bootstrap theme (based on Bootstrap 3) with Drupal 8 which worked mostly out of the box as expected. I want to use Bootstrap 4 with Drupal 9 now, but I am rather struggling with Barrio (spending hours...). A few examples of common cases would be helpful due to the different underlying concept (obviously relying much more on the Bootstrap framework).

Remaining tasks

User interface changes

API changes

Data model changes

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

janes_p created an issue. See original summary.

hatuhay’s picture

You can enable ".content img" as responsive, on the Barrio's adminitration page.
Or you can add: .content img {max-width: 100%; height: auto;} to your style sheet.
Turning all images as default responsive do not fit all.

janes_p’s picture

Phantastic, Alberto - many thanks for the solution and the very quick response! I should have asked earlier 😉. Maybe it would be a good idea to turn on fluid images by default.

janes_p’s picture

Status: Active » Closed (works as designed)