Zufallsbild (Template)

Zeigt ein Zufallsbild aus einem Bilderset der CPs Bilder <div>/spezial


Docu: –
Forum: Display random image from filemanager

Autor: K.Heermann (flip-flop) http://planmatrix.de 2009/03/26
CMS Version: >= V1.39
Version: V1.0
Update:

Tag:

Dateiname: random_image.tmpl
Verzeichnis: /template/inc_cntpart/images/

Bedingung: $phpwcms['allow_cntPHP_rt'] = 1;/config/phpwcms/conf.inc.php —-



Inspiriert durch den Beitrag vom User “breitsch” zu diesem Theme stelle ich hier eine andere generelle Lösung vor, die auf den Templates für “Bilder <div>” oder “Bilder spezial” aufbaut.

Es ist eine etwas flexiblerer Ansatz:

  • Liste der Bilder aus dem CP
  • width/heigth Parameter aus dem CP
  • Lightbox (zoom allein funktioniert nicht!!!).
  • alt/title Tag aus dem CP
  • Bilde eigene CSS classes/IDs
  • Rückfallbild (Bitte trage dein eigenes Bild am Ende des Prgrammierschnipsels ein.)
  • Benutze {SHOW_CONTENT:....} um die Ausgabe in der Seitenvorlage zu platzieren, wenn notwendig.


random_image.tmpl

<!--IMAGES_HEADER_START//-->
 
<div class="images" id="images{ID}">
 
[PHP]
 
    $my_images = array();
    $my_counter = -1;
 
<!--IMAGES_HEADER_END//-->
 
 
<!--IMAGES_ENTRY_START//-->
 
    $my_counter++;
    $my_images[$my_counter][0] = '{IMAGE}';  // complete html string with image
    $my_images[$my_counter][1] = '{IMGID}';  // image-id
 
<!--IMAGES_ENTRY_END//-->
 
<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->
 
 
<!--IMAGES_FOOTER_START//-->
 
echo '<div class="imageEntry">'.LF;
 
if (!empty($my_images) ) {
    echo '<div id="img'.$my_images[$my_counter][1].'">'.LF;  // ID
 
//    srand(microtime()*1000000); // Only for php version < 4.2
    echo $my_images[rand(0,$my_counter)][0];  // iamge output
 
    echo '</div>'.LF;  // End ID
}
else
{ // ************* Please insert your fallback image *************
    echo '<img src="content/images/my_fallback_image.jpg" width="200" height="150" alt="My alt" title="My title" border="0" />';
}
echo '</div>'.LF;
 
unset ($my_images);
unset ($my_counter);
 
[/PHP]
 
</div>
<!--IMAGES_FOOTER_END//-->


Mehrere Möglichkeiten

Wenn Du mehr Möglichkeiten probieren willst, spiele etwas mit den Parametern wie {THUMB_HEIGHT} oder {IMAGE_HASH} usw..

<!--
      Thumbnail image: {THUMB_NAME}
        relative:      {THUMB_REL}
        absolute:      {THUMB_ABS}
        height/width:  {THUMB_HEIGHT}px/{THUMB_WIDTH}px
        image ID:      {IMAGE_ID}
        image Hash:    {IMAGE_HASH}
      
      If you are not sure wrap zoomed image:
      [ZOOM]
      Zoomed (big) image: {IMAGE_NAME}
        relative: {IMAGE_REL}
        absolute: {IMAGE_ABS}
        height/width: {IMAGE_HEIGHT}px/{IMAGE_WIDTH}px
      [/ZOOM]      
   //-->

Parameterübergabe

aus dem Bereich
<!--IMAGES_ENTRY_START//-->
 
$my_images[$my_counter][2] = '{THUMB_HEIGHT}'; // image-id
$my_images[$my_counter][3] = '{THUMB_WIDTH}'; // image-id
// and so on .......
 
<!--IMAGES_ENTRY_END//-->
in den Bereich hinein
<!--IMAGES_FOOTER_START//-->
 
echo 'Test thumb height'.$my_images[$my_counter][2].'<br />'.LF;
echo 'Test thumb width'.$my_images[$my_counter][3].'<br />'.LF;
 
<!--IMAGES_FOOTER_END//-->

Zufallsbild mit EnlargeIt! v1.1

EnlargeIt! v1.1

Dateien und Verzeichnisse:

  • template/inc_js/enlargeit/enlargeit.js
  • template/inc_js/enlargeit/css/
  • template/inc_js/enlargeit/img/

Einschalten von EnlargeIt!:

Voraussetzung: X Klick vergrößern X LightBox
Im Feld Bildabstand: 1 px auswählen, alle anderen Einträge bilden die LightBox ab.

random_image_enlargeit.tmpl

<!--IMAGES_HEADER_START//-->
 
<div class="images" id="images{ID}">
 
[PHP]
 
    $my_images = array();
    $my_counter = -1;
 
<!--IMAGES_HEADER_END//-->
 
 
<!--IMAGES_ENTRY_START//-->
 
 
    $my_counter++;
    $my_images[$my_counter][0] = '{IMAGE}';  // complete html string with image
    $my_images[$my_counter][1] = '{IMGID}';  // image-id
 
    $my_zoom = false;
    [ZOOM]
    $my_zoom = true;
    $my_space = '{SPACE}';                       // Input in "image space:"  1 = use enlarge  /  <> 1 = use lightBox
    $my_images[$my_counter][2] = '{THUMB_REL}';  // image-id
    $my_images[$my_counter][3] = '{IMAGE_REL}';  // image-id
    [/ZOOM]
 
 
<!--IMAGES_ENTRY_END//-->
 
<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->
 
 
<!--IMAGES_FOOTER_START//-->
 
echo '<div class="imageEntry">'.LF;
 
 
if (!empty($my_images) ) {
    echo '<div id="img'.$my_images[$my_counter][1].'">'.LF;  // ID
 
 
//    srand(microtime()*1000000); // Only for php version < 4.2
    $my_random = rand(0,$my_counter);
 
 
// <img style="cursor: url(./exfiles/pluscur.cur), pointer;" id="enl_autoid0" title="" src="expics/thumb_hor1.jpg" onclick="enlarge(this);" longdesc="expics/normal_hor1.jpg" alt="Picture 1" class="thumbnail">
 
    if ($my_zoom) {
        if ($my_space == 1) {  // Output enlarge
            echo '<img src="'.$my_images[$my_random][2].
        '" alt="" onclick="enlarge(this);" longdesc="'.$my_images[$my_random][3].
        '" style="padding:5px; border:1px solid #000; " class="thumbnail" />';
        } else
        {
            echo $my_images[$my_random][0];  // image output lightbox
        }
    } else
    {
        echo $my_images[$my_random][0];  // image output lightbox
    }
    echo '</div>'.LF;  // End ID
}
else
{ // ************* Please insert your fallback image *************
    echo '<img src="content/images/my_fallback_image.jpg" width="200" height="150" alt="My alt" title="My title" border="0" />';
}
 
 
echo '</div>'.LF;
 
unset ($my_images);
unset ($my_counter);
unset ($my_random);
unset ($my_zoom);
unset ($my_space);
 
[/PHP]
 
</div>
 
[PHP]
 
 
$GLOBALS['block']['custom_htmlhead']['enlargeit.js'] = '  <script src="'.TEMPLATE_PATH.'inc_js/enlargeit/enlargeit.js" type="text/javascript"></script>';
$GLOBALS['block']['custom_htmlhead']['enlargeit'] = '  <script type="text/javascript">
  // <![CDATA[
        enl_ani = 3;
        enl_brdcolor = \'#FFFFFF\';
        enl_titletxtcol = \'#444444\';
        enl_ajaxcolor = \'#d0d0d0\';
        enl_brdsize = 20;
        enl_maxstep = 30;
        enl_speed = 12;
        enl_shadow = 1;
        enl_shadowintens = 20;
        enl_shadowsize = 3;
        enl_center = 1;
        enl_dark = 0;
        enl_darkprct = 20;
        enl_preload = 1;
        enl_drgdrop = 1;
        enl_darksteps = 5;
        enl_keynav = 1;
        enl_wheelnav = 1;
        enl_opaglide = 1;
        enl_minuscur=\'minuscur.cur\';
        enl_brdround = 1;
        enl_brdbck = \'\';
        enl_buttonurl[0] = \'prev\';
        enl_buttontxt[0] = \'Previous picture [left arrow key]\';
        enl_buttonoff[0] = -216;
        enl_buttonurl[1] = \'next\';
        enl_buttontxt[1] = \'Next picture [right arrow key]\';
        enl_buttonoff[1] = -234;
        enl_buttonurl[2] = \'close\';
        enl_buttontxt[2] = \'Close [Esc key]\';
        enl_buttonoff[2] = -0;
        enl_gifpath = \'template/inc_js/enlargeit/img/\';
        enl_btnact=\'bact.png\';
        enl_btninact=\'binact.png\';
   // ]]>
  </script>';
[/PHP]
 
<!--IMAGES_FOOTER_END//-->


deutsch/phpwcms-system/artikel/contentparts/bilder-div/template-random-image.txt · Last modified: 2018/06/03 18:08 (external edit)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0