diff --git a/docs/building_your_site/frontenddevelopers.rst b/docs/building_your_site/frontenddevelopers.rst index e5f583397..537e1e80b 100644 --- a/docs/building_your_site/frontenddevelopers.rst +++ b/docs/building_your_site/frontenddevelopers.rst @@ -190,6 +190,32 @@ Only fields using ``RichTextField`` need this applied in the template. .. Note:: Note that the template tag loaded differs from the name of the filter. +Responsive Embeds +----------------- + +Wagtail embeds and images are included at their full width, which may overflow the bounds of the content container you've defined in your templates. To make images and embeds responsive -- meaning they'll resize to fit their container -- include the following CSS. + +.. code-block:: css + + .rich-text img { + max-width: 100%; + height: auto; + } + + .responsive-object { + position: relative; + } + .responsive-object iframe, + .responsive-object object, + .responsive-object embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + Internal links (tag) ~~~~~~~~~~~~~~~~~~~~ diff --git a/wagtail/wagtailembeds/embeds.py b/wagtail/wagtailembeds/embeds.py index f8ab35f16..42f396df9 100644 --- a/wagtail/wagtailembeds/embeds.py +++ b/wagtail/wagtailembeds/embeds.py @@ -52,7 +52,7 @@ def embedly(url, max_width=None, key=None): key = settings.EMBEDLY_KEY # Get embedly client - client = Embedly(key=settings.EMBEDLY_KEY) + client = Embedly(key=key) # Call embedly if max_width is not None: