Displaying images through an interactive image viewer has become increasingly popular among eCommerce websites, especially those managing large collections of product images across multiple categories. A common and effective practice is to include descriptive text or captions beneath each image, helping users better understand the product and improving overall user experience as well as SEO.
Many image viewer tools are available today, including pure JavaScript solutions (like this example) for creating interactive image sliders and galleries. However, most of these tools do not offer a built-in way to display descriptive text or captions alongside images. In this article, you'll learn how to dynamically retrieve images from a folder using ASP.NET and display them with meaningful text beneath each image, creating a more informative and user-friendly gallery.
Please note, we are not adding text with image, but displaying the text below the image and spread it horizontally on the browser.
How it will work?
On our web page, we will add a DIV element that will serve as a container. Later from code behind using C# or VB.NET, we will add images and text dynamically. All our images are stored in a folder, we don’t know how many. Therefore, we need to get the list of files from the folder, set condition to check if it is an image file. Once confirmed it is an image file, we will create an object of HtmlImage class to display the extracted images.
To add a text below each image, we will use HtmlGenericControl class. It provides us with necessary methods to add style and other attributes to the elements, dynamically. Finally, we will add the images with the text to the parent container.
🌈 Turn your image into a stunning color palette in seconds. – Try it now. Its free and instant.
<body>
<div id="divGallary" style="position:relative;top:0;width:700px;" runat="server"></div>
</body>
using System;
using System.IO;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
int iFileCnt = 0;
System.IO.DirectoryInfo dirInfo = new System.IO.DirectoryInfo(Server.MapPath("~/images/theme/"));
FileInfo[] listfiles = dirInfo.GetFiles("*.*");
if (listfiles.Length > 0)
{
foreach (FileInfo file in listfiles)
{
// CHECK THE TYPE OF FILE.
if ((listfiles[iFileCnt].Extension == ".jpg" ||
listfiles[iFileCnt].Extension == ".jpeg" ||
listfiles[iFileCnt].Extension == ".png" ||
listfiles[iFileCnt].Extension == ".bmp" ||
listfiles[iFileCnt].Extension == ".gif"))
{
HtmlImage img = new HtmlImage();
HtmlGenericControl newDiv = new HtmlGenericControl("div");
HtmlGenericControl textDiv = new HtmlGenericControl("div");
// ADD IMAGE.
img.Src = "~/images/theme/" + listfiles[iFileCnt].Name;
img.Width = 130;
img.Height = 130;
newDiv.Attributes.Add("style", "float:left;padding:5px 3px;
margin:20px 3px;height:auto;overflow:hidden;");
newDiv.Controls.Add(img);
// ADD A TEXT.
textDiv.Attributes.Add("style", "display:block;font:13px Arial;padding:10px 0;width:" +
img.Width + "px;color:#666;text-align:center;cursor:pointer;");
textDiv.InnerText = "Various Catgories - Binding, Product Specification, Author (Price Tag)";
newDiv.Controls.Add(textDiv);
divGallary.Controls.Add(newDiv);
}
iFileCnt = iFileCnt + 1;
}
}
}
}
Imports System.IO
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
Dim iFileCnt As Integer = 0
Dim dirInfo As New System.IO.DirectoryInfo(Server.MapPath("~/images/theme/"))
Dim listfiles As FileInfo() = dirInfo.GetFiles("*.*")
If listfiles.Length > 0 Then
For Each file As FileInfo In listfiles
' CHECK THE TYPE OF FILE.
If Trim(listfiles(iFileCnt).Extension) = ".jpg" Or _
Trim(listfiles(iFileCnt).Extension) = ".jpeg" Or _
Trim(listfiles(iFileCnt).Extension) = ".png" Or _
Trim(listfiles(iFileCnt).Extension) = ".bmp" Or _
Trim(listfiles(iFileCnt).Extension) = ".gif" Then
Dim img As New HtmlImage
Dim newDiv As New HtmlGenericControl("div")
Dim textDiv As New HtmlGenericControl("div")
' ADD IMAGE.
img.Src = "~/images/theme/" & listfiles(iFileCnt).Name
img.Width = "130"
img.Height = "130"
newDiv.Attributes.Add("style", "float:left;padding:5px 3px;
margin:20px 3px;height:auto;overflow:hidden;")
newDiv.Controls.Add(img)
' ADD A TEXT.
textDiv.Attributes.Add("style", "display:block;font:13px Arial;padding:10px 0;width:" & _
img.Width & "px;color:#666;text-align:center;cursor:pointer;")
textDiv.InnerText = "Various Catgories - Binding, Product Specification, Author (Price Tag)"
newDiv.Controls.Add(textDiv)
divGallary.Controls.Add(newDiv)
End If
iFileCnt = iFileCnt + 1
Next
End If
End Sub
End ClassIt is simple and yet a very useful piece of code, particularly for beginners. If you look carefully inside the code, you will see we have set the attributes of each element, dynamically, such as setting a fixed width and height for the images, aligning the text etc.