Apostrophe cms: do not want to render image title

Question

I am using apostrophe-images to insert an image in my page. When this widget is rendered, there is an header h4 with the title. I would like to remove it. Thanks

Answer 1

I have done this in the past with CSS:

.apos-slideshow h4 { display: none; }

However, you could extend the images widget and in the new template, extend the widget.html extend:

{% extends 'widgetBase.html' %}

and then override the title block, putting in a conditional (I think this ought to be in the base one actually!):

{%- block title -%}{% if data.widget.hideTitle %}<h4>{{ image.title }}</h4>{% endif %}{%- endblock -%}

This will then let you specify in the your new widget to hide it, ie:

{{ apos.singleton(data.page, 'logoHeader', 'apostrophe-images', {
        limit: 1,
        minSize: [ 100, 100 ],
        addLabel: 'Set header logo',
        editLabel: 'Change header logo',
        hideTitle: true,
        controls: {
          movable: false,
          removable: false,
          position: 'bottom-right'
        }
      }) 
}}

... of course, the css way is quicker!

• maybe someone else knows a better way of doing this.