Home Contact Us Sitemap News Forums Japanese Lessons Fan Art Fan Fiction Download
Main Menu
Forums (ext.)
Log In
Register Account
Fan Art
Fan Fiction
Japanese Lessons
Cutest Anime Girl
All Anime World FAQ
Site Search
Link Us!
Catnip Box
   Print View
 Text Only
 Bookmark us!
Call a dog and they come, call
a cat and they take a message
and get back to you later.
Oldwrench, chat 13th Apr


Firefox 3
- More Cool Sites -

  Scaling images using extension code and TYPOSCRIPT

For some time I've been looking for a solution to aid me in my ' Cutest Anime Girl' contest which is due once every year. In this contest people submit to me by email images of female anime characters they consider cute (as opposed to sexy). These images are listed in a table and in December every year all visitors of our site are allowed to pick one of these images and vote for the girl.

Now instead of resizing all submitted pictures to one thumbnail and one enhanced image we thought: Wait, TYPO3 uses ImageMagick and can scale images without problems - why not use it?

Luckily it's relatively easy to do so. The main problem is to glue all necessary parts together and to find the right functions inside the large TYPO3 API. Because there is no readily available (and working!) code snippet I decided to post my solution right here.

The Code

When working on our extension we have decided to allow the configuration to be done by TypoScript. This allows easy configuration of the extension by anyone having access to the contest page. By using TYPO3 for image scaling the code becomes ridiculously easy.

Imagine you have created an extension 'user_myext' and you allow uploading of images into table user_myext_data by adding a field of type 'picture' to the extensions database table. Installing this extension will force TYPO3 to do two things: First create an empty directory upload/user_myext/ to contain the uploaded images. Second it will create a database field BLOB containing the file names of the uploaded files. Please notice, when uploading two or more files with the same name they get a number attached to create a new unambiguous filename, e.g. picture.png becomes picture_1.png.

In your code use the following:

// Several images might be concatenated by commas
$pictures = explode(",", $row[pictures]);

// Now process every image using configuration in the 'pic' plugin configuration
foreach ($pictures as $picture) {
  $content .= $this->cObj->cImage("uploads/user_myext//".$picture, $this->conf["pic."]);

Configuring the picture size

You need to configure the plugin using TypoScript. You can either add static TypoScript code using the kickstarter or just create a template record with the 'root' option turned off. Using TypoScript also allows you to add a JavaScript to every thumbnail which opens a larger image in a separate popup window which is very convenient for our contest.

Here's the code:

plugin.user_myext_pi1 {
  pic = IMAGE
  pic {
    file = 
    file.maxH = 150
    wrap = 
    imageLinkWrap = 1 
    imageLinkWrap { 
      bodyTag = <BODY bgColor=black>
      wrap = <A href="javascript:close();"> | </A>
      width = 800m
      height = 600m
      JSwindow = 1 
      JSwindow.expand = 17,20 


You can also use maxW to give a maximum width as well. If you want to fit the image into a bounding box without losing their aspect ratio you can set both maxH and maxW but add a "w" behind the sizes (e.g. "maxH = 200w" and "maxW = 200w" will fit all items into a 200x200 box)

To remove the Javascript window set imageLinkWrap to 0. You can also delete the block imageLinkWrap {} and everything inside.

To change the background color of the popup window change the line "bodyTag" to whatever you like.

The line JSWindow.expand adds the specified size in pixels to the popup window. I found 17,20 to be a good value for Firefox browsers (and not too annoying in MSIE and Opera). You can also use conditions in your TypoScript to change this value for every browser but this will create multiple copies of this page in your cache and waste alot of memory.

All articles by Olray and Sakura

 Fantasy Name Generator
 UTF-8 howto
 TYPO3 scaling images by code
 TYPO3 Power-Linking
 TYPO3 Rotating Images

Privacy Policy | Terms & Conditions