How to select a random image from files in a directory using typoscript?

Question

I am using Typo3 4.5.3 and I have image files in a directory from which I want to randomly select it to display on the current page, but I can not get typoscript to do listnum = rand correctly. Here is my extension pattern:

# Pick a random image to display temp.banner = IMAGE temp.banner { file { height = 165 width = 954 import { filelist = {$templatePathPrefix}images/banners | jpg,jpeg,png,gif | name | | 1 listNum = rand } } params = class="bannerPic" } 

If I change the listnum parameter to 0, 1, etc., it inserts the corresponding HTML img into the page. Setting it to "last" also works, but rand always inserts the first image no matter how many times I update. Since I can select specific images (0, 1, ...), I know that general setup works, not random selection.

I have seen TS for various other rand applications that wrap an external object in a COA_INT object, but that didn't work for me either. I missed something about where to place the list Num = rand? I am new to Typo3, so many of them are still pretty opaque to me at this point (or is it showing?). Thanks for any information you can provide.

Answer 1

The mak_stdwrapextended extension adds the ability to use rand with listNum.

Works well on 4.5.

Answer 2

I would not recommend you to make arbitrary choices through TypoScript. Since you want a random image when loading the page, your random element must be a USER_INT or COA_INT element and therefore not cached.

A simple solution for this is to do this using JavaScript. You define a default image if JavaScript is not available on the client, and JavaScript that selects an image arbitrarily. With this solution, you get a random image every time, and your content is fully cached.

The following TypoScript code may give you some inspiration for this. It basically reads Image-Elements from the border column and generates JavaScript for their random output. In addition, images are related to each other.

 lib.teaser = COA lib.teaser.10 = CONTENT lib.teaser.10 < styles.content.getBorder lib.teaser.10 { slide = -1 table=tt_content select{ begin = 0 max = 1 #language languageField=sys_language_uid #from wich column where=colPos=3 } wrap=<div class="teaserimage">|</div> renderObj=COA #image with gallery function renderObj.10 = COA renderObj.10 { stdWrap.required=1 # get image 10 = IMAGE 10 { #if not empty required=1 file.import=uploads/pics/ file.import.field=image #file.width=266 #file.height=180 file.import.listNum = 0 stdWrap.insertData=1 params = id="imgbig_{TSFE:currentRecord}" imageLinkWrap < tt_content.image.20.1.imageLinkWrap imageLinkWrap.typolink.ATagParams = id="link_imgbig_{TSFE:currentRecord}" imageLinkWrap.typolink.ATagParams.stdWrap.insertData=1 } # standard image configuration from tt_content 10.altText < tt_content.image.20.1.altText 10.titleText < tt_content.image.20.1.titleText 10.longdescURL < tt_content.image.20.1.longdescURL # random function for gallery images 30 = COA 30 { stdWrap.required=1 stdWrap.dataWrap( <script type="text/javascript"> /* <![CDATA[ */ var imgArray = new Array(|); var randnum = Math.round(Math.random()*(imgArray.length-1)); document.getElementById('imgbig_{TSFE:currentRecord}').src ='uploads/pics/' + imgArray[randnum]; /* ]]> */ </script> ) # first gallery image 10 = TEXT 10.field = image 10.listNum.splitChar=, 10.listNum=0 10.if.isTrue.field=image 10.if.isTrue.listNum=1 10.if.isTrue.listNum.splitChar=, 10.dataWrap = "|" # other gallery images 20 = TEXT 20.field = image 20.split { token = , cObjNum = 1 1 = COA 1.if.isPositive.data = TSFE:register|SPLIT_COUNT 1 { 10 = TEXT 10.data = current:1 10.dataWrap = ,"|" } } } # random function for gallery links 40 = COA 40 { stdWrap.required=1 stdWrap.dataWrap( <script type="text/javascript"> /* <![CDATA[ */ //var imgLinkArray = new Array(randnum); var imgLinkArray = new Array(|); if(document.getElementById('link_imgbig_{TSFE:currentRecord}')) document.getElementById('link_imgbig_{TSFE:currentRecord}').href = imgLinkArray[randnum]; /* ]]> */ </script> ) # first gallery link 10 = TEXT 10.field = image_link 10.listNum.splitChar=, 10.listNum=0 10.dataWrap = "|" 10.typolink.parameter.field = image_link 10.typolink.returnLast = url # other gallery links 20 = TEXT 20.field = image_link 20.split { token = , cObjNum = 1 1 = COA 1.if.isPositive.data = TSFE:register|SPLIT_COUNT 1 { 10 = TEXT 10.data = current:1 10.dataWrap = ,"|" 10.typolink.parameter.data = current:1 10.typolink.returnLast = url } } } } } 

Answer 3

only typo3 V4.6 and above has listNum = rand in the kernel, see this http://forge.typo3.org/issues/16180

for typo3 V4.5 you need to expand tslib / class.tslib_content.php

add this to localconf.php:

 $TYPO3_CONF_VARS['FE']['XCLASS']['tslib/class.tslib_content.php'] = PATH_site.'fileadmin/template/class.ux_tslib_content.php'; 

and add this code to the .ux_tslib_content.php class:

 <?php /*************************************************************** * Copyright notice * * (c) 1999-2008 Kasper Skaarhoj ( [e-mail] ) * All rights reserved * * This script is part of the TYPO3 project. The TYPO3 project is * free software; you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation; either version 2 of the License, or * (at your option) any later version. * * The GNU General Public License can be found at * http://www.gnu.org/copyleft/gpl.html. * A copy is found in the textfile GPL.txt and important notices to the license * from the author is found in LICENSE.txt distributed with these scripts. * * * This script is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * This copyright notice MUST APPEAR in all copies of the script! ***************************************************************/ /** * Contains classes for Content Rendering based on TypoScript Template configuration * * $Id: class.tslib_content.php 4254 2008-09-27 13:35:44Z dmitry $ * Revised for TYPO3 3.6 June/2003 by Kasper Skaarhoj * XHTML compliant * * class tslib_cObj : All main TypoScript features, rendering of content objects (cObjects). This class is the backbone of TypoScript Template rendering. * * @author Kasper Skaarhoj < [e-mail] > */ /** * This class contains all main TypoScript features. * This includes the rendering of TypoScript content objects (cObjects). * Is the backbone of TypoScript Template rendering. * * There are lots of functions you can use from your include-scripts. * The class "tslib_cObj" is normally instantiated and referred to as "cObj". * When you call your own PHP-code typically through a USER or USER_INT cObject then it is this class that instantiates the object and calls the main method. Before it does so it will set (if you are using classes) a reference to itself in the internal variable "cObj" of the object. Thus you can access all functions and data from this class by $this->cObj->... from within you classes written to be USER or USER_INT content objects. * * @author Kasper Skaarhoj < [e-mail] > * @package TYPO3 * @subpackage tslib * @link http://typo3.org/doc.0.html?&tx_extrepmgm_pi1[extUid]=270&cHash=4ad9d7acb4 */ class ux_tslib_cObj extends tslib_cObj{ /** * Exploding a string by the $char value (if integer its an ASCII value) and returning index $listNum * * @param string String to explode * @param string Index-number. You can place the word "last" in it and it will be substituted with the pointer to the last value. You can use math operators like "+-/*" (passed to calc()) * @param string Either a string used to explode the content string or an integer value which will then be changed into a character, eg. "10" for a linebreak char. * @return string */ function listNum($content,$listNum,$char) { $char = $char ? $char : ','; if (t3lib_div::testInt($char)) { $char = chr($char); } $temp = explode($char,$content); $last = ''.(count($temp)-1); if($listNum === 'rand'){ $listNum = rand(0,count($temp)-1);} //taywa added: rand feature! $index=$this->calc(str_ireplace('last',$last,$listNum)); return $temp[$index]; } } ?>