In the tutorial we’re going to make an automatic gifbuilder image, for a tt_news article. We’re going to use the news image from the tt_news record and overlay it with the title.

Onces finish, it will look like this:

Step 0: We’ll start with creating a simple news record:

We’re also going to need a background image for the final gifbuilder image, so we add that too.

Save the news record once your done.

Our news list will contain nothing more than just the image, since the title and subheader will be printed in there*. This means the tt_news template will look like this:

<!-- ###TEMPLATE_LIST### begin -->
  <div class="news-latest-container">
    <!-- ###CONTENT### begin -->
      <!-- ###NEWS### begin -->
        <div class="news-latest-item">
          ###NEWS_IMAGE###
        </div>
      <!-- ###NEWS### end-->
    <!-- ###CONTENT###  end -->
  </div>
<!-- ###TEMPLATE_LIST### end -->

We now have a basic news list view with nothing more than the tt_news image:

So how to transform this image into a dynamic image with title and subtitle?

Step 1: Creating a TypoScript template

Create a TypoScript template at the same page your news-list is located. We tell TYPO3 to clear all current configuration regarding the news-list image:

plugin.tt_news {
  displayList {
    # Remove all configuration
    image >
  }
}

We just removed all earlier configuration, which means we can start from the beginning.

Step 2: Import the tt_news image

Import the image we want to use as a background, from the tt_news record by inserting the following TypoScript

plugin.tt_news {
  displayList {
    # Remove all configuration  
    image >

    # Create a new image
    image {
      stdWrap.cObject = IMAGE
      stdWrap.cObject.file = GIFBUILDER
      stdWrap.cObject.file {
        # Width and height of the image
        XY = 517,177

        # First object: Our background image
        10 = IMAGE
        10 {
          offset = 0,0
          file {
            # Import the image from the tt_news record
            import = uploads/pics/
            import.data = field:image
            import.listNum = 0
            import.override.field = image

            # Determine the width and height (crop)
            width = 517c
            height = 177c

            # Set the quality of the image
            ext = jpg
            quality = 100
          }
        }
      }
    } 
  }       
}

Save the TypoScript template, and have a look at the frontend. You now have:

Step 3: Add the transparent box in which the title should be displayed

We need to create another object within our TypoScript setup, to display the transparent box:

plugin.tt_news {
  displayList {
    # Remove all configuration
    image >

    # Create a new image
    image {
      stdWrap.cObject = IMAGE
      stdWrap.cObject.file = GIFBUILDER
      stdWrap.cObject.file {
        # Width and height of the image
        XY = 517,177

        10 = IMAGE
        [.........]

        20 = BOX
        20 {
          # Offset left, Offset bottom, Width, Height
          dimensions = 10,-10,280,70
          # Start at left bottom
          align = l,b
          # Color of the box
	  color = white
          # Opacity of the box
	  opacity = 75
        }
      }
    }
  }
}

Again, save the template. You now have:

Step 4: Insert the tt_news title

Create yet another object in your TypoScript setup, and get the title from the tt_news record:

plugin.tt_news {
  displayList {
    # Remove all configuration
    image >

    # Create a new image
    image {
      stdWrap.cObject = IMAGE
      stdWrap.cObject.file = GIFBUILDER
      stdWrap.cObject.file {
        # Width and height of the image
        XY = 517,177

        # First object: Our background image
        10 = IMAGE
        10 {
          offset = 0,0
          file {
            # Import the image from the tt_news record
            import = uploads/pics/
            import.data = field:image
            import.listNum = 0
            import.override.field = image

            # Determine the width and height (crop)
            width = 517c
            height = 177c

            # Set the quality of the image
            ext = jpg
            quality = 100
          }
        }
        20 = BOX
        20 {
          # Offset left, Offset bottom, Width, Height
          dimensions = 10,-10,280,70
          # Start at left bottom
          align = l,b
          # Color of the box
	  color = white
          # Opacity of the box
	  opacity = 75
        }
        30 = TEXT
        30 {
          text.data = field:title
          align = left
	  offset = 15,120
	  fontSize = 20
	  color = black
	}
      }
    }
  }
}

We’re finished:

If all went well, you should now be able to insert a subheader or any other tt_news field into the image as well. Hope you liked this tutorial, if you did please leave a comment.