Image Carousel with images from Media Library Kentico 11

0
votes

I want to create a bootstrap image carousel in Kentico 11 while fetching the images from the media library. Is there any step by step guide creating that in a page?

3
kentico
Check this link devnet.kentico.com/questions/… . You can create a custom page type with some properties to get images from library and then use repeater control with transformation using bootstrap carousal to get data from page fields. - Arun Kumar

3 Answers

1
votes

I would follow the below steps :-

  • Create a custom page type(content only) to have Image URL(media
    selector), AltText, Redirection URL attribute.
  • Create a folder for carousel.
  • Create pages under the folder for each carousel image and upload images via media selector & update other attributes.
  • Add the repeater transformation on the page for carousel referencing all the pages under the carousel folder.
0
votes

if you're using portal engine have a look at the documentation for creating a new Web Part. The dynamic component, which in your case would be an image carousel)

https://docs.kentico.com/k11/custom-development/developing-web-parts/creating-new-web-parts

Or have a look at default Image gallery Web Part, which renders a number of images.

Depending on the implementation, but regarding to getting items from the Media library directly using API, try the API examples on:

https://docs.kentico.com/api11/content-management/media-libraries

Where you end up with something like:

MediaFileInfo myFile = MediaFileInfoProvider.GetMediaFileInfo(library.LibraryID, "NewFolder/Image.png");
0
votes

I suggest using the Media Gallery Web Part (if you are using Portal Engine). You need to set:

  • Media Library from the list of existing media libraries
  • Adjust content transformation according to your needs

UPD: Transformation Example see below:

<a rel="lyteshow[4]" 
  href="<%# HTMLHelper.HTMLEncode(MediaLibraryFunctions.GetMediaFileUrl(Eval("FileLibraryID") ,Eval("FilePath"), Eval("FileGUID"), Eval("FileName"), GetDataControlValue<bool>("UseSecureLinks"), false)) %>?ext=<%# Eval("FileExtension", true) %>" 
  title="<%# ResHelper.GetString(Convert.ToString(Eval("FileDescription", true))) %>"><img 
    src="<%# MediaLibraryFunctions.GetMediaFileUrl(Eval("FileGUID"), Eval("FileName")) %>" 
    alt="<%# ResHelper.GetString(Convert.ToString(Eval("FileDescription", true))) %>" 
    title="<%# ResHelper.GetString(Convert.ToString(Eval("FileTitle", true))) %>" 
    width="140" border="0" /></a>