SQL Server

Is the most overly complicated, hard to use, hard to setup program ever.

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

ImageButtons that are DefaultButtons cause an error on Firefox 3

Ok, so suddenly with Firefox 3 I've been getting errors on some pages. They have an ajax panel (from Telerik, but I've found out this happens with other ajax libraries) that wraps a asp:Panel (with default button set to) an asp:ImageButton.

This works fine on all browsers. Except Firefox 3. It'll return an "Input String was not in a correct format." It seems on loaded of some posted data it is expecting an Int and it is a String.

I was stumped on this. Taking out the ImageButton (and just having it be a regular button) fixed the problem. Not making the ImageButton the default button for the panel fixed the problem. Taking out the ajax wrapper panel fixed the problem.

After banging my head on this for quite a while my coworker Del found the solution. It turns out that there is a weird double post-back happening, leading to much confusion. By adding:

OnClientClick="this.disabled=true;__doPostBack(this.name,'');"

To the imagebutton and everything works. The page that he found that talks about this is http://forums.asp.net/p/1121832/1757434.aspx which also gives some other solutions to the problem. Here is another link http://www.andornot.com/about/developerblog/2007/09/fix-firefox-defaultbutton-issue-with.aspx

Unfortunately, we'll probably have to go back to all of our old websites to find and fix this behavior (I've been able to reproduce it in many sites we've done that have been up (and bug free) for a while. I don't think it is necessarily a firefox 3 issue, but has more to do with timing.

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)

Tracking on click/mousover

I was asked to add tracking of downloads to the CMS I've written. The problem is that people can insert links to documents anywhere in the content. Also a landing page wasn't going to be acceptable, so the tracking would have to not interfere with the link still downloading the file. This tracking would also have to put in the user if signed in.

By doing a text replace on the content for an "A" link that referenced the document directory I could programmatically insert an onclick event for the A that I had replace the background image of the link with the output of a page that I created that could do the tracking. I later realized that I could just have javascript load the page and so didn't have to mess with the background image or have the page output anything. Since this could also be done on mouseover/mouseout I could track even how long they hovered over a link even if they didn't click it.

This actually works amazingly well. By passing "this.href" through I could also easily know which document they had clicked on. I was a little worried about the href and onclick interfering with each other, but it seems to work fine on all browsers.

The on the fly replace trick is one I use for a very simple (and not very secure) files that require registration option. I have the CMS allow for uploading files to a registration required directory and then search and replace on a links referencing files in those. Again not secure at all, but most of the time the only reason these files are set up this way is to harvest leads. This allows for files to be uploaded anywhere, and is easy to implement.

I used XMLHttpRequest to make the request for the page in javascript.

PNGs have driven me crazy

In the past. Sometimes it seems like matching colors never quite works out right. I'll always have to tweak colors to get things to look right, or jpgs and gifs placed right next to pngs don't match. The same png would look different in two different browsers. I found the answer to this problem. Photoshop saves extra meta information with 24-bit pngs (like gamma correction) which is applied differently by browsers. Here is an article all about it

http://freaksgfx.blogspot.com/2007/10/png-color-mismatch-on-web-easy-fix.html

and some useful info about the problem http://morris-photographics.com/photoshop/articles/png-gamma.html#remove