Values

The content of the data structure is dynamic: it is entered by the user.
In the "Settings" section of the "Edit" area, you can configure it to enter a single element or a collection.
Each element can be an image or a video.
This visual area also has a header section made up of a title (textarea) and a subtitle (HTML editor).

{
  "title" : "Imágenes destacadas",
  "subTitle" : "<p>En esta sección se muestra la relación de imágenes destacadas</p>",
  "images" : [ {
     "sourcePath" : "images/webavc00-logoAVC.png",
     "sourceType" : "IMAGE|VIDEO"
     "altText" : "Logo de AVC ",
     "link" : {
        "url" : "/webavc00-home/es/",
        "texts" : {
           "text" : "Texto del enlace",
           "description" : "Title del enlace"
        },
        "presentation" : {
          "openTarget" : "_blank"
        },
        "useCanonicalUrl" : false
     }
   } ]
}

Description of the items

• title: Title of the header section of the visual area

• subTitle: Subtitle of the header section of the visual area

• images: Global object that contains a list of image/video objects

• sourcePath: Path where the image/video is hosted. It can be local (/ images / ...) or external (http://www .....)

• sourceType: Resource type. Values can be "IMAGE" or "VIDEO".

• altText: Alternative text for the image

• link: Link object. It's optional

  • url: Link url

  • texts: Link text object

    • text: Link text

    • description: Link description

  • presentation: Object with information on how to open the link

  • openTarget: How the link is opened

  • useCanonicalUrl: Canonical url usage

Editable by the web designer

The html is editable by the user. Through "expressions" we can model how to insert the data structure on the page.

<div class="va{OID}">
    <!-- for image/video collection -->
    <ul>
        {{#each images}}
            <li class="thumbnail">
                {{#if (isImage this)}}
                    <a href="{{this.link.url}}" target="_blank">
                        <img class="responsive" alt="{{{this.altText}}}" src="{{this.sourcePath}}">
                    </a>
                {{else}}
                    <video width="320" height="240" controls>
                        <source src="{{this.link.url}}" type="video/mp4">
                    </video>
                {{/if}}
            </li>
        {{/each}}
    </ul>

    <!-- for single image -->
    {{#each images}}
        <a href="{{this.url}}" target="_blank">
            <img class="responsive" alt="{{{this.altText}}}" src="{{this.sourcePath}}">
        </a>
    {{/each}}
 </div>

Definition of expressions

{{#each images}} {{/each}}: Expression to iterate the collection of objects. Inside the expression it allows us to access the values of the object.

To access the values of the object we do it using the properties:

• {{this.sourcePath}}

• {{{this.altText}}}

• {{this.link.url}}

• {{{this.link.texts.text}}}

• {{{this.link.texts.description}}}

(isImage this): Expression that returns true if the item we are iterating is of type image and false if it is not.

(isVideo this): Expression that returns true if the item we are iterating is of type video and false if it is not.

(eq this.sourceType "IMAGE"): Expression that returns true if the item we are iterating is of type image and false if it is not.

(eq this.sourceType "VIDEO"): Expression that returns true if the item we are iterating is of type video and false if it is not.