Automatically adding alt tags for images

So since being W3C compliant is supposed to help with search optimization I've always wanted to be able to automatically add alt tags to images that don't have them. Since alot of the content on our websites is entered via a cms, we don't always have complete control over this.

I've seen regular expressions that are supposed to detect img tags without alt tags in them, but couldn't get this to work the way I wanted it to.

I think I've found a good solution to this. I'm just using regular expressions to find all image tags, then going through a list of them, finding ones without alt tags, and then trying to process the src tag to come up with a guess as to what a good choice for the alt tag would be.

Here it is, remember you've got to have (using System.Text.RegularExpressions;) at the top of the cs file

fixalt.txt

Dynamic recrop of images

So this e-commerce site I'm doing has thousands of images. Some unfortunately were non-square and then placed centered on a white background, even if the predominant colors were darker. Going through all of these would be a nightmare production task.

I wondered if I could programmatically detect these rectangular white regions, and replace them with a better chosen color. The problem is that some of the images are really on a white background, centered and shouldn't be touched.

I've written some code that comes in diagonally until it detects a pixel that isn't white is the next pixel. I then check a vertical and horizontal line from that point. If one direction is all white, I assume that it is a rectangular region. Same from the bottom right corner coming up.

If one of these checks fail in both directions I bail. If I detect different orientations on the top and the bottom I bail. But if I detect horizontal or vertical stripes of white I then step in one pixel from all four "corners" and then average the color values. I then use this color to fill the white regions.

I know that certain shapes (peanut like) can screw up this calculation. Still the color chosen for the fill in that circumstance will be decent (and only fill white regions). Also some of the images have dithered edges, possibly throwing off the calculation. Still this seems to work pretty well.

Click here to see what I'm talking about. The first three images are a diagram of how the code looks at various images. The next items are the full size image, image resized (with border) without this dynamic cropping applied, and image resized with dynamic cropping applied.

Adjusting images for image size/file size

I'm working on an ecommerce site and want to work from a single source image for the items.

Using some of the ideas I've talked about before I can resize the images on the fly, but I wanted to also set a maximum file size for the images (after all, if I'm making a 25x25 thumbnail, it shouldn't be over 5k)

I'm saving a memory stream as a jpg, and torquing down the Encoder.Quality setting until the stream is less than the number of bytes I'm trying to fit in.

This is working really well, check out this to see (I'm also adding rounded corners to the images)

Why viewstate nearly killed me

I've been working for the last two months on a huge e-commerce site with a configurator of high-end gaming PCs. (http://www.hp.com/blackbird)

Because of complex rules of component interactions I was loading the entire component set (even though it is displayed on seperate pages) and relying on viewstate to keep track of what was selected. Because each selection could enable/disable any other as well as change messaging and force selection the logic to drive this was very complex. The initial decision of a base model also determined the base feature set to work with. All of the controls on the page would be dynamically created in the init function.

We started having sporadic invalid viewstate exceptions, with no consitent reproduction steps. I tried compressing the viewstate (which was large, at 16k), making sure I wasn't loosing the session (and therefore the model selection) and then moving the entire viewstate into session. Nothing seemed to work.

The problem seemingly came and went, several times we thought we had eliminated it but it would reappear.

The problem came down to how I was trying to optimize the data queries, and storing information in appdomain. I had inadvertently stored some information that was model dependant in the application domain and if multiple people were choosing different models at the same time the viewstate would be different than the created list of controls. Sometimes.

Anyway after a week and a half of monkeying with the viewstate it turned out that the exception message was right and the list of controls was mismatched.

I'll put up another post with some of the other solutions I tried as well.

Simple font renderer

Alright, I've gotten some requests for the actual code to render fonts and so I've made a zip with a simple project in it. This will work fine for simple things, but I recommend using the javascript trick I reference in another post to not hurt search rankings. text.zip

Fonts, fonts, fonts

I recently heard about Sifr, which allows for a flash movie (embedded with a font) to serve non web fonts on a page.

I realized their trick of using javascript to rewrite the page allowed for proper SEO and a good fallback.

I've written some javascript to do this. Basically this will allow the page to just contain proper html (in this case with some spans with their class set to "segoeui". Google will read the page just as text and if they don't have javascript enabled the text will display in whatever style segoeui is set to.

If javascript is enabled the code will look through all of the elements on the page, replace the ones with class set to "segoeui" with the correct image and parameters (and we can pass the width/height of the element here, so we could set the font size to whatever will "fit" within the space, allowing the size of this image font to be controlled by the css for "segoeui").

JScript.js

(The getElementsByClass was written by Dustin Diaz)

Want to see an example? Click here and then look at the source.

Text dropshadow in .NET

Here is an example of the image text functionality, with a dropshadow added (drawing the text once, blurring, and then a second time offset).

Just type in the text box. It is pretty responsive.