apostrophe-widgets Templating for editor

40 views
Skip to first unread message

Peter Shaw

unread,
Sep 20, 2016, 2:56:02 AM9/20/16
to apostr...@googlegroups.com
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

unread,
Sep 20, 2016, 4:39:39 AM9/20/16
to apostrophenow
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

Reply all
Reply to author
Forward
0 new messages