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:
- Which breakpoints are relevant - Bootstrap or Drupal?
- 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
Comment | File | Size | Author |
---|---|---|---|
2020-11-03 Drupal Barrio images not responsive.png | 1.34 MB | janes_p |
Comments
Comment #2
hatuhay CreditAttribution: hatuhay commentedYou 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.
Comment #3
janes_p CreditAttribution: janes_p commentedPhantastic, 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.
Comment #4
janes_p CreditAttribution: janes_p commented