routing image paths through mvc - asp.net-mvc

Question

I am currently creating an MVC4 web application. This application shows products including images. I have got a company to review the SEO aspects of the site, and they have come back with a recommendation regarding product images.
Currently my image path is: folder/images/productimage/PROD_98713204_LARGE.gif
They have recommended the following: /folder/images/productimage/98713204-160x260-0-0_My+Product+Name.gif
The problem I have is that I have a large number of images on the site so it is difficult to go rename all to include product names etc. So I have thought about using the routing features within MVC, outputting the recommended in the html markup but picking the current image path shown above from the filesystem.
2 questions I have are:
Is there performance implications of using such routing to manage image paths? My site will have large traffic loads and a number of images so it is a concern.
Could someone give me an example of a route I would need to configure to achieve the above?

Answer 1

In order to do the routing option, you'll have to come up with some specification for how the urls map to the actual images. How many images are we talking about? 1000? 10,000? A million? If you have less than 100,000 then I'd probably go ahead and use the specification you already wrote to just go ahead and rename all the files and then use the specification to name files on the way in to the file system from now on.
The advantages of this system are that it limits the scope of the changes to the data, and you only have to affect one point of the system (when the files are on the way in). When it comes to performance, the overhead of mapping a string to another string is probably negligible, even for a large number of requests. String manipulation for short strings is very fast, but in any case you should profile the entire request if requests start taking too long and focus on the major pain points. Of course if you just rename the files, you can be sure you won't have to worry about any of this profiling.
As for creating a route to do the mapping of urls, you first have to get ASP.NET to hand the request to your code. By default ASP.NET first checks if the file exists at the location specified by the url, and if it does, it just processes the file based on the registered handler in IIS. My suggestion is to leave these settings as they are because they make very large changes to the system when you change them. For images, the handler just attempts to send the file to the client.
If the file does not exist on the disk, it then looks for a handler for the request by iterating through the route collection, which is the thing you register your routes into typically in Global.asax. Since you didn't tell us what you tried, I'm going to assume that you know how routes work. You can get pretty crafty with routes, but I'll stick to something simple:
routes.MapRoute(
name: "images",
url: "{folder}/images/productimage/{unmappedFileName}",
defaults: new { controller = "Home", action = "Images" }
);
This route will match the example url you gave. In the case that they use the actual file name however, this route will never be hit, as I have explained above. Since the SEOed file name does NOT exist however, this route will be hit and it will try to run the Images action on the Home controller (I list my entire Home controller here to remove any confusion about where these parts go):
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Images(string unmappedFileName)
{
if (String.IsNullOrWhiteSpace(unmappedFileName))
{
return HttpNotFound();
}
var fileName = MapFileName(unmappedFileName);
var diskLocation = GetDiskLocation(fileName);
return File(diskLocation, "image/png");
}
private string MapFileName(string unmappedFileName)
{
return unmappedFileName + ".png";
}
private string GetDiskLocation(string fileName)
{
var fullPath = String.Format("~/Content/themes/base/images/{0}", fileName);
var diskLocation = Server.MapPath(fullPath);
return diskLocation;
}
}
Obviously you'll need to update the file name mapping to whatever spec you decided upon. I am using what's here because there are a bunch of example files in that folder when you create a new MVC4 project.
A simple way to show that it works is to implement your Index view in the Home folder like this:
{
ViewBag.Title = "Index";
var imagesDirectory = Server.MapPath("~/Content/themes/base/images/");
var imageFileNames = Directory.GetFiles(imagesDirectory).Select(m => m.Replace(imagesDirectory, "").Replace(".png", ""));
}
<h2>Index</h2>
#foreach (var imageFileName in imageFileNames)
{
<div>#Html.ActionLink(imageFileName, "Images", new { unmappedFileName = imageFileName })</div>
}
In the future when you run into a problem like this, you should just try to figure it out first. When you ask your question, be sure to tell us what you have tried so we can get you over the next hump and point you in the right direction instead of just asking us for the code to solve your problem. In the case where you don't know where to get started, try searching for or asking a more abstract question. Who knows, they might even answer your other questions at the same time. :)
And lastly, this solution is really complicated. I don't even know how your mapping function is going to work, but I know this is complicated. It also adds a layer of complexity when debugging because now the urls you have don't directly relate to the file name on disk, and that time will add up later on. Of course there are reasons why I might favor this mapping, most notably if you intend to change the url structure in the future for further SEO changes, but then you're breaking urls on the internet and damn you for that. So really, I suggest just changing all of your file names if that is feasible.