Slide elements examples in JSON

A basic example of a Vish Editor presentation can be found here, it shows the basic JSON structure of a presentation and its slides. However, there is a great diversity of contents that can be inserted in a presentation, each of which has its own definition in JSON. In this document, we collect and explain some of the elements that can be included in a slide.

Generic element

Any slide element has the following mandatory fields:

{
	"id":"article1_zone3",
	"type":"text",
	"areaid":"header",
        [...]
}

The id param identifies the element in the slide following the convention "articleX_zoneY" where X is the article id and Y is the zone number which identifies the zone inside the template.
Notice that the article id is unrelated with the position of the slide.
This conventions also can be used to uniquely identify a slide in the backend by the convention "presentationId_articleX".

The type param defines the type of the element in order to allow Vish Editor to give it a special treatment. Actually, Vish Editor supports the following type param values:

• text
• image
• video (for HTML5 videos)
• object
• snapshot

One or more examples of each of them are explained in this document.

Finally, the areaid param defines the area of the template which will contains the element.
Diverse possible values are allowed in function of the template: "header", "subheader", "left", "center", "right", etc.

Text

{
	"id":"article1_zone2",
	"type":"text",
	"areaid":"header",
	"body":"Hello World"
}

In the "body" field we can also specified HTML code generated by a Wysiwyg, in order to provided styled text.

Image

{
	"id":"article1_zone1",
	"type":"image",
	"areaid":"left",
	"body":"http://vishub.org/pictures/312.jpeg",
	"style":"position: relative; width:117.1%; height:109.5%; top:-4.7%; left:-2.3%;"
}

Any URL specified in the JSON should be absolute, in order to be server-agnostic.

HTML5 Video

{
	"id":"article9_zone2",
	"type":"video",
	"areaid":"left",
	"poster":".../vishEditor/images/example_poster_image.jpg",
	"style":"position: relative; width:100%; height:100%; top:-3.125%; left:0.14%;",
	"sources":"[{ \\"type\\": \\"video/webm\\", \\"src\\": \\"http://vishub.org/videos/325.webm\\"},
                    { \\"type\\": \\"video/mp4\\", \\"src\\": \\"http://vishub.org/videos/325.mp4\\"}]"
}

Noticed that the sources field is defined as another JSON object with the following structure:

{
[
	{ 
		"type": "video/webm", 
		"src": "http://vishub.org/videos/325.webm"
	},{ 
		"type": "video/mp4",  
		"src": "http://vishub.org/videos/325.mp4" 
	}
]
}

Generic Objects

Any embeddable content defined by its URL can be included with the "object" type.
In order to provide a better integration, ViSH Editor automatically recognizes and gives special treatment to some contents like Youtube videos, PDF documents or flash files.
If a content can't be recognized, it will be embeded as an iframe.
The following JSON represents an iframe of the Wikipedia (http://en.wikipedia.org) website.

{
	"id":"article5_zone1",
	"type":"object",
	"areaid":"center",
	"body":"<iframe src=\\"http://en.wikipedia.org?wmode=transparent\\" 
                 id=\\"resizableunicID7\\" class=\\"t10_object\\" wmode=\\"transparent\\"></iframe>",
	"style":"position: relative; width:100%; height:100%; top:0%; left:0%;"
}

Youtube Video

{
	"id":"article3_zone2",
	"type":"object",
	"areaid":"left",
	"body":"<iframe src=\\"http://www.youtube.com/embed/8t29CZcGAbs?wmode=opaque\\" 
                frameborder=\\"0\\" id=\\"resizableunicID9\\" class=\\"t3_object\\" wmode=\\"opaque\\"> 
                </iframe>",
               "style":"position: relative; width:85.8%; height:100%; top:0.2%; left:6.4%;"
}

As we explain before, a Youtube video can be defined as a generic object.
In this case, Vish Editor recognizes that the content to be embeded is a Youtube video and it will be use the Youtube API to embed the video instead of a generic iframe in order to provides a better integration.
There are diverse url patterns to reference a Youtube video, any of them can be use to define the video in the JSON definition.

Flash file

Another example of how generic objects can be use to insert a flash file.

{
	'id'     : 'article1_zone1',
	'type'   : 'object',
	'areaid' : 'left',
	'body'   : '<embed width="99%" height="99%" src="contents/swf/virtualexperiment_1.swf" 
                    type="application/x-shockwave-flash"></embed>'
}

Web Snapshot

{
	"id":"article1_zone1",
	"type":"snapshot",
	"areaid":"left",
	"body":"<iframe src=\\"http://en.wikipedia.org\\" id=\\"resizableunicID10\\"
                class=\\"snapshot_content\\" scrolling=\\"no\\" wmode=\\"opaque\\"></iframe>",
	"style":"position: relative; width:83.4%; height:83.3%; top:5.5%; left:4.7%;",
	"scrollTop":"1482",
	"scrollLeft":"202"
}