Display Images

In this demo, the BookmarkTextType and CustomData options are used to add an image tag and date added text to each bookmark. The CustomData option is used to send the URL of the image in the add request. The add bookmark API method then returns custom HTML with a resized image URL in the response.

Please note that any saved bookmarks will not be displayed. If you save a bookmark for this page, it will not be saved to the database (see the Bookmark API's CreateBookmarkImage method) and attempting to delete the bookmark will be prevented. This is done because the BookmarkTextType setting ("title") used by the other demos is incompatible with the one used here.


//"MyBookmarks1" is the id of the div element that will contain the app's content.
var ID = "MyBookmarks1";
var customData = document.getElementById("featureimage").src;
//The path to the directory containing the Bookmark API files
var APIPath = " /Bookmark/";
//The path to theme related directory that contains the image files
var imagePath = "/mybookmarks/content/themes/Dodger_Blue/Images/18px/";
var options = {
CustomData: customData,
BookmarkTextType: "HTML",
DisplayStatusMessage: false,
DisplaySuccessMessage: false,
ShowSort: false,
HeaderText: "Bookmarks",
ExcludeTitleText: [{type: "Ends with", text: " - My Bookmarks"}],
//Bookmark API URLs
BookmarksListURL: APIPath + "BookmarksListURL",
CreateBookmarkURL: APIPath + "CreateBookmark",
DeleteBookmarkURL: APIPath + "DeleteBookmark",
UpdateVisitsURL: APIPath + "UpdateVisits",
AddBookmarkImage: imagePath + "addbookmark.png",
SortAscendingImage: imagePath + "sortascending.png",
SortDescendingImage: imagePath + "sortdescending.png",
DeleteBookmarkImage: imagePath + "deletebookmark-28.png",
ToggleDeleteImage: imagePath + "toggledelete.png"
var mybookmarks = new MyBookmarks(ID, options);