Tag Groups

Create custom article collections

💡
Before reading, you should first understand Resources.

Tag collections allow you consume collections of articles which sit outside of desks. Unlike desks which have a one-to-one relationship with an article, tags are one-to-many.

 

This is a fancy way of saying that articles:

  • can only be assigned to a single desk, but
  • can be assigned multiple tags.

So… what are tag groups and why use them?

In creating a tag collection, a publisher can group similar ‘themes’ of tags together.

 

This allows developers to easily generate pages composed of arbitrary collections of media — which, when coupled with Storipress’ data model builder, enables publishers to easily modify these pages.

Notion image
 

Example Usage: Brand Pages.

Want to create a page consisting of all the brands you write on, and allow publishers to edit basic metadata for these pages? Create a tag for each brand, add the tag to relevant articles, then use this tag group to create a brand page.

 

The page on the left is a great example of how Hypebeast creates a brand page for Nike.

 

Creating a tag collection page

To create a tag collection page, use the filename of a tag collection page as the key in the resources settings of nuxt.config.js.

 

If any corresponding resources are found, the corresponding groupKey tags will be automatically included in generating this page.

 

Creating a Tag Group

Before you create a tag collection, you first must create your tag group.

 
  1. Go to content-model
  1. Add content type -> Tag Group
    1. Notion image
  1. Create a new Tag Group
    1. Notion image
  1. Add new tags in your tag group
    1. Notion image
      Notion image

Setup resources

  1. Add your tag collection page under the resources folder
    1. ---| node_modules/
      ---| nuxt.config.js
      ---| package.json
      ---| resources/
      ------| [tagGroup].vue
  1. Configure the tag collection in nuxt.config.js
    1. storipress: {
      	resources: {
          [tagGroup]: getResourcesOption({ prefix: [collectionPrefix], resource: 'tag', type: 'group', groupKey: [groupkey] }),
      	}
      }
      💡
      You will find your groupkey on the /content-modal/all page under the group name.

Examples

---| node_modules/
---| nuxt.config.js
---| package.json
---| resources/
------| myCollection.vue
storipress: {
	resources: {
    myCollection: getResourcesOption({ prefix: 'my-collection', resource: 'tag', type: 'group', groupKey: 'tagCollection' }),
	}
}

Last updated on February 3, 2023