jrief / djangocms-cascade

Build Single Page Applications using the Django-CMS plugin system
MIT License
165 stars 85 forks source link

TextImagePlugin not rendered correctly #303

Closed rabbit-aaron closed 5 years ago

rabbit-aaron commented 5 years ago

There was a bug in the TextImagePlugin,

  1. image alt attribute was rendered as 'tag' attribute, the patch makes it renders as alt attribute correctly

    e.g. originally: <img src='...' tag='alt text'> after patch: <img src='...' alt='alt text'>

  2. because title is a common attribute for and tag, the title gets overridden by img's html_tag_attributes e.g. originally if link's title is 'link_title', img's title is 'img_title' it would render <a href='...', title='link_title'><img src='...' title='link_title'></a>

    after the patch it correctly renders to <a href='...', title='link_title'><img src='...' title='img_title'></a>

our current fix is to monkey patch this in apps.py

def _patch_img_plugin():
    from cmsplugin_cascade.generic.cms_plugins import TextImagePlugin
    from cmsplugin_cascade.link.config import LinkPluginBase
    from django.utils.html import format_html_join

    TextImagePlugin.html_tag_attributes = {'image_title': 'title', 'alt_tag': 'alt'}
    TextImagePlugin.render_template = 'cascade/plugins/patchedtextimage.html'

    _old_render = TextImagePlugin.render

    def render(self, context, instance, placeholder):
        context = _old_render(self, context, instance, placeholder)
        link_attributes = LinkPluginBase.get_html_tag_attributes(instance)
        context['link_html_tag_attributes'] = format_html_join(
            ' ',
            '{0}="{1}"',
            ((attr, val) for attr, val in link_attributes.items() if val)
        )
        return context

    TextImagePlugin.render = render

<!--patchedtextimage.html-->

{% load thumbnail %}
{% spaceless %}
{% with css_classes=instance.css_classes inline_styles=instance.inline_styles instance_link=instance.link %}
{% if instance_link %}<a href="{{ instance_link }}" {{ link_html_tag_attributes }}>{% endif %}
<img {{ instance.html_tag_attributes }}{% if css_classes %} class="{{ css_classes }}"{% endif %}{% if inline_styles %} style="{{ inline_styles }}"{% endif %}
    {% thumbnail instance.image src.size crop=src.crop upscale=src.upscale subject_location=src.subject_location as thumb %}
    src="{{ thumb.url }}" width="{{ thumb.width }}" height="{{ thumb.height }}"
    {% if src.high_resolution %}{% thumbnail instance.image src.size2x crop=src.crop upscale=src.upscale subject_location=src.subject_location as thumb2 %}srcset="{{ thumb2.url }} 2x"{% endif %} />
{% if instance_link %}</a>{% endif %}
{% endwith %}{% endspaceless %}
jrief commented 5 years ago

I used your code to fix it, but there are still open issues. Now the title is the same in <a ...> and <img ...>.

Please recheck using HEAD from master.