Default Product Image Format to PNG instead of JPG

[drollins]

I am using the feature that will auto assign images names sku_i.jpg, sku_t.jpg and sku.jpg to product.

This is very handy!

I would like to use PNG instead though.

Is there an easy way todo this?

[Shopping Cart Admin]

Hello,

I've logged this as a feature enhancement for a later release. JPG are pretty much the default format so we didn't think to add other formats.

This wouldn't be easy to customize as all of the URL's are created in the API.

[drollins]

Well.. I dont give up too easy

I've created an xpg.ashx file that I use to dynamically size and stream my standard PNG image per product ... in other words ... I only have 1 image per product and I dynamically size them so for example... I can have the product image sized differently on the home page, in the detail as an icon and then as a thumb.

Note that this is note the same as say in the <A> link to resize the image... these images when they are returned are really the size I ask for them.

Anyways...

Heres the code for my xpng.ashx - I think this would be the way to do it - make your customers only have to maintain 1 image per product and how those images get consumed by the application would be driven from ... presumeably... the image settings page. So like I would say.... I want my icons to be N, my thumbs to be N and my detail images to be N etc etc etc

Note... PNGs are special and need to be byte streamed - you can simply resize and ship jpgs and gifs without all that nonsense.

Anyways - copy the below code and paste this into a file called xpng.ashx and save it to the the root of your store.

You call it like you would any image...

<img src="xpng.ashx?ImgFilePath=rec676.png&imagesize=thumb" />

Code: Select all

<%@ WebHandler Language="VB" Class="ThumbnailHandler" %> 

Imports System 
Imports System.IO 
Imports System.Web 
Imports System.Drawing 
Imports System.Drawing.Imaging 

Public Class ThumbnailHandler
	
    Implements IHttpHandler
    
    Private Const ICON_IMAGE As Integer = 70
    Private Const THUMB_IMAGE As Integer = 120
    Private Const FEATURED_IMAGE As Integer = 160
    Private Const LARGE_IMAGE As Integer = 320
	
	Public ReadOnly Property IsReusable() As Boolean Implements System.Web.IHttpHandler.IsReusable
        Get
			return true
        End Get
    End Property

    Public Sub ProcessRequest(ByVal context As System.Web.HttpContext) Implements System.Web.IHttpHandler.ProcessRequest

		Dim _width As Integer = 0 
		Dim _height As Integer = 0 
		Dim _path As String = String.Empty 
        Dim sNoThumbPath As String = "noimageavail.gif"
        Dim isize As String = "featured"
        Dim thumbBitMap As Bitmap

        'context.Response.Write("hi there<p>")
        'Exit Sub
        
        'resolve size
        If Not context.Request("imagesize") Is Nothing Then
            isize = context.Request("imagesize")
        End If

        'default image size type
        If isize.TrimEnd = "" Then
            isize = "featured"
        End If
        
        'get path to image
        If Not (context.Request("ImgFilePath") Is Nothing) Then
            _path = context.Request.MapPath(context.Request("ImgFilePath"))
        Else
            _path = context.Request.MapPath("/images/NoImageAvail.png")
        End If
		
        thumbBitMap = New Bitmap(_path)
		
        If thumbBitMap Is Nothing Then
            'OK - we didnt get anything resolved so try to make this nice with a not avail image
            _path = context.Request.MapPath(sNoThumbPath)
            thumbBitMap = New Bitmap(_path)
        End If
		
        If thumbBitmap Is Nothing Then Exit Sub
		
        If thumbBitmap.Width >= thumbBitmap.Height Then
            'standardize on width
            Select Case isize
                Case "icon"
                    _width = ICON_IMAGE
                Case "thumb"
                    _width = THUMB_IMAGE
                Case "featured"
                    _width = FEATURED_IMAGE
                Case "large"
                    _width = LARGE_IMAGE
            End Select
		
            'set corresponding height
            _height = thumbBitmap.Height / (thumbBitmap.Width / _width)
        Else
            'standardize on height
            Select Case isize
                Case "icon"
                    _height = ICON_IMAGE
                Case "thumb"
                    _height = THUMB_IMAGE
                Case "featured"
                    _height = FEATURED_IMAGE
                Case "large"
                    _height = LARGE_IMAGE
            End Select
			
            'set corresponding width
            _width = thumbBitmap.Width / (thumbBitmap.Height / _height)
        End If

        ' draw the thumb
        thumbBitMap = CType(thumbBitMap.GetThumbnailImage(_width, _height, Nothing, IntPtr.Zero), Bitmap)
        context.Response.ContentType = "image/Png"
        Dim b As Byte() = GetImageBytes(thumbBitMap)
        context.Response.OutputStream.Write(b, 0, b.Length)
		
    End Sub
    
    'pngs are funny - so we need to convert the image to a byte array to make it play nice
    Private Function GetImageBytes(ByVal img As Image) As Byte()
        Dim codec As ImageCodecInfo = Nothing
        Dim e As ImageCodecInfo = Nothing
        Dim ep As EncoderParameters = Nothing
        Dim ms As MemoryStream = Nothing
        
        For Each e In ImageCodecInfo.GetImageEncoders
            If e.MimeType = "image/png" Then
                codec = e
                Exit For
            End If
        Next
        
        ep = New EncoderParameters()
        ep.Param(0) = New EncoderParameter(Encoder.Quality, 100L)
        
        ms = New MemoryStream
        img.Save(ms, codec, ep)
        Return ms.ToArray()
    End Function

End Class

[drollins]

A WORD OF WARNING HERE...

The above solution works really really well... but not on AOL

I converted all my images to jpg format and forced a background on them to match the site. This drastically reduced image size but....

I actually installed the AOL 9.1 browser (something I swore I would never to on pain of death) because my client uses AOL and I needed to test this issue.

Anyways...

AOL does not like ashx calls - it is really weird... if you use the AOL browser NOT LOGGED IN the site screams. If you use the AOL browser logged in they do some kinds of server processing that slows the site down to a standstill.

[drollins]

OK - after all that bulls^%t I said above it all boiled down to a corrupt AOL adapter.

ASHX httpHandlers work great on AOL (ie. AOL doesnt care)

I was dazed and confused...