2

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

chris
  • 85
  • 6

2 Answers2

5

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.
Zoe
  • 27,060
  • 21
  • 118
  • 148
bionara
  • 228
  • 1
  • 10
  • Extending your own widget template is recommended for project-level changes to stock modules. – Stuart Romanek Jan 09 '18 at 12:42
  • The last approach does not seem to work. Appearently there is no `data.widget.hideTitle`. The given example might work because it is logical false: "If data.widget.hideTitle is , render ." – smoebody Sep 19 '18 at 15:06
  • the correct variable would be `data.options.hideTitle`, so the correct block would be `{%- block title -%}{%- if data.options.hideTitle -%}{%- else -%}

    {{ image.title }}

    {%- endif -%}{%- endblock -%}`. (Be sure to use `%-` syntax to omit unnecessary whitespaces and linefeeds)     – smoebody Sep 20 '18 at 14:15
0

I had similar problem where I wanted to hide the image title in some modules, but style it differently in others.

There's now a class, .apos-image-widget-image-title, applied to the apostrophe-images h4 that you can use to style the title as you wish.

It is also possible to override the apostrophe-images template as mentioned in @bionara's answer, and I guess this is the way to go if you want to make site-wide changes to all image widgets.

Gareth Cooper
  • 23
  • 6