npm - comand-component-library - Versions diffs - 3.3.15 → 3.3.16 - Mend

comand-component-library 3.3.15 → 3.3.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/src/App.vue CHANGED Viewed

@@ -69,6 +69,29 @@
             </CmdWidthLimitationWrapper>
             <!-- end width-limitation-wrapper (with table of contents) --------------------------------------------------------------------------------------------------------------------------------------------------->
+            <!-- begin address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
+            <a id="section-advanced-form-elements"></a>
+            <CmdWidthLimitationWrapper>
+                <h2 class="headline-demopage">Address Data</h2>
+                <div class="flex-container">
+                    <CmdAddressData :addressData="addressData"
+                                    :linkGoogleMaps="false"
+                                    :cmdHeadline="{headlineText: 'With label texts', headlineLevel: 3}"
+                    />
+                    <CmdAddressData :addressData="addressData"
+                                    :linkGoogleMaps="false"
+                                    :show-label-texts="false"
+                                    :cmdHeadline="{headlineText: 'Without label texts', headlineLevel: 3}"
+                    />
+                    <CmdAddressData :addressData="addressData"
+                                    :linkGoogleMaps="false"
+                                    :show-label-icons="false"
+                                    :cmdHeadline="{headlineText: 'Without label icons', headlineLevel: 3}"
+                    />
+                </div>
+            </CmdWidthLimitationWrapper>
+            <!-- end address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
             <a id="section-advanced-form-elements"></a>
             <CmdWidthLimitationWrapper>
@@ -794,94 +817,94 @@
             <a id="section-boxes"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Boxes</h2>
-                <CmdBoxWrapper :useFlexbox="true" :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}" >
-                    <CmdBox v-for="index in 14" :key="index" textBody="Content" :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}" />
+                <CmdBoxWrapper :useFlexbox="true" :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}">
+                    <CmdBox v-for="index in 14" :key="index" textBody="Content" :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}"/>
                 </CmdBoxWrapper>
                 <CmdBoxWrapper :useFlexbox="true" :cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}">
-                        <CmdBox
-                            :stretch-vertically="false"
-                            :cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
-                            textBody="This is a long text that is cutoff after a specific number of lines that can be defined by the property 'cutoffTextLines' and be toggled by a link below."
-                            :cutoff-text-lines="4"
-                        />
-                        <CmdBox :useSlots="['header', 'body', 'footer']">
-                            <template v-slot:header>
-                                <h4>
-                                    Texts given by slots
-                                </h4>
-                            </template>
-                            <template v-slot:body>
-                                <div class="padding">
-                                    <p>
-                                        This content with paragraphs inside is placed inside the box-body.
-                                    </p>
-                                    <p>
-                                        <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
-                                    </p>
-                                </div>
-                            </template>
-                            <template v-slot:footer>
+                    <CmdBox
+                        :stretch-vertically="false"
+                        :cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
+                        textBody="This is a long text that is cutoff after a specific number of lines that can be defined by the property 'cutoffTextLines' and be toggled by a link below."
+                        :cutoff-text-lines="4"
+                    />
+                    <CmdBox :useSlots="['header', 'body', 'footer']">
+                        <template v-slot:header>
+                            <h4>
+                                Texts given by slots
+                            </h4>
+                        </template>
+                        <template v-slot:body>
+                            <div class="padding">
                                 <p>
-                                    Footer content
+                                    This content with paragraphs inside is placed inside the box-body.
                                 </p>
-                            </template>
-                        </CmdBox>
-                        <CmdBox :useSlots="['header', 'body']">
-                            <template v-slot:header>
-                                <h4>
-                                    Box with links
-                                </h4>
-                            </template>
-                            <template v-slot:body>
-                                <ul class="navigation">
-                                    <li><a href="#" @click.prevent="">Link name 1</a></li>
-                                    <li><a href="#" @click.prevent="">Link name 2</a></li>
-                                    <li><a href="#" @click.prevent="">Link name 3</a></li>
-                                    <li><a href="#" @click.prevent="">Link name 4</a></li>
-                                </ul>
-                            </template>
-                            <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
-                            <template v-slot:footer>
-                                <p>
-                                    footer content
-                                </p>
-                            </template>
-                        </CmdBox>
-                        <CmdBox
-                            :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
-                            :image="{src: 'media/images/content-images/landscape-medium.jpg', altText: 'ALternative text'}"
-                            textBody="This is some text given by property."
-                            :collapsible="true"
-                        />
-                        <CmdBox :useSlots="['header', 'body']" :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}" :collapsible="true">
-                            <template v-slot:header>
-                                <h4>
-                                    Collapsible box with image
-                                </h4>
-                            </template>
-                            <template v-slot:body>
-                                <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text" />
-                            </template>
-                        </CmdBox>
-                        <CmdBox :useSlots="['header', 'body', 'footer']">
-                            <template v-slot:header>
-                                <h4>
-                                    Box with image and content
-                                </h4>
-                            </template>
-                            <template v-slot:body>
-                                <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
-                                <div class="default-padding">
-                                    <h4>Headline</h4>
-                                    <p>This is some text information i.e a short-text for a news teaser.</p>
-                                </div>
-                            </template>
-                            <template v-slot:footer>
                                 <p>
-                                    <a href="#">Read more&hellip;</a>
+                                    <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
                                 </p>
-                            </template>
-                        </CmdBox>
+                            </div>
+                        </template>
+                        <template v-slot:footer>
+                            <p>
+                                Footer content
+                            </p>
+                        </template>
+                    </CmdBox>
+                    <CmdBox :useSlots="['header', 'body']">
+                        <template v-slot:header>
+                            <h4>
+                                Box with links
+                            </h4>
+                        </template>
+                        <template v-slot:body>
+                            <ul class="navigation">
+                                <li><a href="#" @click.prevent="">Link name 1</a></li>
+                                <li><a href="#" @click.prevent="">Link name 2</a></li>
+                                <li><a href="#" @click.prevent="">Link name 3</a></li>
+                                <li><a href="#" @click.prevent="">Link name 4</a></li>
+                            </ul>
+                        </template>
+                        <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
+                        <template v-slot:footer>
+                            <p>
+                                footer content
+                            </p>
+                        </template>
+                    </CmdBox>
+                    <CmdBox
+                        :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
+                        :image="{src: 'media/images/content-images/landscape-medium.jpg', altText: 'ALternative text'}"
+                        textBody="This is some text given by property."
+                        :collapsible="true"
+                    />
+                    <CmdBox :useSlots="['header', 'body']" :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}" :collapsible="true">
+                        <template v-slot:header>
+                            <h4>
+                                Collapsible box with image
+                            </h4>
+                        </template>
+                        <template v-slot:body>
+                            <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
+                        </template>
+                    </CmdBox>
+                    <CmdBox :useSlots="['header', 'body', 'footer']">
+                        <template v-slot:header>
+                            <h4>
+                                Box with image and content
+                            </h4>
+                        </template>
+                        <template v-slot:body>
+                            <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
+                            <div class="default-padding">
+                                <h4>Headline</h4>
+                                <p>This is some text information i.e a short-text for a news teaser.</p>
+                            </div>
+                        </template>
+                        <template v-slot:footer>
+                            <p>
+                                <a href="#">Read more&hellip;</a>
+                            </p>
+                        </template>
+                    </CmdBox>
                 </CmdBoxWrapper>
                 <h3>Product boxes</h3>
                 <div class="grid-container-create-columns">
@@ -896,7 +919,7 @@
                     </div>
                 </div>
                 <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true">
-                    <CmdBox v-for="index in boxUserData.length" :key="index" boxType="user" :user="boxUserData[index - 1]" :cmdHeadline="{headlineLevel: 5}" />
+                    <CmdBox v-for="index in boxUserData.length" :key="index" boxType="user" :user="boxUserData[index - 1]" :cmdHeadline="{headlineLevel: 5}"/>
                 </CmdBoxWrapper>
             </CmdWidthLimitationWrapper>
             <!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -938,18 +961,23 @@
             <a id="section-fancybox"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Fancybox</h2>
-                <a href="#" @click.prevent="showFancyBox('text','Some text')">Open FancyBox with text</a>
+                <h3>FancyBox with text</h3>
+                <a href="#" @click.prevent="showFancyBox('text','Some text', 'FancyBox with text')">Open FancyBox with text</a>
+                <h3>FancyBox with large image given by url</h3>
                 <a href="#"
-                   @click.prevent="showFancyBox('url', 'media/images/content-images/landscape-large.jpg')"
+                   @click.prevent="showFancyBox('url', 'media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
                    title="Open FancyBox with large image given by url"
+                   style="display: inline-flex;"
                 >
-                   <img src="media/images/content-images/landscape-small.jpg" alt="Alternative text"/>
+                    <img src="media/images/demo-images/small/landscape-01.jpg" alt="Alternative text"/>
                 </a>
+                <h3>FancyBox with large image given by property</h3>
                 <a href="#"
-                   @click.prevent="showFancyBox('image', 'media/images/content-images/landscape-large.jpg')"
+                   @click.prevent="showFancyBox('image', 'media/images/demo-images/large/landscape-02.jpg', 'FancyBox with large image given by property')"
                    title="Open FancyBox with large image given by property"
+                   style="display: inline-flex;;"
                 >
-                    <img src="media/images/content-images/landscape-small.jpg" alt="Alternative text"/>
+                    <img src="media/images/demo-images/small/landscape-02.jpg" alt="Alternative text"/>
                 </a>
             </CmdWidthLimitationWrapper>
@@ -968,11 +996,21 @@
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Icons</h2>
                 <ul>
-                    <li><span>Icon from local iconfont</span><CmdIcon iconClass="icon-home" /></li>
-                    <li><span>Icon from iconify-api (icomoon-font)</span><CmdIcon iconClass="icomoon-free:home" /></li>
-                    <li><span>Icon from iconify-api (bootstrap-font)</span><CmdIcon iconClass="bi:house-fill" /></li>
-                    <li><span>Icon from iconify-api (material-design-font)</span><CmdIcon iconClass="mdi:home" /></li>
-                    <li><span>Icon from iconify-api (font-awesome-solid-font)</span><CmdIcon iconClass="fa6-solid:house-chimney" /></li>
+                    <li><span>Icon from local iconfont</span>
+                        <CmdIcon iconClass="icon-home"/>
+                    </li>
+                    <li><span>Icon from iconify-api (icomoon-font)</span>
+                        <CmdIcon iconClass="icomoon-free:home"/>
+                    </li>
+                    <li><span>Icon from iconify-api (bootstrap-font)</span>
+                        <CmdIcon iconClass="bi:house-fill"/>
+                    </li>
+                    <li><span>Icon from iconify-api (material-design-font)</span>
+                        <CmdIcon iconClass="mdi:home"/>
+                    </li>
+                    <li><span>Icon from iconify-api (font-awesome-solid-font)</span>
+                        <CmdIcon iconClass="fa6-solid:house-chimney"/>
+                    </li>
                 </ul>
             </CmdWidthLimitationWrapper>
             <!-- end icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -982,8 +1020,8 @@
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Image</h2>
                 <div class="flex-container">
-                    <CmdImage :image="imageData[0].image" :figcaption="imageData[0].figcaption" />
-                    <CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption" />
+                    <CmdImage :image="imageData[0].image" :figcaption="imageData[0].figcaption"/>
+                    <CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption"/>
                 </div>
             </CmdWidthLimitationWrapper>
             <!-- end images ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -992,7 +1030,7 @@
             <a id="section-image-gallery"></a>
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Image-Gallery</h2>
-                <CmdImageGallery :images="imageGalleryData" />
+                <CmdImageGallery :images="imageGalleryData"/>
             </CmdWidthLimitationWrapper>
             <!-- end image-gallery ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1012,7 +1050,7 @@
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">Login Form</h2>
                 <CmdForm :use-validation="true" :use-fieldset="false">
-                    <CmdLoginForm v-model="loginData" textLegendLoginForm="Please log in" />
+                    <CmdLoginForm v-model="loginData" textLegendLoginForm="Please log in"/>
                 </CmdForm>
                 <p>LoginData: {{ loginData }}</p>
             </CmdWidthLimitationWrapper>
@@ -1024,7 +1062,7 @@
             <CmdWidthLimitationWrapper>
                 <h2 class="headline-demopage">List Of Links</h2>
                 <h3>Vertical</h3>
-                <CmdListOfLinks :links="listOfLinksData" />
+                <CmdListOfLinks :links="listOfLinksData"/>
                 <h3>Horizontal (aligned left, with headline)</h3>
                 <CmdListOfLinks
                     orientation="horizontal"
@@ -1357,7 +1395,13 @@
         <!-- end copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
         <!-- begin fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
-        <CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyboxOptions="{}" :allowEscapeKey="false" :cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}">
+        <CmdFancyBox
+            :show="fancyBoxCookieDisclaimer"
+            :fancyboxOptions="{}"
+            :allowEscapeKey="false"
+            :cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}"
+            ariaLabelText="Cookie Disclaimer"
+        >
             <!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
             <CmdCookieDisclaimer
                 :cookieOptions="cookieDisclaimerData"
@@ -1579,11 +1623,25 @@ export default {
         showError() {
             alert("Error")
         },
-        showFancyBox(type, content) {
+        showFancyBox(type, content, ariaLabelText) {
             if (type === "text") {
-                openFancyBox({content: content, cmdHeadline: {show: true, headlineText: "Fancybox with text", headlineLevel: 3}})
+                openFancyBox({
+                    content: content,
+                    cmdHeadline: {
+                        show: true,
+                        headlineText: "Fancybox with text", headlineLevel: 3
+                    },
+                    ariaLabelText: ariaLabelText
+                })
             } else if (type === "url") {
-                openFancyBox({url: content, cmdHeadline: {show: true, headlineText: "Fancybox with image given by url", headlineLevel: 3}})
+                openFancyBox({
+                    url: content,
+                    cmdHeadline: {
+                        show: true,
+                        headlineText: "Fancybox with image given by url", headlineLevel: 3
+                    },
+                    ariaLabelText: ariaLabelText
+                })
             } else if (type === "image") {
                 openFancyBox({
                     url: content,
@@ -1602,7 +1660,8 @@ export default {
                             show: true,
                             text: "figcaption"
                         }
-                    }
+                    },
+                    ariaLabelText: ariaLabelText
                 })
             }
         },

package/src/assets/data/address-data.json CHANGED Viewed

@@ -1,43 +1,43 @@
 {
-      "company": {
-            "iconClass": "icon-company",
-            "value": "Your company name"
-      },
-      "address": {
-            "iconClass": "icon-home",
-            "streetNo": "Your Street/No",
-            "zip": "Your zip",
-            "city": "Your city",
-            "miscInfo": "",
-            "country": "Your country",
-            "longitude": "0.0",
-            "latitude": "0.0",
-            "location": ""
-      },
-      "telephone": {
-            "iconClass": "icon-phone",
-            "value": "Your phone number"
-      },
-      "mobilephone": {
-            "iconClass": "icon-device-smartphone",
-            "value": "Your mobile phone number"
-      },
-      "fax": {
-            "iconClass": "icon-fax",
-            "value": "Your fax number"
-      },
-      "email": {
-            "iconClass": "icon-mail",
-            "value": "Your email address"
-      },
-      "website": {
-            "iconClass": "icon-globe",
-            "value": "Your web site"
-      },
-      "custom": {
-            "iconClass": "icon-questionmark-circle",
-            "value": "Custom data"
-      }
+  "company": {
+    "iconClass": "icon-company",
+    "text": "Your company name"
+  },
+  "address": {
+    "iconClass": "icon-home",
+    "streetNo": "Your Street/No",
+    "zip": "Your zip",
+    "city": "Your city",
+    "miscInfo": "",
+    "country": "Your country",
+    "longitude": "0.0",
+    "latitude": "0.0",
+    "location": ""
+  },
+  "telephone": {
+    "iconClass": "icon-phone",
+    "text": "Your phone number"
+  },
+  "mobilephone": {
+    "iconClass": "icon-device-smartphone",
+    "text": "Your mobile phone number"
+  },
+  "fax": {
+    "iconClass": "icon-fax",
+    "text": "Your fax number"
+  },
+  "email": {
+    "iconClass": "icon-mail",
+    "text": "Your email address"
+  },
+  "website": {
+    "iconClass": "icon-globe",
+    "text": "Your web site"
+  },
+  "custom": {
+    "iconClass": "icon-questionmark-circle",
+    "text": "Custom data"
+  }
 }

package/src/assets/data/image-gallery.json CHANGED Viewed

@@ -1,8 +1,8 @@
 [
   {
     "image": {
-      "src": "media/images/gallery-images/large/landscape-01.jpg",
-      "srcImageLarge": "media/images/gallery-images/large/landscape-01.jpg",
+      "src": "media/images/demo-images/medium/landscape-01.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-01.jpg",
       "alt": "Alternative text 1"
     },
     "figcaption": {
@@ -14,8 +14,8 @@
   },
   {
     "image": {
-      "src": "media/images/gallery-images/large/landscape-02.jpg",
-      "srcImageLarge": "media/images/gallery-images/large/landscape-02.jpg",
+      "src": "media/images/demo-images/medium/landscape-02.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-02.jpg",
       "alt": "Alternative text 2"
     },
     "figcaption": {
@@ -27,8 +27,8 @@
   },
   {
     "image": {
-      "src": "media/images/gallery-images/large/landscape-03.jpg",
-      "srcImageLarge": "media/images/gallery-images/large/landscape-03.jpg",
+      "src": "media/images/demo-images/medium/landscape-03.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-03.jpg",
       "alt": "Alternative text 3"
     },
     "figcaption": {
@@ -40,8 +40,8 @@
   },
   {
     "image": {
-      "src": "media/images/gallery-images/large/landscape-04.jpg",
-      "srcImageLarge": "media/images/gallery-images/large/landscape-04.jpg",
+      "src": "media/images/demo-images/medium/landscape-04.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-04.jpg",
       "alt": "Alternative text 4"
     },
     "figcaption": {

package/src/assets/data/thumbnail-scroller.json CHANGED Viewed

@@ -2,8 +2,8 @@
   {
     "image": {
       "id": 1,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-01.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-01.jpg",
       "alt": "Alternative Text 1"
     },
     "figcaption": {
@@ -16,8 +16,8 @@
   {
     "image": {
       "id": 2,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-02.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-02.jpg",
       "alt": "Alternative Text 2"
     },
     "figcaption": {
@@ -30,8 +30,8 @@
   {
     "image": {
       "id": 3,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-03.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-03.jpg",
       "alt": "Alternative Text 3"
     },
     "figcaption": {
@@ -44,8 +44,8 @@
   {
     "image": {
       "id": 4,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-04.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-04.jpg",
       "alt": "Alternative Text 4"
     },
     "figcaption": {
@@ -58,8 +58,8 @@
   {
     "image": {
       "id": 5,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-05.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-05.jpg",
       "alt": "Alternative Text 5"
     },
     "figcaption": {
@@ -72,8 +72,8 @@
   {
     "image": {
       "id": 6,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-06.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-06.jpg",
       "alt": "Alternative Text 6"
     },
     "figcaption": {
@@ -86,8 +86,8 @@
   {
     "image": {
       "id": 7,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-07.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-07.jpg",
       "alt": "Alternative Text 7"
     },
     "figcaption": {
@@ -100,8 +100,8 @@
   {
     "image": {
       "id": 8,
-      "srcImageSmall": "media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg",
-      "srcImageLarge": "media/images/thumbnail-scroller/original/logo-cmd-blue-landscape.jpg",
+      "srcImageSmall": "media/images/demo-images/small/landscape-08.jpg",
+      "srcImageLarge": "media/images/demo-images/large/landscape-08.jpg",
       "alt": "Alternative Text 8"
     },
     "figcaption": {