JSON Description for a Promogogo 'Article'

If you are here for the generic JSON structure, it's here.

Quick Links to Examples



Structure

Article Structure

Promogogo articles are structured in a grid format to enable responsive handling of all articles. The general structure of the article can be seen in this sample document.

First, there are fields that describe the metadata for the article, along with the main images used.
Then, we have the content itself. The content is wrapped in a content grid structure as can be seen in the image.

Structure Nodes

  • Each article has zero or more containers
  • Each container has one or more rows
  • Each row has one or more columns
  • Each column has one or more contentModules

If no container is present, the top-level content nodes will be rows.

Content Nodes

All content is contained within a content node.

The contentModule field describes what kind of a content module it is. A simple article may have all its content in one content module, but a more typical structure of an article has one container and two or more rows.

Article Fields describe all fields that are used in in the article itself (on the top level of the JSON tree). 

Content Fields describe  all fields that are used within one or more of the Content Modules.  The basis of all the Content Module is the same but some of the more specialized Content Module may have their own fields that are not present in the other Content Modules.

Content Modules

The Content Modules currently in use are:

Ad
the page segment contains ad-code.

Author
a page segment with info about the author.

Banner
a page segment; typically at the top of the page with image, title and a kicker. Video embeds and further text are also supported.

Embed
embed a code snipped from a third-party site such as Youtube or Instagram.

Image
a page segment with image links.  

Listicle
a container item for a list of similar items to be rendered together. Can have a title.

ListItem
an item in a listicle. It can contain a variety of fields such as HTML, embeds and images. It might also have an index field to render the number of the item. It is always a child node of a Listicle or a Slideshow.

Slideshow
a container item for a list of similar items to be rendered together. Can have a title.

Text
HTML markup for the text of the article.

Content Fields

These are the fields used by the content modules.

  • title - can be used by all contentModules
  • kicker - can be used by all contentModules
  • description - can be used by all contentModules
  • firstParagraph - used by Text
  • embed - used by Banner, Embed, ListItem
  • html - used by Banner, Text, ListItem
  • order - used by all nodes
  • index - used by ListItem
  • images - used by Banner, ListItem, Author, Image, Text
  • name - used by Author
  • twitter - used by Author
  • instagram - used by Author
  • facebook - used by Author
  • web - used by Author

Article Fields

The article itself has fields that describe the article itself.  These fields provide sufficient details for article overviews, such as lists of articles; and data for sharing the article on Social Media. 

The default values of many of the fields come from the (first) banner values.  However,  they can be changed, so even if these values appear to be the same, the assumption that they are always identical should not be made.

The fields used for any article are as follows:

  • guid – text. This is the unique identifier used to find the article.
  • title - text. The main title of the article.
  • kicker - text. The kicker of the article.
  • description - text. This is the text used when sharing the article on Social Media.
  • extendedDescription - text.  A longer description. 
  • seoUrl - text. An SEO-friendly string used in the url.
  • author - text. The name of the author.
  • created - dateTime in ISO 8601 form.
  • updated - datetime in ISO 8601 form.
  • publishedAt - dateTime in ISO 8601 form. This is the public facing timestamp. If this date is in the future, the article has not been published yet.
  • timezone - text. The timezone where the article was published.
  • bannerVideo - text. The url to a banner video, if present.
  • publishStatus - text. Possible values are:
    • draft
    • scheduled
    • published
  • sections - list of texts
  • categories - list of texts
  • sectionCategoryKey - text. This is a combination of the main section and category of the article.
  • images - list of the main images used by the article in various formats.
  • content - the content nodes

Examples 

Following are short descriptions of each contentModule along with a JSON snippet demonstrating the JSON structure of that module.  A link is also provided to a full article that utilizes that feature.

Example for 'Text'

Text contentModule

The text contentModule has an HTML field with the text content of the article.

See featured JSON of text excerpt. It is the first paragraph from "How Dawson’s Creek Gave Me Hope As A Gay Man Then — And Now" and is an example of article using the text content module.

See full JSON of the article.


JSON snippet for Text 

 
content: [
   {
      contentModule: "text",
      firstParagraph: "When the WB teen drama Dawson’s Creek splashed onto TV 
                      screens on January 20, 1998, it quickly set parental 
                      discretion groups aflame with its frankness....",
      html: "<p>When the WB teen drama <em>Dawson’s Creek</em> 
            splashed onto TV screens on January 20, 1998, it quickly set parental
            discretion groups aflame with its frankness ... for me.</p>",
      order: 0
   }
]

Example for 'Embed'

Embed contentModule

The embed contentModule embeds some third-party code to render something like a video, a tweet or an Instagram image.

"Morgan McMichaels Talks Returning to “RuPaul’s Drag Race’ for All Stars 3, And Why RuPaul Still Makes Her Nervous" is an example of an article with mixtures of text content and an embed.

See full JSON of the article.

Note: An ad is a special case of an embed.
It supports the same fields, but the embed code is an ad-code.

JSON snippet for embed 

 
content: [  
    { ...},
    {
        contentModule: "embed",
        title: "See the Youtube video"
        embed: "<iframe width="560" height="315" 
               src="https://www.youtube.com/embed/wWeZ9C0cZig" 
               frameborder="0" allow="autoplay; encrypted-media" 
               allowfullscreen=""></iframe>",
        order: 1
    }
]

Example for 'Banner'

Banner contentModule

The banner contentModule consists of a full-width image, typically at the top of an article (but can be anywhere).

The banner holds the main image and keeps track of different sizes and formats of the image. The images listed vary based on what images where created when the article was created.

Banner with an Image

The banner can contain a title, an image, a kicker and some text. "How Dawson’s Creek Gave Me Hope As A Gay Man Then — And Now" and is an example of article with a banner with an image.

See full JSON of the article.

Banner with a Video

The banner can contain a title, an embed (usually a video), a kicker and some text. "Get a Wedding Day Sugar Rush" is an article with a video banner.

If there is a video in the banner, the images in the JSON are used as a background, for sharing or when it is more appropriate to use an image to represent the article.

See full JSON of the article.


Note:

The content of the Banner contentModule is used as defaults for many of the article fields, such as title, kicker and bannerVideo.

JSON snippet for Banner 

content: [
{
    contentModule: "banner",
    title: "Get a Wedding Day Sugar Rush From This Trans-Owned 
            Chicago Bakery",
    embed: "<div style="position: relative; display: block; 
             max-width: 100%;">
            <div style="padding-top: 56.25%;">
            <iframe src="//players.brightcove.net/5428591958001/ry4qHW6Lb_default/index.html?videoId=5662552024001" 
             allowfullscreen="" 
             webkitallowfullscreen="" mozallowfullscreen="" 
             style="position: absolute; top: 0px; right: 0px; 
             bottom: 0px; left: 0px; width: 100%; height: 100%;">
             </iframe></div></div>",
    order: 0,
    images: [
    {
         url: "https://media.promogogo.com/2017-11-30/9a739da5d92e412692c05a28466a7be2.jpg",
         imagetype: "imageProxy",
         size: 106978,
         width: 800,
         height: 533
    },
    {
        url: "https://media.promogogo.com/intomore/2017-11-30/5c285235cafc4a7ea6e0d3da41c903b1.jpg",
        imagetype: "image",
        size: 7233048,
        width: 2048,
        height: 1365
    },
    {}  
    ]
}
]

Example for 'Image'

Image contentModule

The image contentModule embeds an image onto the page.  This is used for stand-alone images, that are not supposed to be formatted like a banner. 

"Seeing Myself In Ricky Martin — Both In And Out Of The Closet" is an example of an article with mixtures of Text content, some standalone Images and an Embed.

Seefull JSON of the article.

.

JSON snippet for Image 

{
    contentModule: "image",
    order: 1,
    images: [
    {
        url: "https://media.promogogo.com/intomore/2018-01-16/7ae030275e5d4d179093ac4a868da7aa.gif",
        imagetype: "image",
        size: 503800,
        width: 470,
        height: 251
    },
    {
        url: "https://media.promogogo.com/2018-01-16/b68362ddb9fa47f8a938e5758d987ce0.gif",
        imagetype: "imageProxy",
        size: 1131668,
        width: 800,
        height: 427
    },
    {
        url: "https://media.promogogo.com/2018-01-16/b51da683ced64b4f8cd440da1915b6ea.gif",
        imagetype: "imageProxyLarge",
        size: 3815345,
        width: 2048,
        height: 1094
    }
    ]
},

Example for 'Author'

Author contentModule

The author contentModule describes the author of the article along with an image, a name, a short description and links to their social media accounts.

"Morgan McMichaels Talks Returning to “RuPaul’s Drag Race’ for All Stars 3, And Why RuPaul Still Makes Her Nervous" is an example of an article with an author contentModule.

See full JSON of the article.

JSON snippet for Author 

{
    contentModule: "author",
    twitter: "https://twitter.com/mathewrodriguez",
    instagram: "https://www.instagram.com/mathewkrodriguez/",
    facebook: "https://www.facebook.com/mathewkrodriguez/",
    website: "https://intomore.com"
    name: "Mathew Rodriguez",
    description: "Mathew is a staff writer at INTO. His work has 
                  appeared in Mic, Slate and Complex. 
                  He loves "Buffy the Vampire Slayer," 
                  Flannery O'Connor and female rappers and is 
                  working on a memoir.",
    order: 7,
    images: [
    {
        url: "https://media.promogogo.com/intomore/2017-12-14/6ffc8730feb3416e9bae341b150e0072.jpg",
        imagetype: "image",
        size: 2078558,
        width: 1479,
        height: 1480
    }
    ]
}

Example of 'Listicle'

Listicle contentModule

The Listicle contentModule contains a list of similar items (listItem).

The listItem can contain any contentModule fields, such as as html, embed or images, along with the text fields (title, kicker, etc).

The Listicle and the Slideshow are structurally similar but differ in the way they are rendered.

"A Newbie’s Guide to ‘RuPaul’s Drag Race’" is an example of a listicle with both image ListItems and video ListItems.

See full JSON of the article.

JSON snippet for Listicle 

{
    contentModule: "listicle",
    list: [
    {
        contentModule: "listitem",
        title: "First Course: "RuPaul Roast," season 5",
        html: "<p><strong>Why this episode?</strong> 
               Season five's roast of the Queen Mother herself 
               is one of the series' very best episodes. 
               The top seven of the season — Jinkx Monsoon, Alaska, 
               Roxxxy Andrews, Detox, Coco Montrese, Alyssa Edwards, 
               and Ivy Winters — are the best crop the show has 
               ever seen. ....</p>
               <p><strong>Is <em>Untucked</em> necessary?</strong> 
               <a href="http://www.logotv.com/episodes/hto4du/rupauls-drag-race-ruvealed-rupaul-s-drag-race-season-5-ruvealed-untucked-rupaul-roast-season-5-ep-ut507r">Yes</a>, 
               because the breakdown in the episode's final minutes 
               makes more sense once you've seen what led up to 
               it.</p> <p><strong>Key moment:</strong> The "Whip My 
               Hair" lip sync is in this episode, so keep your eyes 
               on Roxxxy.</p> <p></p>",
        order: 0,
        index: "0",
        images: [
        {
            url: "https://media.promogogo.com/2018-01-19/d2d1b3b397b7423992b50fbc7d513128.png",
            imagetype: "",
            size: 547726,
            width: 768,
            height: 433
        }
        ]
    },
    {
        contentModule: "listitem",
        title: "Second Course: "Snatch Game," season 7",
        embed: "<iframe width="560" height="315" 
                 src="https://www.youtube.com/embed/M304Xa9I25w" 
                 frameborder="0" allow="autoplay; encrypted-media" 
                 allowfullscreen=""></iframe>",
        html: "<p><strong>Why this episode?</strong> Snatch Game, 
               the show's drag parody of <em>Match Game</em> that 
               doubles as its celebrity impersonation challenge, is 
               ingrained into the show's herstory. It feels criminal 
               to not include one installment in this crop. With 
               stellar performances like Ginger Minj's Adele and 
               Kennedy Davenport's rule-breaking, gender-bending 
               Little Richard, it's highly worth the time.</p> 
               <p>...</p> 
               <p><strong>Key moment:</strong> Not so much a 
               "moment," but basically everything Kennedy does on 
               the Snatch Game stage is perfection.</p>",
        order: 1,
        index: "1"
    },
    { ... }    
    ],
    title: "the title of the listicle",
    order: 1
}

Example of 'Slideshow'

Slideshow contentModule

The Slideshow contentModule contains a list of similar items (listItem).

The listItem can contain any contentModule fields, such as as html, embed or images, along with the text fields (title, kicker, etc).

The Slideshow and the Listicle are structurally similar, but differ in the way they are rendered.

"Kit Williamson Talks Road Trips, Polyamory, & ‘Eastsiders’ Season 3" is an example of a slideshow.

See full JSON of the article.

JSON snippet for Slideshow 

{
    contentModule: "slideshow",
    list: [
    {
        contentModule: "listitem",
        title: "",
        kicker: "",
        order: 0,
        images: [
        {
            url: "https://media.promogogo.com/intomore/2018-01-06/39f04192b19c48ea9290beff2dd9fe31.jpg",
            imagetype: "",
            creditName: "",
            creditLink: "",
            creditCaption: "",
            size: 793006,
            width: 2880,
            height: 1618
        }
        ]
        },
        {
                contentModule: "listitem",
                title: "My cool picture",
                kicker: "",
                order: 1,
                images: [
                {
                    url: "https://media.promogogo.com/intomore/2018-01-06/da4e10f80dbf4e23806564083889e094.jpg",
                    imagetype: "",
                    creditName: "Johnny b Goode",
                    creditLink: "http://link.to.original.or.licence",
                    creditCaption: "Image Caption",
                    size: 886241,
                    width: 1437,
                    height: 807
                }
                ]
        },
        { ...
        } 
    ],
    title: "Title of the slideshow",
    order: 1
},