Solved

Need good image preloader solution

Posted on 2014-04-23
2
405 Views
Last Modified: 2014-04-24
We use the Sitecore content management system with C# ASP.NET controls.

I am working on a directory project and have uploaded the employee photos into the Sitecore Media Library into a folder called images/Faculty.  There are about 250 faculty photos loaded and 727 faculty total, so this means that about 400+ faculty have not had their photo taken yet, so an “image not found” photo shows in place of their headshot.

The way I have programmed this is, in the code-behind the image name is automatically created based on the faculty member’s name as such:

Name:  Dave Smith
Black & White photo name:  SmithDave1.jpg
Color photo name:  SmithDave2.jpg

Now, if the application loads and a faculty photo exists in Sitecore, then all is well with the world and it loads.  If no faculty photo exists, the default “image not found” photo appears.  Well, the following code *is* working, but it is SUPER slow.   Here is my code:

string imageLink = relative + "/Faculty/" + fileName + "1.ashx";
string imageHover = relative + "/Faculty/" + fileName + "2.ashx";
string imageDefault = relative + "/Faculty/ImageNotAvailable1.ashx";
                
ImageButton myImage = ((ImageButton)e.Item.FindControl("ibHeadshot"));
myImage.ImageUrl = imageLink;
myImage.Attributes.Add("onmouseover", "this.src='" + imageHover + "'");
myImage.Attributes.Add("onmouseout", "this.src='" + imageLink + "'");
myImage.Attributes.Add("onerror", "this.src='" + imageDefault + "'");

Open in new window


I was wondering if there is a better way to program a sub-function to see if a URL exists before actually returning an error.  Here is what I *want* to do, but it is not working

Boolean validURL = true;
string imageLink = relative + "/Faculty/" + fileName + "1.ashx";
string imageHover = relative + "/Faculty/" + fileName + "2.ashx";
string imageDefault = relative + "/Faculty/ImageNotAvailable1.ashx";
                
//check to see if a headshot exists - if it does not, use the default image
validURL = UrlExists(imageLink);

ImageButton myImage = ((ImageButton)e.Item.FindControl("ibHeadshot"));
if (validURL)
{
         myImage.ImageUrl = imageLink;
         myImage.Attributes.Add("onmouseover", "this.src='" + imageHover + "'");
         myImage.Attributes.Add("onmouseout", "this.src='" + imageLink + "'");
 } 
else 
{
          myImage.ImageUrl = imageDefault;
}
           

private static bool UrlExists(string path)
        {
            Sitecore.Pipelines.HttpRequest.ItemResolver
            Sitecore.Data.Database db = Sitecore.Context.Database;
            Sitecore.Data.Items.Item item = db.GetItem(path);
            if ((item != null))
            {
                return true;
            }
            else
            {
                return false;
            }
        }

Open in new window


Can you help?? Do you have any brilliant ideas?
0
Comment
Question by:vcbertini
2 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 40019553
If you are already on the server you can of course do a file inspection right there.

A JavaScript alternative (since I am not an ASP person) is this

<img src="SmithDave1.jpg" style="display:none"
onload="this.style.display='';"
onerror="this.src='egghead.jpg'" />

Or unobtrusively using jQuery:

$(function() {
  $(".headshot").each(function() {
    this.onerror=function() { this.src='egghead.jpg' }
    this.src=$(this).data("imagesrc");
  });
});

Open in new window


having

<img src="egghead.jpg" class=".headshot" data-imagesrc="SmithDave1.jpg" />
0
 

Author Closing Comment

by:vcbertini
ID: 40020721
Thanks! I think that would work well, but I had to stay in the confines of our content management system. So what I did was a quick check to see if the file even existed in the content tree, and came up with this:

                string url = "";
                Regex pattern = new Regex(@"[-\.'\s]");
                string ln = pattern.Replace(lname, string.Empty);
                string fn = pattern.Replace(fname, string.Empty);
                string bwPath = "/sitecore/Media Library/Images/Faculty/" + ln + fn + "1";
                string cPath = "/sitecore/Media Library/Images/Faculty/" + ln + fn + "2";
                string bwFileName = "ImageNotAvailable1.ashx";
                string cFileName = "ImageNotAvailable2.ashx";

                Sitecore.Data.Database db = Sitecore.Context.Database;
                Sitecore.Data.Items.Item bwitem = db.GetItem(bwPath);
                Sitecore.Data.Items.Item citem = db.GetItem(cPath);
                // Check to see if the black & white photo exists in Sitecore
                if (bwitem != null)
                {
                    bwFileName = ln + fn + "1.ashx";
                }
                // Check to see if the color photo exists in Sitecore
                if (citem != null)
                {
                    cFileName = ln + fn + "2.ashx";
                }
                string imageLink = relative + "/Faculty/" + bwFileName;
                string imageHover = relative + "/Faculty/" + cFileName;
                ImageButton myImage = ((ImageButton)e.Item.FindControl("ibHeadshot"));
                myImage.ImageUrl = imageLink;
                myImage.Attributes.Add("onmouseover", "this.src='" + imageHover + "'");
                myImage.Attributes.Add("onmouseout", "this.src='" + imageLink + "'");
                myImage.PostBackUrl = url;
                myImage.CommandName = "SendID";
                myImage.CommandArgument = ID;

Open in new window

0

Featured Post

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
Microsoft Active Directory, the widely used IT infrastructure, is known for its high risk of credential theft. The best way to test your Active Directory’s vulnerabilities to pass-the-ticket, pass-the-hash, privilege escalation, and malware attacks …
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question