Created
March 24, 2016 09:10
-
-
Save sketchytech/1aa9147e4d317d379b38 to your computer and use it in GitHub Desktop.
Apple News Format: Mosaic and Gallery Images
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"version": "1.1", | |
"identifier": "sketchyTech_Demo", | |
"title": "My First Article", | |
"language": "en", | |
"layout": {}, | |
"components": [{ | |
"role": "title", | |
"text": "My First Article", | |
"textStyle": "titleStyle" | |
}, | |
{ | |
"role": "mosaic", | |
"items": [ | |
{ | |
"URL": "bundle://image1.jpg", | |
"caption": "Taipei, Taiwan: Pilars of the Taipei Bridge.", | |
"accessibilityCaption": "A view from underneath the Taipei Bridge." | |
}, | |
{ | |
"URL": "bundle://image2.jpg", | |
"caption": "Neue Wache (New Guardhouse) in Berlin-Mitte at night. It was built from 1816 and 1818 according to plans of Karl Friedrich Schinkel. It is one of the main works of German classicism." | |
}, | |
{ | |
"URL": "bundle://image3.jpg", | |
"caption":"A U.S. Marine Corps C-130T Hercules aircraft with the Blue Angels, the Navy's flight demonstration squadron, flies over Marines with the Silent Drill Platoon at Marine Corps Air Station Yuma, Arizona." | |
}, | |
{ | |
"URL": "bundle://image4.jpg", | |
"caption":"Vaults in the nave of cathedral Notre-Dame de Paris, France.", | |
"accessibilityCaption":"Vaults in the nave of cathedral Notre-Dame de Paris, France. The pillars are slightly offset, so that the vaults are a bit skewed." | |
} | |
] | |
},{ | |
"role": "body", | |
"format": "markdown", | |
"text": "This is just over the minimum amount of _JSON_ required to create a valid article in Apple News Format. If you were to delete the dictionary enclosing this text, you'd be there.", | |
"textStyle": "bodyStyle" | |
}, | |
{ | |
"role": "gallery", | |
"items": [ | |
{ | |
"URL": "bundle://image1.jpg", | |
"caption": "Taipei, Taiwan: Pilars of the Taipei Bridge.", | |
"accessibilityCaption": "A view from underneath the Taipei Bridge." | |
}, | |
{ | |
"URL": "bundle://image2.jpg", | |
"caption": "Neue Wache (New Guardhouse) in Berlin-Mitte at night. It was built from 1816 and 1818 according to plans of Karl Friedrich Schinkel. It is one of the main works of German classicism." | |
}, | |
{ | |
"URL": "bundle://image3.jpg", | |
"caption":"A U.S. Marine Corps C-130T Hercules aircraft with the Blue Angels, the Navy's flight demonstration squadron, flies over Marines with the Silent Drill Platoon at Marine Corps Air Station Yuma, Arizona." | |
}, | |
{ | |
"URL": "bundle://image4.jpg", | |
"caption":"Vaults in the nave of cathedral Notre-Dame de Paris, France.", | |
"accessibilityCaption":"Vaults in the nave of cathedral Notre-Dame de Paris, France. The pillars are slightly offset, so that the vaults are a bit skewed." | |
} | |
] | |
}], | |
"componentTextStyles": { | |
"titleStyle": { | |
"textAlignment": "center", | |
"fontName": "HelveticaNeue-Bold", | |
"fontSize": 64, | |
"lineHeight": 74, | |
"textColor": "#000" | |
}, | |
"bodyStyle": { | |
"textAlignment": "left", | |
"fontName": "Georgia", | |
"fontSize": 18, | |
"lineHeight": 26, | |
"textColor": "#000" | |
} | |
}, | |
"textStyles": { | |
"redText": { | |
"textColor": "#FF00007F" | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Once you have the basic structure of an Apple News Format article you can add images to it in a static mosaic or scrollable gallery form. Both are objects placed within the components array and contain an array of gallery items. These gallery items can each include a URL that references an image (JPEG, PNG or GIF) inside the same folder as the
article.json
file, along with caption and voiceover information (accessibility caption), as well as an explicit content flag. (A Gallery Item has no required properties, only optional ones.)There are a list of optional properties identical for mosaic and gallery: anchor, animation, behavior, identifier, layout and style. These are inherited from Text(Abstract) and Component(Abstract).
Tapping on an image expands it and displays the caption when inside Apple News.