Hi All,
I have a client that has thousands of images but is only using a subset them. I made the mistake of uploading all the images to the product image repository so that the client does not have to upload them. Big mistake. The image selector is timing out. So I came up with a better idea. Only display in the image selector what the client just uploaded. Acutally, I got the idea from a post and from looking at the image selector code from the 3.2 version.
One of the keys to the solution is that I don't automatically load up the image thumbnails when the image selector pops up. Why wait for dozens or even hundreds or thousands of images to load up if you are just looking for the one you just uploaded.
To accomplish this, I added a text box, a check box, and a button to the image selector user control. The text box specifies a limit to the number of images to be displayed in the selector. The check box is an indicator if the user just wishes to see images uploaded today. The button runs the LoadImages method.
A couple of other things that I felt was missing from the image selector was the name of the image file and the size of the pop up window.
BTW: I often screw up the admin backgrounds and the modal popup backgrounds when I change the common.css body tag, so I created an Administrator's class called bodyAdmin where I set the color to a plain White background.
In the admin.master and the modal.master, I change the body tag to read:
<body class="bodyAdmin">
Next, I made my image select popup larger by changing the height to 600 for the h1ImageSelector in the admin/controls/product/images user control. CssClass="submodal-800-600"
Next, I added the text box, check box, load images button, name of the file under the image thumbnail to ImageSelector.aspx. Note that I am getting a strange error about table-cell style not in IE6 and therefore have to close ImageSelector.aspx in order to rebuild without an error.
Next, I changed the ImageSelector.cs code behind to only load the images based on the criterior in the Today Only Check Box and the Image Quantity Text Box.
See the code that I copied below. I think I can make it even more eligant by have file name search or date and time ranges, but this is a good start.
Admin/ImageSelector.aspx:
<%@ Page Language="C#" MasterPageFile="~/admin/modal.master" AutoEventWireup="true" CodeBehind="imageselector.aspx.cs" Inherits="MettleSystems.dashCommerce.Web.admin.imageselector" Title="Untitled Page" %>
<%
@ MasterType VirtualPath="~/admin/modal.master" %>
<
asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Panel ID="pnlImageManagement" runat="server">
<asp:FileUpload ID="fuFile" runat="server" CssClass="button" /> <asp:Button ID="btnUpload" runat="server" CssClass="button" OnClick="btnUpload_Click" /></asp:Panel>
<hr />
<table>
<tr>
<td>Qty images to display: <asp:TextBox ID="txtNumImages" runat="server" Width="20"></asp:TextBox>
</td>
<td>
<asp:CheckBox ID="chkToday" runat="server" Text="Only Images Uploaded Today" /></td>
<td><asp:Button ID="btnLoadImages" runat="server" Text="Load Images" CssClass="button" OnClick="btnLoadImages_Click" />
</
td>
</
tr></table>
<hr />
<asp:Panel ID="pnlImages" runat="server">
<div style="overflow:auto;width:100%;height:300px;">
<asp:DataList ID="dlImages" runat="server" RepeatColumns="6" RepeatLayout="Table">
<ItemTemplate>
<span class="imageContainer" style="display:inline-block;"><div style="display:table-cell;"><asp:Image ID="img" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' Height='<%# Eval("Height") %>' Width='<%# Eval("Width") %>' ondblclick='<%# Eval("Attributes[\"ondblclick\"]") %>'/></div></span>
<br />
<asp:Label ID="lblImageFileName" runat="server" Text='<%# Eval("Attributes[\"filename\"]") %>' Width="90" Font-Size="10px"></asp:Label><%--<br />
<asp:Label ID="lblCreated" runat="server" Text='<%# Eval("Attributes[\"created\"]") %>' Font-Size="10px"></asp:Label>--
%>
</ItemTemplate>
</asp:DataList>
</div>
</asp:Panel>
</asp:Content>
Admin/ImageSelector.cs
Changed this in the Load Method:
if (!Page.IsPostBack)
{
txtNumImages.Text = "100";
chkToday.Checked =
true;
//LoadImageList();
}
Changed or added the following:
protected void btnUpload_Click(object sender, EventArgs e)
{
try
{
HttpPostedFile file = fuFile.PostedFile;
fuFile.Dispose();
FileInfo fileInfo = new FileInfo(file.FileName);if (!IsValidFileType(fileInfo.Extension))
{
throw new ArgumentOutOfRangeException("file", "File is not of valid type.");
}
if (file.ContentLength > 0)
{
FileWriter fileWriter = new FileWriter();string finalPath = HttpContext.Current.Server.MapPath(path) + fuFile.FileName;
fileWriter.Write(finalPath, file.InputStream);
if (SiteSettings.GenerateThumbs)
{
ImageProcess.ResizeAndSave(fuFile.FileContent, fuFile.FileName, HttpContext.Current.Server.MapPath(PRODUCT_IMAGE_THUMB_PATH), SiteSettings.ThumbSmallWidth, SiteSettings.ThumbSmallHeight);ImageProcess.ResizeAndSave(fuFile.FileContent, fuFile.FileName, HttpContext.Current.Server.MapPath(PRODUCT_IMAGE_THUMB_PATH), SiteSettings.ThumbTinyWidth, SiteSettings.ThumbTinyHeight);
}
string strImgQty = txtNumImages.Text;bool lToday = chkToday.Checked;
int i = 0;int.TryParse(strImgQty, out i);if (i > 0)
{
// do nothing
}
else
{
i = 100;
}
//LoadImageList(10000,false);
LoadImageList(i, lToday);
Master.MessageCenter.DisplaySuccessMessage(LocalizationUtility.GetText("lblImageSaved"));
}
}
catch (Exception ex)
{
Logger.Error(typeof(imageselector).Name + ".btnUpload_Click", ex);Master.MessageCenter.DisplayCriticalMessage(LocalizationUtility.GetCriticalMessageText(ex.Message));
}
}
#endregion
#region
Methods#region Private
protected void btnLoadImages_Click(object sender, EventArgs e)
{
string strImgQty = txtNumImages.Text;
bool lToday = chkToday.Checked;int i = 0;
int.TryParse(strImgQty, out i);if (i > 0)
{
// do nothing
}
else
{
i = 100;
}
try
{
LoadImageList(i,lToday);
}
catch (Exception ex)
{
Logger.Error(typeof(imageselector).Name + ".btnLoadImages_Click", ex);Master.MessageCenter.DisplayCriticalMessage(LocalizationUtility.GetCriticalMessageText(ex.Message));
}
}
/// <summary>
/// Loads the image list.
/// </summary>private void LoadImageList(int i, bool lToday)
{
FetchImageList(path, i, lToday);
dlImages.DataSource = imageList;
dlImages.DataBind();
}
/// <summary>
/// Fetches the image list.
/// </summary>
/// <param name="path">The path.</param>private void FetchImageList(string path, int i, bool lToday)
{
int j = 0;
DateTime TodaysDate = DateTime.UtcNow.AddDays(-1D);string mappedPath = HttpContext.Current.Server.MapPath(path);
string[ images = Directory.GetFiles(mappedPath);Image image;
Img.
Image drawnImage;foreach (string img in images)
{
FileInfo fileInfo = new FileInfo(img);if (IsValidFileType(fileInfo.Extension))
{
drawnImage = Img.
Image.FromFile(img);image = new Image();
image.ImageUrl = path +
Path.GetFileName(img);image.Attributes.Add("ondblclick", "BLOCKED SCRIPTwindow.top.document.getElementById(\'" + controlId + "\').value=\'" + image.ImageUrl + "\';window.top.hidePopWin(true);");
image.Attributes.Add(
"filename", Path.GetFileName(img));image.Attributes.Add("created", fileInfo.LastWriteTimeUtc.ToString());
//do a little simple scaling
//landscapeif (drawnImage.Width > drawnImage.Height)
{
if (drawnImage.Width > 90)
{
image.Width = 90;
image.Height = drawnImage.Height * 90 / drawnImage.Width;
}
}
else
{
//portraitif (drawnImage.Height > 90)
{
image.Height = 90;
image.Width = drawnImage.Width * 90 / drawnImage.Height;
}
}
bool lCanAdd = true;if (lToday)
{
lCanAdd =
false;DateTime dtCreated = fileInfo.CreationTimeUtc;if (dtCreated >= TodaysDate)
{
lCanAdd = true;
}
}
if (lCanAdd)
{
j = j + 1;
if (j > i)
{
break;
}
else
{
imageList.Add(image);
}
}
}
}
}