RandomImage¶

((generated))¶

includeLibs.tx_ccrandomimage = EXT:cc_random_image/pi1/class.tx_ccrandomimage_pi1.php

  // USER_INT means 'no caching'

plugin.tx_ccrandomimage_pi1 = USER_INT
plugin.tx_ccrandomimage_pi1 {

  path = {$plugin.tx_ccrandomimage_pi1.path}
  fileExt = jpg,jpeg,gif,png

  renderObj = COA
  renderObj {
    wrap = {$content.wrap.bodytext}

    10 = IMAGE
    10.file = ###FILE_1###
    10.wrap = |<br><br>

    20 = IMAGE
    20.file = ###FILE_2###
  }
}

overrideSetup.field = bodytext

plugin.tx_ccrandomimage_pi1 = USER
plugin.tx_ccrandomimage_pi2 = USER

Reference¶

renderObj = TEXT
renderObj {
  wrap = {$content.wrap.bodytext}
  value = ###FILE_1###
}

renderObj = COA
renderObj {

    10 = IMAGE
    10.file = ###FILE_1###
        10.wrap = |<br><br>

    20 = IMAGE
    20.file = ###FILE_2###
}

overrideParms.field = bodytext

Example 1¶

The extension provides example code which will show output on the page without much configuration and work as Plugin content element. To make this example work you have to enable the extensions option Ctype Plugin in the extension manager.

1. First of all you need a collection of images that you want to display (in jpg, pngor gifformats). Place them in a folder somewhere inside of fileadmin/. Note that the images should be pre-sized to the right dimensions because the default TypoScript setup don't have any image resizing configured (look at example 3).

2. Add the pi2 static template to your TS template.

3. Set the path to your image collection with the Template Constant Editor or insert a line in your the constants field of your template by hand.

Example:

plugin.tx_ccrandomimage_pi2.path = fileadmin/demo_img_x220/

4. Add a new Plugin content element to your page, and select the plugin RandomImage.

Now the images should appear on the web page....

If not, check if the path is set correctly and if other content element render properly.

You can use a custom TypoScript setup by putting TS code in the TypoScript Setup field. Try this:

path = fileadmin/demo_img_x220/
fileExt = jpg,jpeg,gif,png

renderObj = IMAGE
renderObj.wrap = <div style="margin: 5px; border: green 2px solid"> | </div>
renderObj.file = GIFBUILDER
renderObj.file {
  format = jpg
  XY = [10.w], [10.h]

  10 = IMAGE
  10.file = ###FILE_1###

  20 = TEXT
  20.text = ###FILE_1_NAME###
  20.offset = 3,21
  20.fontSize= 12
  20.fontColor = black

  25 < .20
  25.offset = 2,20
  25.fontColor = yellow
}

The output will look like this:

As you see the surrounding plugin.tx_ccrandomimage_pi2 {}was not used here. If you want to try this setup with the pi1 plugin put plugin.tx_ccrandomimage_pi2 {}around it.

Example 2¶

This example shows how to use RandomImage inside of a template. That's what this extension is designed for.

We assume you have following simple TS setup:

# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 = TEXT
page.10.value = HELLO WORLD!

1. Add the pi1 static template to your TS template.

2. Set the path to your image collection with the Template Constant Editor or insert a line in your the constants field of your template by hand.

Example:

plugin.tx_ccrandomimage_pi1.path = fileadmin/cc_random_image/

3. Add following lines to your template:

  // insert a random image setup into the current page rendering
page.20 < plugin.tx_ccrandomimage_pi1
page.20.renderObj.wrap = <div style="margin: 5px; border: red 2px solid"> | </div>

The output will look like this:

If you want the output of the plugin to be cached with the cached page content you can change the plugin from USER_INT to USER:

page.20 < plugin.tx_ccrandomimage_pi1
page.20 = USER

Images will change than on new page rendering only .

Example 3¶

Note: you should have knowledge about using html templates before reading this.

Here's a real life example of how to use RandomImage. The image below shows the head of a web page. It's part of the standard template of that website.

Above the navigation bar you see five images. These images change randomly with every page load.

The head consists of “image parts” glued together within an html table. The random images should appear in one of the table cells (red square below).

The html template has the marker ###RNDIMG### inside the table cell:

  ...<img src="fileadmin/layout/bilder/head_09.jpg" width="74" height="18" alt="" /></td>
  <td rowspan="2" valign="top" height="1" nowrap>###RNDIMG###</td>
</tr>

Because the table cell (red square) has should have fixed dimensions of 375 x 50 pixels, and five images should be shown in a row, every image must be 75 x 50 pixels in size. If one image is higher than 75 pixels the surrounded html table will be stretched, and that will destroy the nice header layout.

TYPO3 can resize images to fit into maximum dimensions (using the IMAGE object), but you can resize the images to exactly 75 x 50 pixels with ImageMagick.

Resize a bunch of images with the shell command mogrify (ImageMagick):

mogrify -format jpg -size 75x50 -resize 75x50! +profile "*" *

Here's the TypoScript setup...

First, create a USER_INT object: this tells TYPO3 not to cache the output, which will result in different images displaying on every page load. The option is to use an INT object which will show changed images only if the whole page is re-rendered...

includeLibs.tx_ccrandomimage = EXT:cc_random_image/pi1/class.tx_ccrandomimage_pi1.php

  // USER_INT means 'no caching'
temp.rndImageTop = USER_INT
temp.rndImageTop {
  userFunc = tx_ccrandomimage_pi1->main

Then, define the path where the images reside...

path = fileadmin/randomImage-75x50/
fileExt = jpg,jpeg,gif,png

The rendering object is really simple. It's a content object array (COA) with five IMAGE objects in it. Before rendering, the ###FILE_x### marker's will be substituted by RandomImage, with image files selected from the folder defined above...

  renderObj = COA
  renderObj {
    10 = IMAGE
    10.file = ###FILE_1###
    20 = IMAGE
    20.file = ###FILE_2###
    30 = IMAGE
    30.file = ###FILE_3###
    40 = IMAGE
    40.file = ###FILE_4###
    50 = IMAGE
    50.file = ###FILE_5###
  }
}

Here's the normal html template processing with TEMPLATE (look in the Golive Tutorial for description)...

page.20 = TEMPLATE
page.20.template = FILE
page.20.template.file = fileadmin/layout/template.html
page.20.workOnSubpart = DOCUMENT_BODY
page.20.marks {
  MAINNAV < temp.tl_menu

The above defined object is applied to the marker RNDIMG used in the HTML template...

  RNDIMG < temp.rndImageTop
  HEADER < lib.header.gfx1
  LEFTCOL < styles.content.getLeft
  CONTENT  = COA
  CONTENT {
    30 < styles.content.get
    60  < styles.content.lastUpdate
  }
  RIGHTCOL < styles.content.getRight
}

Finished.

Example 4¶

What do you think will it do?

temp.rndImageSized = USER_INT
temp.rndImageSized {
  userFunc = tx_ccrandomimage_pi1->main

  path = fileadmin/myimages/
  fileExt = jpg,jpeg,gif,png

  renderObj = COA
  renderObj {
    10 = IMAGE
    10.file = ###FILE_1###
    10.file.width = 30
    10.wrap = |<br>

    20 = IMAGE
    20.file = ###FILE_2###
    20.file.height = 30
    20.wrap = |<br>

    30 = IMAGE
    30.file = ###FILE_3###
    30.file.height = 30
    30.file.width = 30
    30.wrap = |<br>
  }
}

page.100 < temp.rndImageSized