ec-layout-widgets

Nested Layouts for Apostrophe CMS

Usage no npm install needed!

<script type="module">
  import ecLayoutWidgets from 'https://cdn.skypack.dev/ec-layout-widgets';
</script>

README

COLUMN LAYOUT

An Apostrophe CMS module to provide a column layout for your content. 1 to 4 columns are available. Select between 100%, 75%, 70%, 50%, 33%, 25% Column Widths. Columns are responsive and appear in full-width on smaller devices.

Install

From within your apostrophe project

npm install --save ec-layout-widgets

Configuration

In app.js

modules: {
  'ec-layout-widgets': {},
  // ... other modules
}

In your template

{{ apos.area(data.page, 'body', {
    widgets: {
      'ec-layout-layout': {}
  }
}) }}

Remember to replace data.page with the appropriate context, and body with the correct area name for your site.

The allowed content is apostrophe-rich-text, apostrophe-images, apostrophe-video and apostrophe-html widgets.

Customize which widgets each column can use

Create your own /lib/modules/ec-layout-widgets/views/macro.html

{# Define content types for each column #} {% macro defaultArea(context, name) %} {{ apos.area(context, name, { widgets: { 'apostrophe-rich-text': {}, 'apostrophe-images': {}, 'apostrophe-video': {}, 'apostrophe-html': {}, //add custom widgets here 'ec-quote': {}, 'ec-navigation': {} } }) }} {% endmacro %}