kopia lustrzana https://github.com/wagtail/bakerydemo
Remove legacy rich text image styles
The `<div class="rich-text">` wrapper around rich text was disabled by default in Wagtail 2.10 (https://docs.wagtail.io/en/stable/releases/2.10.html#div-class-rich-text-wrappers-removed-from-rich-text) and we'd prefer not to enable the legacy handler, to encourage Wagtail developers to follow current best practice. There is already a `width: 100%` rule in place for all img elements, and since an image with `width: 100%` but no `height: auto` would render with the wrong aspect ratio, it's reasonable to assume that no images on the site rely on `height: auto` being absent. Adding this to the `img` rule therefore makes the `rich-text` rule redundant. The `width: 100%` also meant that the left/right-alignment options for rich text images had no effect - we add a `width: 50%` to those to make them meaningful again. Finally, the responsive-object wrapper for media embeds was dropped in 2.9, so those rules are unused since then. Anyone who feels strongly about restoring responsive embeds is welcome to contribute a PR :-)experiments
rodzic
1fa7cdccd2
commit
2e3b59c8c4
|
@ -37,7 +37,6 @@ INSTALLED_APPS = [
|
|||
'bakerydemo.locations',
|
||||
'bakerydemo.search',
|
||||
|
||||
'wagtail.contrib.legacy.richtext',
|
||||
'wagtail.contrib.search_promotions',
|
||||
'wagtail.contrib.forms',
|
||||
'wagtail.contrib.redirects',
|
||||
|
|
|
@ -160,6 +160,7 @@ figcaption {
|
|||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
figure img {
|
||||
display: block;
|
||||
|
@ -1054,26 +1055,11 @@ span.outline {
|
|||
}
|
||||
|
||||
/* From Wagtail core */
|
||||
/* Responsive image/video classes */
|
||||
.rich-text img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.richtext-image.left{
|
||||
float:left;
|
||||
width: 50%;
|
||||
}
|
||||
.richtext-image.right{
|
||||
float:right;
|
||||
}
|
||||
.responsive-object {
|
||||
position: relative;
|
||||
}
|
||||
.responsive-object iframe,
|
||||
.responsive-object object,
|
||||
.responsive-object embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
}
|
||||
|
|
Ładowanie…
Reference in New Issue