CODEWITHSUNDEEP
apostrophe-cms
chris
chris

Reputation: 95

Apostrophe cms: do not want to render image title

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

Upvotes: 2

Views: 701

Answers (2)

bionara
bionara

Reputation: 268

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.

Upvotes: 5

Gareth Cooper
Gareth Cooper

Reputation: 23

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.

Upvotes: 0

Related Questions