Picture of Chris Gillison
Nest narrative component in hot graphic component?
by Chris Gillison - Saturday, 8 October 2016, 12:01 PM
 

Hi all,

Using the framework (not AT) I'm trying to 'nest' a narrative component within a hot graphic component, such that when you click on a pin, you don't get the standard single text/image popup, but something that can have multiple parts (akin to the narrative component).

Working in my components.json, I've added a narrative component as one of the _items of the hot graphic (code below), but when I build I'm just getting the narrative's title and body text in the hot graphic popup, not the scrolling elements (see attached screenshot).

If this simply isn't possible, can anyone think of another way I might be able to achieve something similar (maybe another plugin exists that I haven't tried that could be made to work like that?)

Many thanks. Chris

Here's the components.json code I have for the hot graphic (no errors found in grunt build)...

{
        "_id": "c-35",
        "_parentId": "b-25",
        "_type": "component",
        "_component": "hotgraphic",
        "_classes": "",
        "_layout": "full",
        "_comment": "setCompletionOn = inview | allItems",
        "_setCompletionOn": "allItems",
        "_canCycleThroughPagination": false,
        "_hidePagination": true,
        "_useGraphicsAsPins": false,
        "title": "Hot graphic",
        "displayTitle": "Hot graphic",
        "body": "You can add interactivity to an image by using the <strong>hot graphic</strong>. This component allows you to position icons over an image. When an icon is selected, content associated with its corresponding location is displayed in a window over the image. This component will fall back to a <strong>narrative</strong> when viewed on mobile.<br><br>This component is always spanned.",
        "instruction": "Select the icons to find out more.",
        "mobileInstruction": "",
        "_graphic": {
            "src": "course/en/images/full_width.jpg",
            "alt": "Placeholder graphic."
        },
        "_items": [
            {
            "_id": "c-500",
            "_parentId": "c-35",
            "_type": "component",
            "_component": "narrative",
            "_classes": "",
            "_layout": "full",
            "_comment": "setCompletionOn = inview | allItems",
            "_setCompletionOn": "allItems",
            "_hasNavigationInTextArea": true,
            "title": "Narrative",
            "displayTitle": "Narrative",
            "body": "The narrative component lets you scroll through a series of images each with some accompanying text.<br><br>This component is always spanned.",
            "instruction": "Select the arrow to find out more.",
            "mobileInstruction": "Select the arrow followed by the plus icon to find out more.",
            "_items": [
                {
                    "title": "Narrative item 1",
                    "body": "Narratives are particularly good for showing dialogue between two or more characters, with each step of the conversation being accompanied by an image. This photo story approach can be used to provide context for the learning about to follow, to illustrate real world application of the learning or to show the impact on people when the learning hasn’t been applied correctly.",
                    "_graphic": {
                        "src": "course/en/images/single_width_small.jpg",
                        "alt": "Placeholder graphic."
                    },
                    "strapline": "Narrative item 1"
                },
                {
                    "title": "Narrative item 2",
                    "body": "Narratives can also be used to present case studies, where the different displays are used to set the scene, show the key events and then the outcome.",
                    "_graphic": {
                        "src": "course/en/images/single_width_small.jpg",
                        "alt": "Placeholder graphic."
                    },
                    "strapline": "Narrative item 2"
                }
                ],
                "_top": 20,
                "_left": 20
            },
            {
                "title": "Hot graphic item 2",
                "body": "This is display text 2 which we have linked to the smartphone image.",
                "_graphic": {
                    "src": "course/en/images/single_width_small.jpg",
                    "alt": "Placeholder graphic.",
                    "_classes": ""
                },
                "strapline": "Hot graphic item 2",
                "_classes": "",
                "_top": 62,
                "_left": 26.5
            },
            {
                "title": "Hot graphic item 3",
                "body": "This is display text 3 which we’ve located over the laptop so you would expect the content to be about PCs.",
                "_graphic": {
                    "src": "course/en/images/single_width_small.jpg",
                    "alt": "Placeholder graphic.",
                    "_classes": ""
                },
                "strapline": "Hot graphic item 3",
                "_classes": "",
                "_top": 62,
                "_left": 49
            }
        ]
        
    }


Picture of Chuck Lorenz
Re: Nest narrative component in hot graphic component?
by Chuck Lorenz - Saturday, 8 October 2016, 12:45 PM
 

Chris,

You won't be able to achieve what you want with this json-only technique. You'll need a different type of plug-in specifically coded for something like this.

A plug-in's javascript code grabs its content/configuration/data from the json. A Hot Graphic component remains a Hot Graphic component even if you put extraneous key/value pairs in the json.

Chuck

Picture of Chris Gillison
Re: Nest narrative component in hot graphic component?
by Chris Gillison - Saturday, 8 October 2016, 12:53 PM
 

Oh dear! Oh well, it was a nice idea! Thanks Chuck.

Picture of Nick Webb
Re: Nest narrative component in hot graphic component?
by Nick Webb - Saturday, 8 October 2016, 7:12 PM
 

It's an interesting idea though.

The block slider already provides one mechanism for controlling the way blocks within an article are displayed.

I wonder if it's possible to create a more general mechanism to allow the display of blocks within an article to be controlled by another plugin. For example, trigger points within a video resulting in subsequent blocks being displayed over the top of the video.

Nick