Snippet Menu ( Click here to hide )

 / Main / Snippets / GIFBUILDER / Dynamic Imagemasks using Gifbuilder

Dynamic Imagemasks using Gifbuilder

Submitting your vote...
Rating: 4.8 of 5. 4 vote(s).
Click the rating bar to rate this item.

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}
  }
}

 

See this snippet in action

This Snippet was submitted by Peter Klein


Top 10 Updates

Using lightbox without extension geändert am  13-Jun-2008 14:20:51
Custom field for GMENU alt text geändert am  13-Jun-2008 13:58:07
Extending typoscript properties with stdWrap geändert am  13-Jun-2008 13:54:32
Create menus using data from other tables than "pages" V2  geändert am  24-Mar-2008 13:02:09
Login geändert am  17-Mar-2008 12:47:52
Forum geändert am  17-Mar-2008 10:07:47
Who is Typo3wizard.com geändert am  26-Dec-2007 16:07:32
Menu as un-nested lists (iphone navigation) geändert am  29-Oct-2007 15:05:53
IF Conditions with AND and OR operators geändert am  16-Oct-2007 19:16:04
UserFunc to fix problems with HMENU type "special=updated"  geändert am  16-Oct-2007 18:58:40
Deutsch
Search: