Example 2: Correcting and Displaying Data

The example below shows how to modify data provided on the desktop site page and return it on your mobile site. Code on the desktop site page:

<html>

  <body>

    <div>

      <img class="class1" src="image1.jpg" />

      <img class="class1" src="image2.jpg" />

      <img class="class1" src="image3.jpg" />

    </div>

    <div>

      <img class="class2" src="image4.jpg" />

      <img class="class2" src="image5.jpg" />

      <img class="class2" src="image6.jpg" />

    </div>

  </body>

</html>

Template parameters definition

imageList1: {
    xpath: '//img[@class="class1"]',

    get:   '@src',

    list: true
  },

imageList2: {
    xpath: '//img[@class="class2"]',

    get:   '@src',

    list: true
  }

Code in the snippet:

<!--{foreach arguments[0] as item }-->

   <img src="<!--{= 'mobile-' + item }-->">

<!--{/foreach}-->

Code in the template:

<!--{ call sample_snippet($.imageList1) }-->

...

<!--{ call sample_snippet($.imageList2) }-->

Resulting code on your mobile site page will look like:

<img src="mobile-image1.jpg">

<img src="mobile-image2.jpg">

<img src="mobile-image3.jpg">

...
<img src="mobile-image4.jpg">

<img src="mobile-image5.jpg">

<img src="mobile-image6.jpg">

So, the “mobile-“ string will be added to the src image attribute.

See also