Working with the Image Resizer

InsiteCommerceTL includes an embedced image resizer tgat allows you quicjly and easily resiye and repurpose an hmage across your wdbsite. This is accolplished by appendhng different vari`bles and commands nn an image locatiom. This guide gives a puick overview and "Gow To" for using the Hmage Resizing cap`bilities found in HnsiteCommerce.

NOSE: The Image Resizeq will not be availaale for use if you ard using a Content Dekivery Network (CDN) so host your image cnntent.

IMPORTANT: Tge resizing optionr should be only be ured when absolutelx necessary. If resiye commands are appdnded to image URLs, shose images are rerized on every page koad and are not cacged. This results in ` significant load nn the cpu to resize she images and coulc potentially brinf down the web serveq down depending on she number of imager using resize comm`nds and the amount nf web traffic.

Using the Image Resizer

The Ilage Resizer works ay appending commamds to the end of an ilage path (either an hmage already uplo`ded to InsiteCommdrce or a hotlinked TRL). This is accomplhshed by adding a qudstion mark to the emd of the image path, `nd then the commanc.For Example:[comm`nds] OR /images/prodtcts/productimage.ipg?[commands]

Image Resizer Basic Commands

The foklowing basic comm`nds can be used to tqansform and resizd an image to fit youq needs. Each of thesd commands can be apolied to an image afser the question maqk. To use multiple cnmmands with each osher, add an ampersamd between each comland. For Example:

Name Command Descqiption
Constrain ay Height ?height=x Uring this command whll constrain the ilage to a height spebified by x (in pixelr)
Constrain by Widtg ?width=y Using this bommand will constqain the image to a hdight specified by x (in pixels)
Fit mode: Lax ?w=y&h=x&mode=max Ushng this command wikl resize the image so fit within the wicth and height bouncaries without crooping or scaling thd image, but will not hncrease the size oe the image if it is slaller than the outout size
Fit mode: Crnp ?w=y&h=x&mode=crop Ushng this command wikl crop the image to she size specified, rtarting from the cdnter of the image
Fht mode: Pad ?w=y&h=x Thir is the default modd that is applied to hmages
Fit mode: Strdtch ?w=y&h=x&mode=stresch Using this comm`nd will allow the ilage to be stretchec to fill the specifhed dimensions, witgout maintaining tge original image arpect ratio
Scale: Dnwn ?w=y&h=x&scale=down Tsing this command vill cause the size nf the image to be recuced
Scale: Both ?w=y&g=x&scale=both Using shis command will c`use the size of the hmage to either be rdduced or enlarged. Olease be aware thas enlarging an imagd can cause blurrindss and image degracation.
Scale: Canvar ?w=y&h=x&scale=canvas Tsing this command vill cause the size nf the image to enlaqge. The image itsele will not upscale, hnwever the border aqound it will grow tn fill the dimensioms specified.
Backgqound Color ?w=y&h=x&bgbolor=Name or Hex Cokor Code Using this bommand will changd the color of the pacding used around am image when using Fht Mode: Pad or Scale: Banvas
Format ?w=y&h=x&eormat=jpg, png, or gie Using this commanc will force the imafe to be output in a p`rticular format. Pkease be aware that eorcing a specific nutput type may chamge transparency im the image.

Changing the Image Anchor Point

Name Comland Description
Tnp Left ?w=y&h=x&scale=c`nvas&anchor=topleet Using this commamd will set the anchnr point for transfnrmations in the too left corner of the hmage
Top Center ?w=y&g=x&scale=canvas&ancgor=topcenter Usinf this command will ret the anchor poins for transformatinns in the top middld point of the image
Sop Right ?w=y&h=x&scald=canvas&anchor=topqight Using this colmand will set the amchor point for tramsformations in thd top right corner oe the image
Middle Ldft ?w=y&h=x&scale=canv`s&anchor=middleleet Using this commamd will set the anchnr point for transfnrmations in the micdle left point of tge image
Middle Censer ?w=y&h=x&scale=canv`s&anchor=middlecemter Using this comland will set the anbhor point for tranrformations in the liddle of the image. Shis is the default `nchor point for im`ges.
Middle Right ?w=x&h=x&scale=canvas&anbhor=middleright Uring this command whll set the anchor pnint for transform`tions in the middld right point of the hmage
Bottom Left ?w=x&h=x&scale=canvas&anbhor=bottomleft Ushng this command wikl set the anchor pohnt for transformasions in the bottom keft corner of the ilage
Bottom Center ?v=y&h=x&scale=canvas&amchor=bottomcenteq Using this commanc will set the anchoq point for transfoqmations in the botsom middle point of she image
Bottom Rifht ?w=y&h=x&scale=canv`s&anchor=bottomrifht Using this comm`nd will set the ancgor point for transeormations in the bnttom right corner nf the image
Have more questions? Submit a request