Create an Image Gallery - ASP.NET Core

This tutorial shows how to create an ASP.NET Core MVC project to display images in a gallery using the LEADTOOLS JavaScript Library. In addition, the gallery will use thumbnails generated by the .NET LEADTOOLS library.

The image gallery will be two ImageViewer objects. One viewer will display multiple thumbnails in a vertical layout. When a thumbnail is selected, the full resolution image will be loaded as a single image in the other viewer, for panning and zooming interaction.

Overview  
Summary This tutorial covers how to display an image gallery in an ASP.NET Core project.
Completion Time 60 minutes
Visual Studio Project Download tutorial project (365 KB)
Platform ASP.NET Core Web Application
IDE Visual Studio 2019
Development License Download LEADTOOLS

Required Knowledge

Get familiar with the basic steps of creating a project before working on the Create an Image Gallery - ASP.NET Core tutorial, by reviewing the following:

Create the Project

In Visual Studio, create a new empty ASP.NET Core Web Application project.

The references needed depend upon the purposes of the project. References can be added by NuGet reference.

For this project, the following NuGet package is needed:

Set up MVC Project Structure

In Solution Explorer, Create the project's MVC structure folders by right-clicking on the project then selecting Add -> New Folder. Create the following folders and sub-folders:

Add LEADTOOLS JavaScript Libraries

Right-click the lib sub-folder in the wwwroot directory and select Add -> Existing Item. Navigate to the <INSTALL_DIR>\LEADTOOLS21\Bin\JS path and select the Leadtools.js file.

This will add Leadtools.js and all other JS files dependent on it.

Add the JS files

The following JS libraries are required, the rest can be removed:

Create GalleryController.cs

In the Solution Explorer, right-click on the Controllers folder and select Add -> Controller. Select the MVC Controller - Empty option and name the controller GalleryController.cs, then click Add.

Configure Startup.cs

In the Solution Explorer, open Startup.cs and use the code below to configure the project to use the MVC structure, use Static files, and set the default entry point to the Gallery view.

C#
public class Startup 
{ 
   // This method gets called by the runtime. Use this method to add services to the container. 
   // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940 
   public void ConfigureServices(IServiceCollection services) 
   { 
      services.AddControllersWithViews(); 
   } 
 
   // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. 
   public void Configure(IApplicationBuilder app, IWebHostEnvironment env) 
   { 
      if (env.IsDevelopment()) 
      { 
         app.UseDeveloperExceptionPage(); 
      } 
 
      app.UseStaticFiles(); 
 
      app.UseRouting(); 
 
      app.UseEndpoints(endpoints => 
      { 
         endpoints.MapControllerRoute( 
               name: "default", 
               pattern: "{controller=Gallery}/{action=Index}/{id?}"); 
      }); 
   } 
}

Set the License File

The License unlocks the features needed for the project. It must be set before any toolkit function is called. For details including tutorials for different platforms, refer to Setting a Runtime License.

There are two types of runtime licenses:

Note

Adding LEADTOOLS references and setting a license are covered in more detail in the .NET Add References and Set a License and JavaScript Add References and Set a License tutorial.

Since both .NET and JavaScript libraries are used in this tutorial, LEADTOOLS license (LEADTOOLS.LIC) and LEADTOOLS JavaScript license (LEADTOOLS.lic.txt) need to be set before using components from either library.

In addition, the JavaScript license file Leadtools.lic.txt needs to be placed in the wwwroot/LEADTOOLS path so that it is available to the web application.

GalleryImage Model

In the Solution Explorer, right-click on the Models folder and select Add -> New Item. Select the Class option and name the class GalleryImage.cs, then click Add.

This model will hold the paths for an image and its thumbnail. This is used in the gallery to load the appropriate image from the wwwroots/images folder.

C#
using System; 
 
namespace Create_an_Image_Gallery.Models 
{ 
   public class GalleryImage 
   { 
      public string ImagePath { get; set; } 
      public string ThumbPath { get; set; } 
   } 
}

Gallery Controller

In the Solution Explorer, open GalleryController.cs. Add the code in the below sections to generate the thumbnail for each image in the wwwroot/Images folder for use by the gallery in the web application.

Make sure that the following statements are added to the using block at the top.

C#
using Microsoft.AspNetCore.Mvc; 
using Microsoft.AspNetCore.Hosting; 
using System; 
using System.Collections.Generic; 
using System.Diagnostics; 
using System.IO; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using Leadtools; 
using Leadtools.Codecs; 
using Create_an_Image_Gallery.Models;

IWebHostEnvironment Dependency Injection

Use dependency injection to inject an instance of the IWebHostEnvironment interface which will allow the controller to load the pictures in the wwwroot/images folder by using the IWebHostEnvironment.WebRootPath in the GenerateThumbnails method below.

C#
private IWebHostEnvironment _hostingEnvironment; 
 
public GalleryController(IWebHostEnvironment environment) 
{ 
   _hostingEnvironment = environment; 
}

Index() Default Action

The default Index() action will set the license, generate the thumbnail images, and then set the view in the web page.

In addition, a list collection of the GalleryImage model is added to the ViewData which will be later passed from the View to the JavaScript code.

C#
public IActionResult Index() 
{ 
   try 
   { 
      SetLicense(); 
      ViewData["GalleryImages"] = GenerateThumbnails(); 
      return View(); 
   } 
   catch (Exception ex) 
   { 
      return StatusCode(500, ex.Message); 
   } 
}

SetLicense() Method

The SetLicense() method will set the license file and key as mentioned above before using the LEADTOOLS classes when generating the thumbnails.

C#
private void SetLicense() 
{ 
   string license = @"C:\LEADTOOLS21\Support\Common\License\LEADTOOLS.LIC"; 
   string key = System.IO.File.ReadAllText(@"C:\LEADTOOLS21\Support\Common\License\LEADTOOLS.LIC.KEY"); 
   RasterSupport.SetLicense(license, key); 
}

GenerateThumbnails() Method

The GenerateThumbnails() method will generate a thumbnail image for use in the gallery in the web page. The paths for each image and thumbnail are stored in a GalleryImage model, which are collected in a list, then passed to the ViewData as mentioned above.

C#
private List<GalleryImage> GenerateThumbnails() 
{ 
   IEnumerable<string> srcImages; 
   var srcImagesPath = Path.Combine(_hostingEnvironment.WebRootPath, "Images"); 
   srcImages = Directory.GetFiles(srcImagesPath, "*.*").Where(s => (!s.EndsWith("_thumb.jpg"))); 
 
   List<GalleryImage> GalleryImages = new List<GalleryImage>(); 
 
   using (RasterCodecs codecs = new RasterCodecs()) 
   { 
      foreach (string imagePath in srcImages) 
      { 
         using (RasterImage image = codecs.Load(imagePath)) 
         { 
            RasterImage thumbnail = image.CreateThumbnail(300, 300, image.BitsPerPixel, RasterViewPerspective.TopLeft, RasterSizeFlags.Bicubic); 
 
            string[] pathParts = imagePath.Split('\\'); 
            string fileName = pathParts[pathParts.Length - 1]; 
            string[] fileNameParts = fileName.Split('.'); 
            string thumbnailName = fileNameParts[0] + "_thumb.jpg"; 
 
            codecs.Save(thumbnail, Path.Combine(srcImagesPath, thumbnailName), image.OriginalFormat, image.BitsPerPixel, 1, -1, 1, CodecsSavePageMode.Overwrite); 
 
            GalleryImages.Add(new GalleryImage { ImagePath = Path.Combine("/Images", fileName), ThumbPath = Path.Combine("/Images", thumbnailName) }); 
         } 
      } 
   } 
   return GalleryImages; 
}

Gallery View Code

In the Solution Explorer, right-click on the Gallery sub-folder of the Views directory and select Add -> View. Select the Razor View - Empty option and name the view Index.cshtml, then click Add.

The view will contain a header that displays a title and a Back button. The body will contain a div element used as a viewer container that will initially hold the thumbnail viewer.

The GalleryImages modal list is strongly typed, serialized, and assigned to a JS variable used by the JavaScript code in site.js to load and set the images in the appropriate viewer.

<!DOCTYPE html> 
<html lang="en" style="height: 100%;"> 
<head> 
   <meta charset="utf-8" /> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
   <title>@ViewData["Title"] - LEADTOOLS Photo Gallery</title> 
   <link rel="stylesheet" href="~/css/site.css" /> 
</head> 
 
<body style="margin: 0; min-height: 100%; display: grid;"> 
   <div class="wrapper"> 
      <header id="header"> 
         <button class="btn btn-default" type="button" id="btnBack" style="margin-top: 20px; visibility: hidden;">BACK</button> 
         <h2 style="margin-left: 16px">LEADTOOLS Photo Gallery</h2> 
      </header> 
 
      <div class="container" style="height: 100%"> 
         <main role="main" class="pb-3" style="height: 100%"> 
            <div id="viewerContainer" style="height: 100%"> 
               <div id="thumbnailDiv" class="main" style="height: 100%"> 
               </div> 
            </div> 
         </main> 
      </div> 
   </div> 
 
      @model List<Create_an_Image_Gallery.Models.GalleryImage> 
      <script> var galleryImages =  @Html.Raw(Json.Serialize(@ViewData["GalleryImages"]));</script> 
 
      <script src="~/lib/Leadtools.js"></script> 
      <script src="~/lib/Leadtools.Controls.js"></script> 
      <script src="~/js/site.js" asp-append-version="true"></script> 
</body> 
</html>

site.js JavaScript Code

In the Solution Explorer, right-click on the js sub-folder of the wwwroot folder and select Add -> New Item. Select the JavaScript File option and name the JS file site.js, then click Add.

Add the following code to set the global variables for the JS code.

// Viewers and Div elements as global variables 
var _thumbnailViewer; 
var _mainViewer; 
var thumbnailDiv; 
var mainDiv;

Window.onload

Configure the window.onload function to set the license, initialize the viewers, load the images into their respective viewers, and assign the Back button's click event.

window.onload = function () { 
   setLicense(); 
   initThumbViewer(); 
   initMainViewer(); 
   addImages(); 
   document.getElementById("btnBack").addEventListener("click", back); 
}

Set JS License

Set the license before using any of the JavaScript LEADTOOLS API.

function setLicense() { 
   var licenseUrl = "/Leadtools/LEADTOOLS.lic.txt"; 
   var developerKey = "ADD THE CONTENTS OF THE LEADTOOLS.lic.key.txt FILE"; 
   lt.RasterSupport.setLicenseUri(licenseUrl, developerKey, function ( 
      setLicenseResult 
   ) { 
      // Check the status of the license  
      if (!setLicenseResult.result) { 
         alert("LEADTOOLS License is missing, invalid or expired\nError:\n"); 
      } 
   }); 
};

Note

The JavaScript license file Leadtools.lic.txt needs to be placed in the wwwroot/LEADTOOLS path so that it is available to the web application.

Initialize the Thumbnail Viewer

Initialize the _thumbnailViewer control and set the options to show the gallery thumbnails in a vertical layout and allow selection and panning interaction.

function initThumbViewer() { 
   // Create the ImageViewer JS control in the Div element 
   thumbnailDiv = document.getElementById("thumbnailDiv"); 
   var thumbnailCreateOptions = new lt.Controls.ImageViewerCreateOptions(thumbnailDiv); 
   _thumbnailViewer = new lt.Controls.ImageViewer(thumbnailCreateOptions); 
 
   // Set vertical and horizontal alignment, hide the scroll bars 
   _thumbnailViewer.set_itemHorizontalAlignment(lt.Controls.ControlAlignment.center); 
   _thumbnailViewer.set_viewHorizontalAlignment(lt.Controls.ControlAlignment.center); 
   _thumbnailViewer.set_scrollMode(lt.Controls.ControlScrollMode.hidden); 
 
   // Set vertical view layout 
   var layout = new lt.Controls.ImageViewerVerticalViewLayout(); 
   layout.columns = 0; 
   _thumbnailViewer.viewLayout = layout; 
 
   // Set PanZoom interactive mode, this will allow panning of the thumbnails 
   var panZoomMode = new lt.Controls.ImageViewerPanZoomInteractiveMode(); 
   panZoomMode.set_enableZoom(false); 
   panZoomMode.set_mouseButtons(lt.Controls.MouseButtons.none); 
   _thumbnailViewer.interactiveModes.add(panZoomMode); 
 
   // Set Selection interactive mode, this will allow the selection of the thumbnails and executing a selection handler 
   var selectItemsMode = new lt.Controls.ImageViewerSelectItemsInteractiveMode(); 
   selectItemsMode.set_isEnabled(true); 
   selectItemsMode.set_selectionMode(lt.Controls.ImageViewerSelectionMode.single); 
   _thumbnailViewer.interactiveModes.add(selectItemsMode); 
   _thumbnailViewer.add_selectedItemsChanged(handleSelection); 
 
   // Invalidate 
   _thumbnailViewer.updateTransform(); 
   _thumbnailViewer.invalidate(lt.LeadRectD.empty); 
}

Initialize the Main Viewer

Use the following code to create the div element that will hold the _mainViewer control to display the full resolution image in the gallery.

function initMainViewer() { 
   // Create the Div element for the Image Viewer 
   mainDiv = document.createElement('div'); 
   mainDiv.setAttribute("id", "mainDiv"); 
   mainDiv.setAttribute("style", "height: 100%"); 
 
   // Append to ViewerContainer Div, configure options, then remove. 
   var viewerContainer = document.getElementById("viewerContainer"); 
   viewerContainer.appendChild(mainDiv); 
   var viewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(mainDiv); 
   _mainViewer = new lt.Controls.ImageViewer(viewerCreateOptions); 
   _mainViewer.set_viewHorizontalAlignment(lt.Controls.ControlAlignment.center); 
   _mainViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
   viewerContainer.removeChild(mainDiv); 
}

Add the Gallery Images

Load the gallery image thumbnails into the thumbnail viewer as ImageViewerItem objects. The URL to the full resolution image is stored in the ImageViewerItem.Tag property.

function addImages() { 
   _thumbnailViewer.items.clear(); 
   _thumbnailViewer.beginTransform(); 
 
   for (var i = 0; i < galleryImages.length; i++) { 
      // Create an item 
      var item = new lt.Controls.ImageViewerItem(); 
 
      // Set the URL 
      item.url = galleryImages[i].thumbPath; 
 
      // Save a path to the full resolution image in the item's tag 
      item.tag = galleryImages[i].imagePath; 
 
      // Add it to the viewer 
      _thumbnailViewer.items.add(item); 
   } 
 
   _thumbnailViewer.endTransform(); 
   _thumbnailViewer.invalidate(lt.LeadRectD.empty); 
}

Selection Handler

Use the following code for the handleSelection() function that will handle when an item is selected in the thumbnail viewer. The handler will remove the thumbnail viewer's div element and append the main viewer's div element and display the full resolution image.

function handleSelection(sender, e) { 
 
   var fullResolutionImageFile; 
   var item; 
   // Get the selected items 
   var items = this.items.getSelected(); 
   for (var i = 0; i < items.length; i++) { 
      item = items[i]; 
      fullResolutionImageFile = item.tag; 
      break; 
   } 
 
   // Remove the thumbnmail div from container div and add the viewer div 
   var viewerContainer = document.getElementById("viewerContainer"); 
   var thumbnailDiv = document.getElementById("thumbnailDiv"); 
   viewerContainer.removeChild(thumbnailDiv); 
   viewerContainer.appendChild(mainDiv); 
 
   // Set the image in the viewer 
   _mainViewer.imageUrl = fullResolutionImageFile; 
 
   setBackButtonVisibility(true); 
   _thumbnailViewer.remove_selectedItemsChanged(handleSelection); 
}

Back Button

The code for the Back button will do the reverse by removing the main viewer and appending the thumbnail viewer.

function back() { 
 
   // Remove the viewer div and add back the thumbnail div 
   var viewerContainer = document.getElementById("viewerContainer"); 
   viewerContainer.removeChild(mainDiv); 
   viewerContainer.appendChild(thumbnailDiv); 
 
   // Unselect the selected item so we can reselect it 
   for (var i = 0; i < _thumbnailViewer.items.count; i++) { 
      _thumbnailViewer.items.item(i).isSelected = false; 
   } 
   _thumbnailViewer.add_selectedItemsChanged(handleSelection); 
 
   _thumbnailViewer.invalidate(lt.LeadRectD.empty); 
 
   setBackButtonVisibility(false); 
} 
 
function setBackButtonVisibility(visible) { 
 
   var backButton = document.getElementById("btnBack"); 
   if (visible) { 
      backButton.style.visibility = "visible"; 
   } 
   else { 
      backButton.style.visibility = "hidden"; 
   } 
}

Run the project

Add your desired gallery images to the wwwroot/Images folder. Run the project by pressing F5, or by selecting Debug -> Start Debugging.

If the steps were followed correctly, the web application will run in the browser. The thumbnails will be generated for the added images and displayed in the thumbnail viewer in a vertical layout.

Thumbnail Viewer

Click on any of the items to load the full resolution image in a main ImageViewer control that allows panning and zooming.

Main Viewer

To select another image from the gallery, press Back.

Wrap-up

This tutorial showed how to create an image gallery using .NET and JavaScript libraries in an ASP.NET Core project. In addition, it showed how to use the .NET CreateThumbnail() method, the JS ImageViewer object, and the JS ImageViewerItem object.

See Also

Help Version 21.0.2023.3.1
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2021 LEAD Technologies, Inc. All Rights Reserved.

LEADTOOLS Tutorials
.NET Core
.NET
Android
C DLL
Cloud Services
Docker
HTML5
iOS
Java
Xamarin
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2021 LEAD Technologies, Inc. All Rights Reserved.