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

Comments

Victor, 04-08-06 21:32:

---

I don't know if I'm doing sothething wrong but i cant do this code work, I even tried to insert the code in the setup file of the styled content extention, if someone knows how to do it please send a light over my shadows

Miroslav, 29-09-06 16:29:

---

m.mask and m.bgImg are of type imgResource

so instead of
###
m.mask.import.cObject = IMG_RESOURCE
m.mask.import.cObject.file = GIFBUILDER
###

you could use

###
m.mask = GIFBUILDER
##

Thomas, 14-10-06 01:35:

---

It would be nice to present either code that works ;-)

Tobias, 16-10-06 08:47:

---

For me this snippet works out of the box, also the sample is just a copy-paste and it works how you can see ;)
i think you should check your image magic / graphicsmagic installation!

Bas, 20-03-07 21:21:

---

The script is working excellent, but i want to add a function. How can i parse the alt or title text into the image, which is included with the image? I added this allready:

70 = BOX
70.dimensions = 0,60,190,20
70.color = green
80 = TEXT
80.text = hello!
80.offset = 15,75
80.niceText = 1
80.fontSize= 12
80.fontFile = t3lib/fonts/verdana.ttf
80.fontColor = black
80.shadow.offset = 2,2
80.shadow.blur = 60
80.shadow.opacity = 40

Any help would be great!
cheers

Miroslav, 21-03-07 09:50:

---

Hi again,

here is working code that Thomas asked for :)
It is more simple and faster!

tt_content.image.20.1.file >
tt_content.image.20.1.file {
import.current = 1
width.field = imagewidth
m.mask = GIFBUILDER
m.mask {
# 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 = GIFBUILDER
m.bgImg {
# 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}
}
}

It is a pity that line breaks won't be preserved ... :(

Miroslav, 21-03-07 10:56:

---

I've found a way to preserve formatting :)

http://lists.netfielders.de/pipermail/typo3-english/2007-March/037334.html

Helmuth, 21-03-07 11:34:

---

I have fixed the newline problem

mousse, 11-12-08 16:08:

---

Is it possible to make transparent rounded corner that way ?

Add comment

* - required field

First name: *
Last name:
E-mail:
Enter the code:

*

Content: *