mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-12-01 11:41:20 +01:00
Code Issues Releases Wiki Activity

Update responsive embeds docs

Browse Source 
The current text still mentions the rich-text class (which is now formally deprecated) alongside responsive-object (which is not deprecated, but off by default). Split up the CSS snippet to make it clear that these are two distinct cases, and eliminate use of rich-text.
This commit is contained in:
Matt Westcott 2020-08-27 12:25:23 +01:00
parent c3475c8fdf
commit e50056c3b0
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/topics/writing_templates.rst
View File

@ -127,15 +127,21 @@ Only fields using ``RichTextField`` need this applied in the template.
Responsive Embeds
-----------------
By default, Wagtail includes embeds and images at their full width, which may overflow the bounds of the content container you've defined in your templates. To address this, Wagtail provides the ability to make images and embeds responsive -- meaning they'll resize to fit their container. Responsive embeds can be enabled by setting ``WAGTAILEMBEDS_RESPONSIVE_HTML = True`` in your project settings; this adds a CSS class of ``responsive-object`` and an inline ``padding-bottom`` style to the embed, to be used in conjunction with CSS such as the following:
As Wagtail does not impose any styling of its own on templates, images and embedded media will be displayed at a fixed width as determined by the HTML. Images can be made to resize to fit their container using a CSS rule such as the following:
.. code-block:: css
.rich-text img {
.body img {
max-width: 100%;
height: auto;
}
where ``body`` is a container element in your template surrounding the images.
Making embedded media resizable is also possible, but typically requires custom style rules matching the media's aspect ratio. To assist in this, Wagtail provides built-in support for responsive embeds, which can be enabled by setting ``WAGTAILEMBEDS_RESPONSIVE_HTML = True`` in your project settings. This adds a CSS class of ``responsive-object`` and an inline ``padding-bottom`` style to the embed, to be used in conjunction with the following CSS:
.. code-block:: css
.responsive-object {
position: relative;
}