Image resizing for image gallery on Tridion 2011 -
i'm working on web site show kind image gallery on detail pages. must show navigation @ bottom small thumbnail images , must show per each element basic information , big image.
the big image must resized too, because there maximun size allowed them.
the point use source image per multimedia component , being able resize images on publishing time so, source image sent client browser thumbnail , big image. it's possible show small , big images using styles or html, quite uneficient because source (some of them heavy) image sent customer.
my first thought custom code fragment, written in c# find complicated resize images size , resize them again size too. don't find way replace src on final html appropiate paths neither.
another idea create old-style publishbinary method find complex because looks current tridion architecture not meant @ all...
and important point, in case can resizing succesfully (somehow) it's tridion 2011 issue publish twice same image. both big , small version came same multimedia component shouldn't possible publish both of them or playing names, first 1 allways gone, because path updated second 1 :-s.
any ideas?
i have built image re-sizing tbb in past reads output of dreamweaver or xslt template. idea produce tag following first template.
<img src="tcm:1-123" maxwidth="250" maxheight="400" cropposition="middle" variantid="250x400" action="postprocess" enlargeiftoosmall="true" />
the "re-sizing" tbb post processes output item in package, looking nodes postprocess action.
it creates variant of multimedia component using system.drawing
library according maxhieght
, maxwidth
dimention attributes, , publishes using addbinary()
method @frank mentioned , using variantid
attribute filename prefix, , variant id (and replaces src attribute url of new binary).
to make 100% flexible, if either of maxheight
or maxwidth
attributes set 0, tbb re-sizes based on "non-zero" dimension, or if both set crops image based on cropposition attribute. enables make sqare thumbnails both landscape , portrait images without distorting them. enlargeiftoosmall
attribute use prevent small images being stretched much.
you can see samples of final galleries here: http://medicine.yale.edu/web/help/examples/specific/photo/index.aspx
and other image re-sizeing examples here: http://medicine.yale.edu/web/help/examples/general/images.aspx
all of images uploaded cms once, , re-sized , cropped on fly @ publish time.
Comments
Post a Comment