Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

Random image dynamic object

edited February 2013 in Apps

I adapted the file manager gallery into a dynamic object for showing a random image from a folder of images.

I'm posting the code in case it's helpful to someone and so that it can be reviewed and possibly improved. It's in an app I'm working on called properties.

apps/properties/conf/embed.php

[properties/random-image]

label = "Random Image"
icon = picture

path[label] = Folder
path[type] = select
path[require] = "apps/filemanager/lib/Functions.php"
path[callback] = "filemanager_list_folders"

desc[label] = Show descriptions
desc[type] = select
desc[require] = "apps/filemanager/lib/Functions.php"
desc[callback] = "filemanager_yes_no"

apps/properties/handlers/random-image.php

require_once ('apps/filemanager/lib/Functions.php');

if (isset ($data['path'])) {
    $path = trim ($data['path'], '/');
} elseif (isset ($_GET['path'])) {
    $path = trim ($_GET['path'], '/');
} else {
    return;
}

if (strpos ($path, '..') !== false) {
    return;
}

if (! @is_dir ('files/' . $path)) {
    return;
}

// fetch the files
$files = glob ('files/' . $path . '/*.{jpg,jpeg,gif,png,JPG,JPEG,GIF,PNG}', GLOB_BRACE);

// get a random one
$file_path = $files[array_rand($files)];
$file_name = str_replace("files/$path/", '', $file_path);
$large = "files/$path/large/$file_name";
if (! (file_exists($large) && exif_imagetype($large))) $large = '';

// remove 'files/' from path
$pruned = preg_replace ('/^files\//', '', $file_path);

$template = 'properties/random-image';
// $page->add_style ('/apps/filemanager/css/gallery.css');
$page->add_style ('/apps/filemanager/css/colorbox/colorbox.css');
$page->add_script ('/apps/filemanager/js/jquery.colorbox.min.js');

// rewrite if proxy is set
if ($appconf['General']['proxy_handler']) {
    $file_path = str_replace ('files/', 'filemanager/proxy/', $file_path);
}

echo $tpl->render (
    $template,
    array (
        'path' => $file_path,
        'large' => $large,
        'gallery' => str_replace (array ('/', '.', ' '), array ('-', '-', '-'), $path),
        'description' => FileManager::prop ($pruned, 'desc'),
        'desc' => $data['desc']
    )
);

apps/properties/views/random-image.html

<style type="text/css">
    a.cboxElement {outline: 0;}
</style>
<script>
$(function () {
    $('.gallery').colorbox ({ 
        scalePhotos:false,
        maxWidth:"90%",
        maxHeight:"90%"
    });
});
</script>

<div id="gallery">
    <div style="text-align: center;">{% if large %}<a href="/{{ large }}" rel="gallery-{{ gallery }}" class="gallery"{% if desc === 'yes' %} title="{{ description }}"{% end %}>{% endif %}<img src="/{{ path }}" alt="{% if desc === 'yes' %}{{ description }}{% end %}" />{% if large %}</a>{% endif %}<br>{% if desc === 'yes' %}{{ description }}{% end %}</div>
</div>

Comments

  • Tweak to the view suggested by betaman so that it won't conflict with an embedded gallery elsewhere on the page:

    <style type="text/css">
        a.cboxElement {outline: 0;}
    </style>
    <script>
    $(function () {
        $('#random-image-gallery').colorbox ({ 
            scalePhotos:false,
            maxWidth:"90%",
            maxHeight:"90%"
        });
    });
    </script>
    
    <div id="gallery">
        <div style="text-align: center;">{% if large %}<a href="/{{ large }}" rel="gallery-{{ gallery }}" id="random-image-gallery"{% if desc === 'yes' %} title="{{ description }}"{% end %}>{% endif %}<img src="/{{ path }}" alt="{% if desc === 'yes' %}{{ description }}{% end %}" />{% if large %}</a>{% endif %}<br>{% if desc === 'yes' %}{{ description }}{% end %}</div>
    </div>
    
Sign In or Register to comment.