apostrophe-widgets Templating for editor

[Peter Shaw]

Hi guys, 

I thought I could find a answer to the question in the mailing list, or the documentation, but I failed so far. Maybe I miss something, but can you please push me into the right direction.

My Problem is that i have a apostrophe-widgets template that works on my page, but won’t work in the widgets editor. The apostrophe buttons are on the same position and I can not select one. Can I define another template for the editor that for the page itself? 

Here is my page view: 

I called the widget “marketing”. Its Ok for the page, even I can not access the “Edit Marketing-Item” button. But the “Edit Marketing" is reachable. 

But in the editor: 

I can just edit/delete the last one. 

I want to put the three rows horizontally that I can edit them better. 

I build this section as two separate widgets:

adt-marketing-widgets

module.exports = {

  extend: 'apostrophe-widgets',

  label: 'Marketing',

  addFields: [

{

      type: 'area',

      name: 'items',

      label: 'Items',

      options: {

        widgets: {

          'adt-marketing-item': {

          options: {

limit: 3

}

          }

        }

      }

    }  

 ]

};

adt-marketing-item-widgets

module.exports = {

  extend: 'apostrophe-widgets',

  label: 'Marketing-Item',

  addFields: [

    {

 name: 'image',

 label: 'Image',

 type: 'singleton',

 widgetType: 'apostrophe-images',

 options: {

aspectRatio: [ 1, 1 ],

minSize: [ 140, 140 ],

limit: 1

 }

 , required: true 

},

    {

      type: 'string',

      name: 'headline',

      label: 'Headline',

      required: true

    },

    {

      type: 'area',

      name: 'content',

      label: 'Content',

      options: {

        widgets: {

          'apostrophe-rich-text': {

            toolbar: [ 'Bold', 'Italic' ]

          }

        }

      }

    }

 ]

};

How would you build up the row? I thing my solution is not the best one. Maybe I should do one widget with all texts, headlines, and images in one widget, but that i have three of all types in one. That would be ok, if I could edit them dirrectly on the page, but it is a bit confusing in the editor. 

Further, I should limit the items to a maximal number of 3. But limit (just guessing) does not work for widgets.

So my questions are:

- Is the a better way for this kind of template that than apostrophe-widgets would provide?

- How can I limit the amount of items?

- Can I specify a extra editor template - or move the apostrophe edit buttons to the bottom of the inlays? 

Thanks a lot, 

ps

[Peter Shaw]

Ok, i found a solution that works for me. I do the inlay rendering in the outer layout:

{% for inlay in data.widget.items.items %}
<div class="col-lg-4">
<img class="img-circle" src="" alt="" width="140" height="140">

<h2>{{ inlay.headline }}</h2>
<p>{{ apos.area(inlay, 'content', { edit: true }) }}</p>
<p><a class="btn btn-secondary" data-kui-anim="bounce" href="#" role="button">View details &raquo;</a></p>

</div>
{% endfor %}

so i have the template from the inlay just for the editor.

I am interesting in your best practises.

Thanks a lot,
ps