2

I want to define the widgets for all of my columns and layouts in one place.

This code would be in views/macros/columnWidgets.html

 {% macro columnWidgets(data, option) %}
{{ apos.area(data.widget, '{{option}}', {
blockLevelControls: true,
widgets: {
'apostrophe-rich-text': {
   toolbar: [ 'Styles', 'Bold', 'Italic', 'Blockquote', 'Link', 'Anchor', 'Unlink', 'BulletedList' ],
   styles: [
    { name: 'Paragraph',  element: 'p'  },
    { name: 'Quote / Section Descriptor', element: 'h3' },
    { name: 'Main Heading', element: 'h1',attributes: { 'class': 'main-heading'}  }
   ]
 },
 'apostrophe-html': {
   toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink', 'Anchor', 'Table', 'BulletedList', 'Blockquote', 'Strike', 'Subscript',  'Superscript','Image','slideshow' ],
   styles: [
     { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
   ]
 },
 'apostrophe-images': {
   minSize: [ 700, 350 ],
   aspectRatio: [ 2, 1 ],
   size: 'full'
 }
}
}) }}
{% endmacro %}

Then in my 4Column Layout Widget I would include something along these lines.

{% import 'macros/columnWidgets.html' as columnwidgets %}

{{ apps.columnWidgets(data,'column1') }}

Brad Wood
  • 93
  • 5

1 Answers1

1

Sure, we do this all the time in our own projects.

// in app.js

modules: {
  'apostrophe-templates': {
    viewsFolderFallback: __dirname + '/views'
  }, ...
}

{# In views/macros/areas.html %}

{% macro content(context, name) %}
  {{ apos.area(context, name, {
    widgets: {
      'apostrophe-rich-text': {
        toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Anchor', 'Unlink', 'BulletedList' ]
      },
      'apostrophe-images': {},
      'apostrophe-files': {},
      'apostrophe-video': {}
    }
  }) }}
{% endmacro %}

{# In any other template in any module #}

{% import "macros/areas.html" as areas %}
{{ areas.content(data.page, 'body') }}

The use of viewsFolderFallback is a nice convenience for allowing a shared top-level folder to become a fallback location for template files imported, included, extended, etc. from any module.

Tom Boutell
  • 7,281
  • 1
  • 26
  • 23
  • I'm getting an error: Listening on http://0.0.0.0:3000 e.stack: Template render error: (column-2-widgets:widget.html) Error: template names must be a string: NaN at Object.exports.prettifyError (/Users/woodbr/projects/earlham/node_modules/nunjucks/src/lib.js:34:15) at /Users/woodbr/projects/earlham/node_modules/nunjucks/src/environment.js:486:31 – Brad Wood Sep 06 '17 at 14:08
  • Looks like nunjucks is having issues with the macro template names must be a string: NaN – Brad Wood Sep 06 '17 at 20:03
  • Sorry, I left the quotation marks off my import call, try with that fix. – Tom Boutell Sep 07 '17 at 15:03
  • 1
    Thanks, that worked. The pattern that I'm using is Full Width/Narrow Width Layout Then within each of those has a 1,2,3, or 4 column option. That way on a regular page you can have a full width hero widget at the top – Brad Wood Sep 07 '17 at 19:14
  • I get `Error: render() must not be called from a Nunjucks helper function nested inside another call to render(). Use partial() instead.` randomly. Rarely this error occurs – Karlen Jul 21 '19 at 08:50