...
On the right you will see the default code. You'll need to change that code. A good way to do this is to copy it to a line below the original and then comment out the original code. This way, you can easily change it back if you don't like the results just by deleting your new code and uncommenting the original. Here's how we did it. Copy this code:
Code Block language xml firstline 1 title Original linenumbers true <div class="image_load parent-block" data-apply="row_image" data-src="{$image.image}"></div>to line 2 or below that. Comment the top line (you will see how we did it in the example). Commenting the line hides it from displaying and is ignored by the script. It would now look like this:
Code Block language xml firstline 1 title New code linenumbers true <!--<div class="image_load parent-block" data-apply="row_image" data-src="{$image.image}"></div>--> <div class="image_load parent-block" data-apply="row_image" data-src="{$image.image}"></div>Hit Command + s if using a Mac, or CTRL + s if using a PC to save the changes.
Now that you have the code copied, change the second line to so that the data-src points to where your image is hosted. If it is on your server, like our example is, you would not need the full url. Since ours is in an /images folder in our public_html folder on our server, we would put it as the next example shows:
Code Block language xml firstline 1 title Final linenumbers true <!--<div class="image_load parent-block" data-apply="row_image" data-src="{$image.image}">–> <div class="image_load parent-block" data-apply="row_image" data-src="./images/banner.jpg"></div>- Be sure to clear your site's cache after changing themes.
...