locked
Edit Thumbnail info for a picture library. HELP !!! RRS feed

  • Question

  • Hi all,

    Im looking for a way to change the info shown on a thumbnail in a pic library Currently it displays file name and edited by :


    I want to change it to show the Description field and a custom column ive added called title so it will look like this


    Ive found the following article 

    https://social.technet.microsoft.com/Forums/windows/en-US/d5ff610d-f3fc-486d-b334-4e76d1d23450/change-thumbnail-view-of-picture-library-to-show-specific-fields?forum=sharepointgeneral

    It  appears to do exactly what i need but im NOT a coder so trying to pick apart the code to see what to remove and add his hard plus, the code seems to have changed as this is much older

    The current code for the thumbnail.aspx is

    <%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=16.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document"  %>
    <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register Tagprefix="ApplicationPages" Namespace="Microsoft.SharePoint.ApplicationPages.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
    <SharePoint:ListProperty Property="TitleOrFolder" runat="server"/> - 
    <SharePoint:ListProperty Property="CurrentViewTitle" runat="server"/></asp:Content>
    <asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
    <SharePoint:RssLink runat="server"/>
    </asp:content>
    <asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server">
    <SharePoint:ViewIcon Width="145" Height="54" runat="server"/></asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderLeftActions" runat="server">
    <SharePoint:RecentChangesMenu runat="server" id="RecentChanges"/>
    <SharePoint:ModifySettingsLink runat="server"/>
    </asp:Content>
    <asp:Content ContentPlaceHolderId ="PlaceHolderBodyLeftBorder" runat="server">
    <div height="100%" class="ms-pagemargin"><img src="/_layouts/15/images/blank.gif?rev=44" width='6' height='1' alt="" data-accessibility-nocheck="true"/></div>
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
    <WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main"><ZoneTemplate>
    <WebPartPages:XsltListViewWebPart runat="server" ViewFlag="" ViewSelectorFetchAsync="False" InplaceSearchEnabled="True" ServerRender="False" ClientRender="True" InitialAsyncDataFetch="False" WebId="00000000-0000-0000-0000-000000000000" IsClientRender="False" GhostedXslLink="main.xsl" NoDefaultStyle="" ViewGuid="{26F13DFC-7D47-4F8B-8A0A-F33C9715D337}" EnableOriginalValue="False" DisplayName="Thumbnails" ViewContentTypeId="" ListUrl="" ListDisplayName="" ListName="{F81E32F5-E49E-42FC-8DED-4F730FD8E718}" ListId="f81e32f5-e49e-42fc-8ded-4f730fd8e718" PageSize="-1" UseSQLDataSourcePaging="True" DataSourceID="" ShowWithSampleData="False" AsyncRefresh="False" ManualRefresh="False" AutoRefresh="False" AutoRefreshInterval="60" Title="STAFF" FrameType="Default" SuppressWebPartChrome="False" Description="" IsIncluded="True" ZoneID="Main" PartOrder="2" FrameState="Normal" AllowRemove="True" AllowZoneChange="True" AllowMinimize="True" AllowConnect="True" AllowEdit="True" AllowHide="True" IsVisible="True" TitleUrl="/STAFF" DetailLink="/STAFF" HelpLink="" HelpMode="Modeless" Dir="Default" PartImageSmall="" MissingAssembly="Cannot import this Web Part." PartImageLarge="" IsIncludedFilter="" ExportControlledProperties="False" ConnectionID="00000000-0000-0000-0000-000000000000" ID="g_26f13dfc_7d47_4f8b_8a0a_f33c9715d337" __MarkupType="vsattributemarkup" __WebPartId="{26F13DFC-7D47-4F8B-8A0A-F33C9715D337}" __AllowXSLTEditing="true" __designer:CustomXsl="Fldtypes_mswhTitle.xsl;fldtypes_Ratings.xsl" WebPart="true" Height="" Width=""><ParameterBindings>
      <ParameterBinding Name="dvt_sortdir" Location="Postback;Connection"/>
                <ParameterBinding Name="dvt_sortfield" Location="Postback;Connection"/>
                <ParameterBinding Name="dvt_startposition" Location="Postback" DefaultValue=""/>
                <ParameterBinding Name="dvt_firstrow" Location="Postback;Connection"/>
                <ParameterBinding Name="OpenMenuKeyAccessible" Location="Resource(wss,OpenMenuKeyAccessible)" />
                <ParameterBinding Name="open_menu" Location="Resource(wss,open_menu)" />
                <ParameterBinding Name="select_deselect_all" Location="Resource(wss,select_deselect_all)" />
                <ParameterBinding Name="idPresEnabled" Location="Resource(wss,idPresEnabled)" /><ParameterBinding Name="NoAnnouncements" Location="Resource(wss,nopicturesinview_clickupload)" /><ParameterBinding Name="NoAnnouncementsHowTo" Location="Resource(wss,nopicturesinview_clickupload_howto)" /></ParameterBindings>
    <DataFields>
    </DataFields>
    <XmlDefinition>
    <View Name="{26F13DFC-7D47-4F8B-8A0A-F33C9715D337}" Type="HTML" DisplayName="Thumbnails" Url="/STAFF/Forms/Thumbnails_copy(1).aspx" Level="1" BaseViewID="6" ContentTypeID="0x" ImageUrl="/_layouts/15/images/plicon.png?rev=44" ><Query><OrderBy><FieldRef Name="FileLeafRef"/></OrderBy></Query><ViewFields><FieldRef Name="DocIcon"/><FieldRef Name="LinkFilenameNoMenu"/><FieldRef Name="ImageSize"/><FieldRef Name="FileSizeDisplay"/><FieldRef Name="Modified"/><FieldRef Name="Created_x0020_Date" Explicit="TRUE"/><FieldRef Name="Author" Explicit="TRUE"/><FieldRef Name="Editor" Explicit="TRUE"/><FieldRef Name="RequiredField" Explicit="TRUE"/><FieldRef Name="ImageWidth" Explicit="TRUE"/><FieldRef Name="ImageHeight" Explicit="TRUE"/><FieldRef Name="NameOrTitle" Explicit="TRUE"/><FieldRef Name="PreviewOnForm" Explicit="TRUE"/><FieldRef Name="TEAM"/></ViewFields><RowLimit Paged="TRUE">30</RowLimit><JSLink>SP.UI.TileView.js|callout.js</JSLink><XslLink Default="TRUE">main.xsl</XslLink><Toolbar Type="Standard"/></View></XmlDefinition>
    </WebPartPages:XsltListViewWebPart>

    </ZoneTemplate></WebPartPages:WebPartZone>
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server">
    <SharePoint:ListProperty CssClass="ms-listdescription" Property="Description" runat="server"/>
    </asp:Content>
    <asp:Content ContentPlaceHolderId="PlaceHolderCalendarNavigator" runat="server">
    <SharePoint:SPCalendarNavigator id="CalendarNavigatorId" runat="server"/>
      <ApplicationPages:CalendarAggregationPanel id="AggregationPanel" runat="server"/>
    </asp:Content>

    Any help would be greatly appreciated.

    Tuesday, April 18, 2017 10:22 AM

All replies

  • Please follow below steps:

    >Click on Settings sign from page > Edit Page

    >Click on Insert Tab > WebPart

    >From Categories > Select "Media and Content" > From "Parts" > Select "Script Editor"

    >Click "Add" button.

    >Now web part would added on the page. You will be seeing heading as "Script Editor" and link as "EDIT SNIPPET".

    >Click on "EDIT SNIPPET" > "Embed" will be shown

    >Take the following code: https://social.technet.microsoft.com/Forums/windows/en-US/d5ff610d-f3fc-486d-b334-4e76d1d23450/change-thumbnail-view-of-picture-library-to-show-specific-fields?forum=sharepointgeneral

    <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".ms-tileview-tile-detailsBox").each(function () {
                var title = $(this).parent().find("img").attr("alt");
                var name = $(this).parent().find("img").attr("src").split('_w/')[1].split('_')[0];
                $(this).find("ul > li:eq(0)").html(name);
                $(this).find("ul > li:eq(1)").html(title);
                $(this).find("ul > li:eq(1)").html(description);
            });
        });
    </script>

    >You need to look for correct name of field "Description".

    >Click "Insert"

    >From ribbon click on "Page" Tab > click on "Stop Editing" tab.

    After that you will be able to see the changes. 



    Thanks, Amit Kumar, LinkedIn Profile ** My Blog
    Please click "Mark As Answer" if this post solves your problem or "Vote As Helpful" if it was useful

    Tuesday, April 18, 2017 11:13 AM