


Usually when you use imagemasks, the size of the mask must match the org. image in order to preserve the aspect ratio, which makes it pretty useless on images with different sizes.
This snippet creates the image masks dynamically, so it matches the exact size of the original image.
In this sample a mask is used to apply roundet corners to every image/text with image content element.
The used images for the corners:
CONSTANTS:
# The path to the corner image masks imagePath = fileadmin/samples/imgmasks/ # The background color of the page bgColor = #FFFFFF
SETUP:
tt_content.image.20.1.file > tt_content.image.20.1.file { import.current = 1 width.field = imagewidth m.mask.import.cObject = IMG_RESOURCE m.mask.import.cObject.file = GIFBUILDER m.mask.import.cObject.file { # Here we create a dynamic mask with the exact same # dimensions as the actual image, but with rounded corners XY = [10.w],[10.h] format = gif # Since the "XY" parameter doesn't have stdWrap, we "find" # the size by simply loading the original image again. 10 = IMAGE 10.file { import.current = 1 width.field = imagewidth maxW = {$styles.content.imgtext.maxW} maxW.override.data = register:maxImageWidth maxWInText = {$styles.content.imgtext.maxWInText} maxWInText.override.data = register:maxImageWidthInText } # Create a white box that fills the entire area 20 = BOX 20.dimensions = 0,0,[10.w],[10.h] 20.color = #FFFFFF # Add Top-Left corner mask 30 = IMAGE 30.file = {$imagePath}cornermask_tl.gif 30.align = l,t # Add Top-Right corner mask 40 = IMAGE 40.file = {$imagePath}cornermask_tr.gif 40.align = r,t # Add Bottom-Left corner mask 50 = IMAGE 50.file = {$imagePath}cornermask_bl.gif 50.align = l,b # Add Bottom-Left corner mask 60 = IMAGE 60.file = {$imagePath}cornermask_br.gif 60.align = r,b } # The fastest method (recommended) is using a static image, like this: #m.bgImg = {$imagePath}clear.gif # But it can also be done dynamically, like this: m.bgImg.import.cObject = IMG_RESOURCE m.bgImg.import.cObject.file = GIFBUILDER m.bgImg.import.cObject.file { # Here we create a dynamic bgMask # Dimensions of this image is unimportant XY = [10.w],[10.h] format = gif 10 = BOX 10.dimensions = 0,0,10,10 10.color = {$bgColor} } }
This Snippet was submitted by Peter Klein


Comments (8)