Issue with displaying the image in an Apostrophe css widget

Question

I'm having difficulty displaying an image uploaded via an Apostrophe widget. Specifically I'm creating a 'hero' widget with a background image, title and description text over the top of the image. The widget seems to be working correctly as I can add title and description text in, but the image does not display. The error I am seeing in the command line is:

'Template warning: Impossible to retrieve the attachment url since it is missing, a default icon has been set. Please fix this ASAP!'

index.js for the widget:

module.exports = {
    extend: 'apostrophe-widgets',
    name: 'heroimage',
    label: 'Hero Image',
    addFields: [
        {
            name: 'hero-image',
            label: 'Hero Image',
            type: 'attachment',
            widgetType: 'apostrophe-images',
            required: true,
            extensions: [ 'jpg', 'png' ],
            extensionMaps: {
              jpeg: 'jpg'
            },
            // uploadfs should treat this as an image and create scaled versions
            image: true,
            options: {
                minSize: [ 1280, 900 ],
                limit: 1,
            }
        },
        {
            name: 'hero-title',
            label: 'Hero Title',
            type: 'area',
            options: {
                widgets: {
                    'apostrophe-rich-text': {
                    controls: [ 'Bold', 'Italic', 'Link', 'Unlink' ]
                    }
                }
            }
        },
        {
            name: 'hero-description',
            label: 'Hero Description',
            type: 'area',
            options: {
                widgets: {
                    'apostrophe-rich-text': {
                    controls: [ 'Bold', 'Italic', 'Link', 'Unlink' ]
                    }
                }
            }
        }
    ]
};

widget.html:

<div class="hero align-center-middle text-center"
    style="background: url('{{ apos.attachments.url(image.attachment) }}'); background-size:cover; background-position:center;">
    <div class="grid-x grid-padding-x">
        <div class="cell">
            <h1>
                {{ apos.area(data.widget, 'hero-title') }}
            </h1>
        </div>
        <div class="cell">
            <p>
                {{ apos.area(data.widget, 'hero-description') }}
            </p>
        </div>
    </div>
</div>

I've tried every combination of code inside the '{{ apos.attachments.url(image.attachment) }}' but nothing seems to work. Have I done this correctly, is there something I am missing? Any help is greatly appreciated.

Thanks, Jon

Is image a nunjucks variable your creating elsewhere? Hard to tell from your snippet. My first thought is that you should pass data.widget.hero-image to the url helper. Try logging the data your passing to the helpers like {{ apos.log(image) }} to make sure you have something at all. — Stuart Romanek
hero-image is the nunjucks variable. I've tried using 'data.widget.hero-image' to the url helper and '{{ apos.log(image) }}', but I am still getting the 'impossible to retrieve the attachment url' error. — JQuayle
Seems to be working when using this - {{ apos.attachments.url(data.widget['hero-image'], { size: 'full'}) }}. — JQuayle

Tom Boutell Tom Boutell · Accepted Answer · 2017-10-24T12:54:51

First, don't use hyphens in schema field names. It just makes them harder to work with by forcing the use of the bracket syntax. Also it is disallowed entirely for a few other property types. Use camel case:

{
  name: 'heroImage',
  // etc.
}

Second, you are using the variable "image" in your widget.html template but it is not being assigned from anywhere, so it is undefined. If you want access to a property of the widget, you need to reference it as a property of the widget:

data.widget.heroImage

Once you do that everything should work out fine.

Third: extensionMaps is a feature for configuring the attachments module itself, it has no effect here. And extension is not an option in this situation either. You can set group to images (which allows GIF, JPEG or PNG) or to office (which allows a range of office-related formats like txt or pdf).

Issue with displaying the image in an Apostrophe css widget

1 Answers