Improve AMP rendering of richtext, embed blocks (#278)

coderedcms/templates/coderedcms/blocks/embed_video_block.html

@@ -4,7 +4,7 @@
 {% block block_render %}
 
 {% if format == 'amp' %}
-    {{ self.url.html|amp_formatting }}
+    {{ self.url.html|convert_to_amp }}
 {% else %}
     {{ self.url }}
 {% endif %}

coderedcms/templates/coderedcms/blocks/rich_text_block.html

@@ -3,7 +3,7 @@
 {% block block_render %}
 
 {% if format == 'amp' %}
-{{ self|richtext_amp_formatting }}
+{{ self|richtext|convert_to_amp }}
 {% else %}
 {{ self|richtext }}
 {% endif %}

coderedcms/templates/coderedcms/pages/article_page.amp.html

@@ -17,7 +17,7 @@
     {% if self.cover_image %}
     {% image self.cover_image fill-2000x1000 as cover_image %}
     <div>
-        <amp-img src="{{cover_image.url}}" width="{{cover_image.width}}" height="{{cover_image.height}}" layout="responsive" ></app-img>
+        <amp-img src="{{cover_image.url}}" width="{{cover_image.width}}" height="{{cover_image.height}}" layout="responsive" ></amp-img>
     </div>
     {% endif %}
     <div class="container">
@@ -53,4 +53,4 @@
         {% include "coderedcms/includes/struct_data_article.json" with page=self %}
     </script>
     {% endif %}
-{% endblock %}
+{% endblock %}

coderedcms/templatetags/coderedcms_tags.py

@@ -182,19 +182,13 @@ def structured_data_datetime(dt):
 
 
 @register.filter
-def amp_formatting(value):
-    return mark_safe(utils.convert_to_amp(value))
-
-
-@register.filter
-def richtext_amp_formatting(value):
-
+def convert_to_amp(value):
+    """
+    Converts HTML to AMP.
+    """
     if isinstance(value, RichText):
         value = richtext(value.source)
-    else:
-        value = richtext(value)
-
-    return amp_formatting(value)
+    return mark_safe(utils.convert_to_amp(value))
 
 
 @register.simple_tag

coderedcms/tests/test_utils.py

@@ -0,0 +1,31 @@
+from django.test import TestCase
+from coderedcms.utils import convert_to_amp
+
+
+class AMPConversionTestCase(TestCase):
+    """
+    Test case for AMP tag conversions
+    """
+
+    def setUp(self):
+        self.unprocessed_img_html = """<img src="/source.jpg" /><img src="/source2.jpg" />"""  # noqa
+        self.unprocessed_iframe_html = """<iframe src="/source.html"></iframe><iframe src="/source-2.html"></iframe>"""  # noqa
+
+        self.processed_amp_img_html = """<amp-img src="/source.jpg"></amp-img><amp-img src="/source2.jpg"></amp-img>"""  # noqa
+        self.processed_amp_iframe_html = """<amp-iframe layout="responsive" src="/source.html"></amp-iframe><amp-iframe layout="responsive" src="/source-2.html"></amp-iframe>"""  # noqa
+
+    def test_img_processing(self):
+        """
+        Test to verify img tags are converted to amp-img tags.
+        """
+        processed_html = convert_to_amp(self.unprocessed_img_html, pretty=False)
+        self.assertEqual(processed_html, self.processed_amp_img_html)
+
+    def test_iframe_processing(self):
+        """
+        Test to verify iframe tags are converted to amp-iframe tags.
+        """
+        processed_html = convert_to_amp(self.unprocessed_iframe_html, pretty=False)
+        print(self.processed_amp_iframe_html)
+        print(processed_html)
+        self.assertEqual(processed_html, self.processed_amp_iframe_html)

coderedcms/utils.py

@@ -49,7 +49,7 @@ def fix_ical_datetime_format(dt_str):
     return dt_str
 
 
-def convert_to_amp(value):
+def convert_to_amp(value, pretty=True):
     """
     Function that converts non-amp compliant html to valid amp html.
     value must be a string
@@ -58,18 +58,26 @@ def convert_to_amp(value):
 
     # Replace img tags with amp-img
     try:
-        img_tags = soup.find('img')
-        img_tags.name = 'amp-img'
+        img_tags = soup.find_all('img')
+        for img_tag in img_tags:
+            # Force the tag to be non-self-closing i.e. <img.../> becomes <amp-img...></amp-img>
+            img_tag.can_be_empty_element = False
+            # Change tag name from 'img' to 'amp-img'
+            img_tag.name = 'amp-img'
     except AttributeError:
         pass
 
     # Replace iframe tags with amp-iframe
     try:
-        iframe_tags = soup.find('iframe')
-        iframe_tags.name = 'amp-iframe'
-        iframe_tags['layout'] = 'responsive'
+        iframe_tags = soup.find_all('iframe')
+        for iframe_tag in iframe_tags:
+            iframe_tag.name = 'amp-iframe'
+            iframe_tag['layout'] = 'responsive'
 
     except AttributeError:
         pass
 
-    return soup.prettify()
+    if pretty:
+        return soup.prettify()
+
+    return str(soup)

docs/releases/v0.17.0.rst

@@ -15,6 +15,8 @@ Bug fixes
 ---------
 
 * Fix bug where form field without a selected type would cause a 500 error.
+* Render valid AMP images and iframes on ArticlePage and in RichText and Embed
+  blocks.
 
 
 Upgrade considerations
@@ -22,3 +24,6 @@ Upgrade considerations
 
 * You will need to run ``python manage.py makemigrations website`` and
   ``python manage.py migrate`` after upgrading.
+* Template tag ``richtext_amp_formatting`` has been removed and should be
+  replaced with ``richtext|convert_to_amp``.
+* Template tag ``amp_formatting`` has been replaced with ``convert_to_amp``.