How to access custom fields in a data.home._childr

Question

I've added a few custom fields in lib/modules/apostrophe-custom-pages/index.js

Specifically, I've added a field for an excerpt, image Singleton for a cover image and another Singleton that will allow users to define an icon to a page.

This is how these images are defined:

 {
    name: 'icon',
    label: 'Icon',
    type: 'singleton',
    widgetType: 'apostrophe-images',
    options:{
        limit: 1,
        minSize: [200,200],
        aspectRatio: [1,1],
    },
    controls:{
      movable:false
    },
    image: true
  },
 {
    name: 'coverimg',
    label: 'Header Image',
    type: 'singleton',
    widgetType: 'apostrophe-images',
    options:{
        limit: 1,
        minSize: [400,400],
        aspectRatio: [1,1],
    },
    controls:{
      movable:false
    },
    image: true
  }

The cover image and the icon I can retrieve while on the page by using: {% set coverimage = apos.images.first(data.page.coverimg) or null %} ,

however, I can't reach the icon in the navigation under data.home._children like so:

    {%- for tab in data.home._children -%}
      {%- set iconImg = apos.images.all(tab.icon) %}
      {{ apos.log(tab) }}
    <li>
      <a class="sidebar-main-link 
      {% if data.page and (apos.pages.isAncestorOf(tab, data.page) or tab._id == data.page._id) %}
        active
      {% endif %}
      " href="{{ tab.slug }}">

        <div class="icon" style="
        backgroung-image: url('{{ apos.attachments.url(image.attachment, { size: 'full'}) }}')  "></div>
        {{ tab.title }}

      </a>
    </li>
  {% endfor %}

This returns the standard missing.svg image

Answer 1

There is a new tutorial on the apostrophe documentation site which covers this issue in detail.

The short answer is that you must configure the filters option of the apostrophe-pages module to load related pages with more than just very basic information. For performance reasons, this default behavior is not a bad thing, but asking Apostrophe to load just one widget won't slow things down too much.

// in lib/modules/apostrophe-pages/index.js
module.exports = {
  // other configuration, then...
  filters: {
    ancestors: {
      children: {
        areas: [ 'thumbnail' ]
      }
    }
  }
};