Image selector for content items: Download and install the image selector
- Download the Thumbnail selector field and extract the contents of the ZIP file to a dedicated folder.
-
Open your project in Visual Studio.
-
In the context menu of your solution, click Add » Existing Project…
-
In the extraction folder, find and select ThumbnailSelectorField.csproj file.
-
In the context menu of your SitefinityWebApp project, click Add » Existing Item…
-
In the extraction folder, find and select the Global.asax file.
NOTE: If you already have a Global.asax file added to your project, you must merge it with the new one.
-
In your SitefinityWebApp project, open the context menu of References folder and click Add Reference…
-
Click Solution » Projects and select the ThumbnailSelectorField project.
-
Under the ThumbnailSelectorField project, in the context menu of the References folder, click Add Reference...
-
Browse to the bin folder of your SitefinityWebApp project and select the following assemblies:
- Telerik.OpenAccess.dll
- Telerik.Sitefinity.dll
- Telerik.Sitefinity.Model.dll
- Telerik.Web.UI.dll
-
Build your solution and restart the application.
-
If prompted, save the solution file in the root application folder.
-
Close Visual Studio.
-
Run the project and create a custom field for a chosen module using procedure Create a new custom field.
-
In Type, select Short Text.
-
In Name, enter Thumbnail
-
In Interface widget for entering data, select Custom…
-
In Type or Virtual path of the custom widget, enter Telerik.Sitefinity.Samples.SimpleImageField
-
Upload some images and if there are no albums created, create albums.
-
Edit the widget template that you are going to use to display the items.
For example, if you want the images to be displayed with the news items in list mode, edit the News – list widget template that you will use. For more information, see Create and edit widget templates.
-
In the widget template, perform the following:
-
Register a prefix to load the widget template by entering:
<%@ Register TagPrefix="samples" Namespace="Telerik.Sitefinity.Samples" Assembly="ThumbnailSelectorField" %>
in the beginning of the template.
- Inside the <ItemTemplate> tag, enter:
<
samples:SimpleImageField
runat
=
"server"
DisplayMode
=
"Read"
Value='<%#Eval("Thumbnail")%>'/>
where you want the image to appear. For example, after the news heading (<h1> tag).
You are now be able to assign images to news items item. To apply the functionality to other modules, for each module, perform the above procedure from Step 15 to Step 17.
To add am image to an item, you must have uploaded the image first. For more information, see Upload images.