Displaying other Rendition

[Paul Federwitz]

SharePoint 2013 has a great feature where you can display different renditions of the same image. I have a list where each item has an “Item Icon”, an image to represent it. For most places where this icon is used I need a very small rendition, 100×100 px.

However, when a user clicks on the list item to view it, I would like them to see a larger version. What I need help with is a way to make the display form to show a larger rendition (only the display form, the edit and new forms can use the default rendition).

Currently the image that is displayed is this:
https://Contoso.sharepoint.com/Photo%20Library/image.jpg?RenditionID=5

I need to change it to this:
https://Contoso.sharepoint.com/Photo%20Library/image.jpg?RenditionID=6

Here is the information about the field:
Display Name: Item Icon
Internal Name: Item_x0020_Icon
Field Type: SPFieldImage

Note that this type of field stores the information as “LinkTitle,LinkURL”. In my case it is stored as “Item Icon,https://Contoso.sharepoint.com/Photo%20Library/image.jpg?RenditionID=5”. When I try to put the field name into the HTML section like this “Item_x0020_Icon” it simply displays “Item Icon” on the form.

Any help would be appreciated. I am not all that great with JavaScript, just enough to see what is going on and make a few modifications. Here is an article on how somebody did this with a Content Search Web Part, I just haven’t figured out how to apply it to DFFS.
https://www.martinhatch.com/2013/08/customising-content-search-web-part.html

[Alexander Bautz]

Hi,
I don’t have any experience using renditions, but you should most likely be OK if you put this in the custom JS in the DispForm:

var the_image = $("#dffs_NameOfImageField").find("img");
the_image.attr("src",the_image.attr("src").replace("RenditionID=5","RenditionID=6"));

Change “NameOfImageField” to your field name.

Alexander

[Paul Federwitz]

That worked. Thank you very much. It takes a second after the form loads to then update the image. It first loads the smaller rendition, then replaces the image. That is fine, but just wondering if there is a way to have it load this new image right away.

~Paul

[Alexander Bautz]

When adding code to the Custom JS, it fires after DFFS has loaded. If you want to trigger it earlier, you could modify the code some thing like this:

<script type="text/javascript">
var the_image = $("table.ms-formtable img[src$='RenditionID=5']");
the_image.attr("src",the_image.attr("src").replace("RenditionID=5","RenditionID=6"));
</script>

and put it a CEWP below the form, or if you use SharePoint 2013, add it as a JSLink script on the field itself.

Look here for a general description of the JSLink option: https://spjsblog.com/2015/07/19/jslink-add-client-side-rendering-to-a-field/

If you will use this approach, and have trouble adapting the code, let me know.

Alexander

• This reply was modified 8 years, 2 months ago by Alexander Bautz. Reason: Added script tags
• This reply was modified 8 years, 2 months ago by Alexander Bautz.

[Author]

Posts