How can i write a custom HTML transformation that takes image and its thumb from a datasource?

sarathlal s asked on April 10, 2014 11:03

Hi,

How can i write a custom HTML transformation that takes image and its thumb from a document datasource? I have image path "image slider" with some images. I need to make it appear as Image with thumbnails. All the jquery and css are ready. I tried with THE FOLLOWING html transormation. It works pretty good. But i need to make it dynamic, means to take values from datasource.

<div data-src="/imageslider/g-b-2.aspx" data-thumb="/imageslider/g-b-2.aspx?maxsidesize=100">
    <a>&nbsp;</a></div>
<div data-src="/imageslider/g-b-3.aspx" data-thumb="/imageslider/g-b-3.aspx?maxsidesize=100">
    <a>&nbsp;</a></div>
<div data-src="/imageslider/g-b-4.aspx" data-thumb="/imageslider/g-b-4.aspx?maxsidesize=100">
    <a>&nbsp;</a></div>
<div data-src="/imageslider/g-b-5.aspx" data-thumb="/imageslider/g-b-5.aspx?maxsidesize=100">
    <a>&nbsp;</a></div>
<div data-src="/imageslider/g-b-6.aspx" data-thumb="/imageslider/g-b-6.aspx?maxsidesize=100">
    <a>&nbsp;</a></div>

Thank you,

Sarat

html transformation

Recent Answers

Brenden Kehren answered on April 15, 2014 07:04

Use a repeater to get the files in that directory and in your transformation you can use data-src="{% GetDocumentUrl() %}" to get that individual files URL. And if you want to set an alt on the image, use alt="{% FileName %}"

0 votesVote for this answer Mark as a Correct answer