HTML Forum

**tammyhart** · 05:00 PM

I'm not sure what kind of code this would be written in, so I'm asking in here. I want something that will load images automatically from a folder, so that when I want to add new images, all I have to do is upload them to that folder. I want it to show thumbnails and then open the actual image when clicked. Is this somewhere out there, or am i asking too much??

**funkdaddu** · 01-04-2006, 05:22 PM

Sure it's possiible. What does your server support... I have ones written here in both ASP and PHP.

**Minaki** · 01-04-2006, 05:27 PM

I wrote exactly that in ASP.NET (take a look at http://www.minaki.co.uk - Photography section) If you want it in .NET I'd be happy to extract the script for you.

**howardroark** · 01-05-2006, 03:03 AM

Looking at hotscripts.com would be a good idea, too. Look under image galleries...

**tammyhart** · 01-05-2006, 10:08 AM

My server supports asp and .NET, so whichever you think would be the easiest for me. That's really awesome guys, thanks! Let me know anytime if I can help you with graphics and web design, I'd be happy to help.

**Minaki** · 03:37 PM

Well classic ASP is coming on obsolete now so I'd go with .NET

This script categorizes images. To create a category, create a folder in whatever the root directory is. The name of the category will be taken from the name of the folder. Put the images for that category into that folder. So it's something like this:
/images/photos/
--Summer Holiday 2004/
----Me.jpg
----The Hotel.jpg
----Palm Tree.jpg
--Our House/
----Bedroom.jpg
----Living Room.jpg
----Kitchen.jpg
et...
The script isn't perfect - theres a couple of characters you can't use in filenames, such as an ampersand. Although a couple of likes of code could probably fix that one.
I'd appriciate a link back to www.minaki.co.uk ("Image Gallery script provided by Minaki Serinde") but it's not really required. This code is public domain, so feel free to modify, redistribute, or do what you liek with it.
This is the default category list page. It outputs the list of folders. You'll need to change /images/photos/ to whatever directory you keep the photos under

Code:

<%@ Page Language="VB" %>
<%@ Import Namespace="System.IO" %>
<script runat="server">
 Sub Page_Load
  Dim dirInfo as New DirectoryInfo(Server.MapPath("/images/photos/"))
  repCategories.DataSource = dirInfo.GetDirectories()
  repCategories.DataBind()
 End Sub
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Photo Gallery Category List</title>
 </head>
 <body>
  <asp:Repeater id="repCategories" runat="server">
   <HeaderTemplate>
    <ul>
   </HeaderTemplate>
   <ItemTemplate>
    <li><a href="gallery.aspx?category=<%# DataBinder.Eval(Container.DataItem, "Name") %>" title="<%# DataBinder.Eval(Container.DataItem, "Name") %>"><%# DataBinder.Eval(Container.DataItem, "Name") %></a></li>
   </ItemTemplate>
   <FooterTemplate>
    </ul>
   </FooterTemplate>
  </asp:Repeater>
 </body>
</html>

This is gallery.aspx - it displays a list of thumbnails generated from the specified category. You'll need to change the directory again. You can also specify a different thumbnail width by passing a different value to thumbnail.aspx

Code:

<%@ Page Language="VB" %>
<%@ Import Namespace="System.IO" %>
<script runat="server">
 Sub Page_Load
  Dim dirInfo as New DirectoryInfo(Server.MapPath("/images/photos/" & Request.Params("category") & "/"))
  repImages.DataSource = dirInfo.GetFiles("*.jpg")
  repImages.DataBind()
 End Sub
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Photo Gallery - <%= Request.Params("category") %></title>
 </head>
 <body>
  <asp:Repeater id="repImages" runat="server">
   <HeaderTemplate>
    <h1><%= Request.Params("category") %></h1>
    <div style="text-align: center;">
   </HeaderTemplate>
   <ItemTemplate>
    <a href="image.aspx?filename=<%# Left(DataBinder.Eval(Container.DataItem, "Name"), Len(DataBinder.Eval(Container.DataItem, "Name")) - 4) %>&category=<%= Request.Params("category") %>"><img class="thumb" src="thumbnail.aspx?width=100&filename=<%# Left(DataBinder.Eval(Container.DataItem, "Name"), Len(DataBinder.Eval(Container.DataItem, "Name")) - 4) %>&category=<%= Request.Params("category") %>" alt="<%# Left(DataBinder.Eval(Container.DataItem, "Name"), Len(DataBinder.Eval(Container.DataItem, "Name")) - 4) %>"></a>
   </ItemTemplate>
   <FooterTemplate>
    </div>
   </FooterTemplate>
  </asp:Repeater>
 </body>
</html>

thumbnail.aspx - Gets an image and generates a thumbnail. Loads /images/error.gif if there's an error loading the image.

Code:

<%@ Import Namespace="System.Drawing" %>
<script runat="server">
 Dim objImage, objThumbnail As System.Drawing.Image
 Dim strFilename As String
 Dim shtWidth, shtHeight As Short     
 Sub Page_Load
 strFilename = Server.MapPath("/images/photos/" & Request.Params("category") & "/" & Request.QueryString("filename") & ".jpg")
 Try
  objImage = objImage.FromFile(strFilename)
 Catch
  objImage = objImage.FromFile(Server.MapPath("/images/error.gif"))
 End Try
 If Request.QueryString("width") = Nothing Then
  shtHeight = objImage.Height
 ElseIf Request.QueryString("width") < 1 Then
  shtHeight = 100
 Else
  shtHeight = Request.QueryString("width")
 End If
 shtWidth = objImage.Width / (objImage.Height / shtHeight)
 objThumbnail = objImage.GetThumbnailImage(shtWidth, shtHeight, Nothing, System.IntPtr.Zero)
 Response.ContentType = "image/jpeg"
 objThumbnail.Save(Response.OutputStream, Imaging.ImageFormat.Jpeg)
 objImage.Dispose()
 objThumbnail.Dispose()
 End Sub
</script>

image.aspx - Loads the full sized image. It also checks the referer to prevent hotlinking. If you don't mind people hotlinking your images, you can take the code out. It also watermarks the image, again you can cut that code out or change the watermark text.

Code:

<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="Microsoft.VisualBasic" %>
<script runat="server">
 Dim objImage As System.Drawing.Image
 Dim strFilename As String
 Dim Img As Graphics
 Dim HotLinked As Boolean
 Dim CopyText As String
 Sub Page_Load
  HotLinked = False
  ' Delete this line if you want to allow people to leech of your site, i.e. hotlink to your images
  If (Request.UrlReferrer.Host <> "www.minaki.co.uk") and (Request.UrlReferrer.Host <> "localhost") Then HotLinked = True
  CopyText = "© www.minaki.co.uk"
  strFilename = Server.MapPath("/images/photos/" & Request.Params("category") & "/" & Request.QueryString("filename") & ".jpg")
  Try
   If Not HotLinked Then
    objImage = objImage.FromFile(strFilename)
   Else
    objImage = objImage.FromFile(Server.MapPath("/images/hotlink.jpg"))
   End If
  Catch
   objImage = objImage.FromFile(Server.MapPath("/images/error.gif"))
  End Try
  Img = Graphics.FromImage(objImage)
 
  ' -------- CUT HERE IF YOU DON'T WANT A WATERMARK --------
  Dim MyFont As Font = New Font("Arial", 60, FontStyle.Bold, GraphicsUnit.Pixel)
  Dim MyColor As Color = Color.FromArgb(60, 0, 0, 0)
  Dim MyBrush As SolidBrush = New SolidBrush(MyColor)
  Dim I
  For I = 0 to (objImage.Size.Height / 120)
   Dim MyPoint As PointF = New PointF(I * 120, I * 120)
   Img.DrawString(CopyText, MyFont, MyBrush, MyPoint)
  Next I
  ' -------- END CUT --------
  Response.ContentType = "image/jpeg"
  objImage.Save(Response.OutputStream, Imaging.ImageFormat.Jpeg)
  objImage.Dispose()
  Img.Dispose()
 End Sub
</script>

**tammyhart** · 01-07-2006, 11:41 PM

okay.. i'm a dummy. give me a step 123

P.S.- I'll gladly give you a link back.

**EGS** · 01-08-2006, 12:28 AM

Let us know if everything works out!

**Minaki** · 01-08-2006, 12:18 PM

1. Create the directory structure in your website as outlined above, and put your images in it.
2. Create the 4 pages above (default.aspx, gallery.aspx, thumbnail.aspx and image.aspx)
3. Change the path to point to the directory you created in step 1. You'll need to do that in all 4 pages.
4. Edit image.aspx if you want to change/remove the watermark, or if you don't want hotlink protectio
That's it. Just call up default.aspx and it should list the category folders. Click on a category, it should display a list of thumbnails. Click a thumbnail, and it should display the full sized image.

**tammyhart** · 01-08-2006, 02:02 PM

sp when i want ppl to see my gallery, i link to gallery.aspx? It displays like a regular page?

**tammyhart** · 01-09-2006, 01:24 AM

okay, i gotsa problem

http://www.tammyhartdesigns.com/default.aspx

click on the listing

**Minaki** · 01-09-2006, 04:19 AM

Change the top line of gallery.aspx - add debug="true" like this:

<%@ Page Language="VB" debug="true" %>

That will enable the page to display the full error message. (Don't forget to take it back out when you've resolved the error). If you don't understand the error message post it here and I'll see if I can help.

**tammyhart** · 01-09-2006, 03:59 PM

still says the same thing:

Quote:

Runtime Error
Description: An application error occurred on the server. The current custom error settings for this application prevent the details of the application error from being viewed remotely (for security reasons). It could, however, be viewed by browsers running on the local server machine.

Details: To enable the details of this specific error message to be viewable on remote machines, please create a <customErrors> tag within a "web.config" configuration file located in the root directory of the current web application. This <customErrors> tag should then have its "mode" attribute set to "Off".



<configuration>
<system.web>
<customErrors mode="Off"/>
</system.web>
</configuration>

Notes: The current error page you are seeing can be replaced by a custom error page by modifying the "defaultRedirect" attribute of the application's <customErrors> configuration tag to point to a custom error page URL.



<configuration>
<system.web>
<customErrors mode="RemoteOnly" defaultRedirect="mycustompage.htm"/>
</system.web>
</configuration>

**tammyhart** · 01-11-2006, 02:08 PM

any help at all?

**Minaki** · 01-11-2006, 03:15 PM

Hmm sorry didn't realise this thread had been updated.

Make a file called web.config containing the following and put it in your web application root:

Code:

<?xml version="1.0"?>
<configuration>
    <system.web>
        <customErrors mode="Off"/>
    </system.web>
</configuration>

and then it should display the full error...

**tammyhart** · 01-11-2006, 07:58 PM

what's my web application root?

**tammyhart** · 01-12-2006, 12:03 AM

Okay, i was able to fix te original error, but now i have a new one

www.tammyhartdesigns.com/default.aspx

**Minaki** · 01-12-2006, 04:23 AM

That's telling me it can't load the image for some reason. Open up thumbnail.aspx, and change:

Code:

 Try
  objImage = objImage.FromFile(strFilename)
 Catch
  objImage = objImage.FromFile(Server.MapPath("/images/error.gif"))
 End Try

to:

Code:

' Try
  objImage = objImage.FromFile(strFilename)
 'Catch
'  objImage = objImage.FromFile(Server.MapPath("/images/error.gif"))
' End Try

(basically commenting out the lines). Then it will display the error as to why it can't load the image.

**tammyhart** · 01-12-2006, 11:39 AM

still getting this:

Quote:

Server Error in '/' Application.
--------------------------------------------------------------------------------

A Graphics object cannot be created from an image that has an indexed pixel format.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Exception: A Graphics object cannot be created from an image that has an indexed pixel format.

Source Error:

Line 22: objImage = objImage.FromFile(Server.MapPath("/images/error.gif"))
Line 23: End Try
Line 24: Img = Graphics.FromImage(objImage)
Line 25:
Line 26: ' -------- CUT HERE IF YOU DON'T WANT A WATERMARK --------

Source File: d:\domains\tammyhartdesigns.com\wwwroot\image.aspx Line: 24

Stack Trace:

[Exception: A Graphics object cannot be created from an image that has an indexed pixel format.]
System.Drawing.Graphics.FromImage(Image image) +206
ASP.image_aspx.Page_Load() in d:\domains\tammyhartdesigns.com\wwwroot\image.aspx :24
System.Web.Util.ArglessEventHandlerDelegateProxy.C allback(Object sender, EventArgs e) +10
System.Web.UI.Control.OnLoad(EventArgs e) +67
System.Web.UI.Control.LoadRecursive() +35
System.Web.UI.Page.ProcessRequestMain() +750

--------------------------------------------------------------------------------
Version Information: Microsoft .NET Framework Version:1.1.4322.2300; ASP.NET Version:1.1.4322.2300

**Minaki** · 01-13-2006, 05:01 AM

Looks like it can;t load the images for some reason. Try opening them up in an image editing program and saving them as a different format.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!