Cross Content Decoupled

  1. Enable the following module: vactory_decoupled_cross_content

  2. Visit : /admin/structure/types/manage/**content_type**

  3. Enable the cross content.

  1. Create you custom widget (DF) and use within it the json_api_cross_content type.
⚠️
json_api_cross_content is similar to json_api_collection, meaning you can use JSONAPI parameters such as filter, include...
⚠️
json_api_cross_content is in charge of retrieving nodes according to the cross content configuration.

Here's a simple example :

./modules/custom/your_custom_module/widgets/cross-content-news/settings.yml

name: 'Cross content news'
multiple: FALSE
category: 'Cross Content'
enabled: TRUE
fields:
  title:
    type: text
    label: "title"
  intro:
    type: text_format
    label: "Introduction"
    options:
      "#format": full_html
  link:
    type: url_extended
    label: "Link"
  collection:
    type: json_api_cross_content
    label: 'JSON:API'
    options:
      '#required': TRUE
      '#default_value':
        resource: node--vactory_news
        filters:
          - fields[node--vactory_news]=drupal_internal__nid,path,title,field_vactory_news_theme,field_vactory_media,field_vactory_excerpt,field_vactory_date,is_flagged,has_flag
          - fields[taxonomy_term--vactory_news_theme]=tid,name
          - fields[media--image]=name,thumbnail
          - fields[file--image]=filename,uri
          - include=field_vactory_news_theme,field_vactory_media,field_vactory_media.thumbnail
          - page[offset]=0
          - page[limit]=3
          - sort[sort-vactory-date][path]=field_vactory_date
          - sort[sort-vactory-date][direction]=DESC
          - filter[status][value]=1

  1. Move to /block/add/vactory_block_component and create a new block using the template you just made.

  2. Move to the Block Layout page.

  3. Inject your cross-content custom block into the Footer region and ensure that you have configured the Visibility settings.

  4. On Next.js, you will need to create a mapping file.

./components/modules/news/CrossContentWidget.jsx

export const config = {
    id: "vactory_news:cross-content-news",
}


const CrossContentNews = ({ data }) => {
    console.log({data})
    return <>News Cross Content</>
}


export default CrossContentNews

Once the mapping is done, you can display content the same way you do with JSON API collections.

Congratulations! You have just displayed the cross content!

Cross Content (to be deprecated)Banner