[my work] Simple image gallery

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Locked
fredp

[my work] Simple image gallery

Post by fredp »

Hi everybody out there!

First of all, I'd like to say this is a GREAT cms, simple, powerful and straightforward (I think this is the right word for what I mean, you've to excuse me since I'm Italian and my English could not be very good... :? )

I needed a very simple gallery for CMSMS and, since I wasn't able to find something that fits my needings, I decided to write something very simple: it is, infact, not a module, but only a special "tag" that shows your images uploaded with CMSMS image manager.

[size=18px]-- EDIT: see below for an improved version --[/size]

This small script produces a simple table with image - description rows, where description is the content (no parsing) of a text file with the same name of the image but with the .txt extension or, if this doesn't exist, the file name. The link opens the full-size image in a popup with the sized of the image (more or less :?).
There are some config options: $dir is the subdirectory of uploads/images/ where images you want to show are stored, the other ones I think are quite clear. In regexp filters it's better to leave "thumb_" and "editor_" because files like these are generated by the image manager.

I haven't tested it very much, but it seems to work.

INSTRUCTIONS:
Create a new custom tag, call it something like "gallery" (or whatever you want), past the code in the code-area, customize the settings, save it and use it in the content with {gallery} or the name you gave to it.
Currently, you need a new tag for each gallery you want to show, since I don't know how to get parameters in these plugins. (Is there any method?)

I haven't any demo to show, since the whole site I'm developing in on my hard-disk: please, try it and say what do you think :D

Bye, Federico :D[/b]
Last edited by fredp on Fri Feb 04, 2005 5:43 pm, edited 1 time in total.
fredp

[my work] Simple image gallery

Post by fredp »

Thanks :D

Yes, I found the bug yesterday evening after posting this :(

This should be the correct code:

Code: Select all


// ===== CONFIG =====
// === FILE ===
// = Image directory =
$dir = "mygallery";
// = Valid extensions =
$types = array('jpg', 'jpeg', 'gif', 'png');
// = Exclude files =
$exclude = array('nottoshow.jpeg');
// = Exclude with regexp (PCRE) =
$exclude_regexp = array('#^editor_#', '#^thumb_#');
// === APPEARENCE ===
// = Table class =
$table_class = 'mygallery';
// = Thumbnail TD class =
$tb_td_class = 'mg_thumb';
// = Description TD class =
$de_td_class = 'mg_descr';
// END CONFIG



$filter = "#^(.+)\.(".implode($types,'|').")$#i";

$upath = "./uploads/images/{$dir}/";
$path = realpath("./uploads/images/{$dir}").'/';

if (empty($path)) return;

$d = dir($path);

echo "\n<table class=\"{$table_class}\">\n";

while ($f = $d->read()) {

if (filetype($path.$f) != 'file') continue;

if (in_array($f, $exclude)) continue;

if (!preg_match($filter, $f)) continue;

foreach ($exclude_regexp as $regexp)
if (preg_match($regexp, $f)) continue 2;

$size = @getimagesize($path.$f);

if (is_array($size)) $sizestr = ',width='.($size[0]+20).',height='.($size[1]+20);
else $sizestr = '';

echo "\t<tr>\n\t\t<td class=\"{$tb_td_class}\">\n\t\t\t".
"<a href=\"javascript:void(window.open('{$upath}{$f}','','resizable=no,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,fullscreen=no,dependent=no{$sizestr}'))\" title=\"Full-size image\">".
"<img src=\"{$upath}thumb_{$f}\" alt=\"\" /></a>\n\t\t</td>\n\t\t";

$pieces = explode('.', $f);
$pieces[count($pieces)-1] = 'txt';
$descf = implode('.', $pieces);

if (file_exists($path.$descf)) $descr = implode('', file($path.$descf));
else $descr = $f;

echo "<td class=\"{$de_td_class}\">\n\t\t\t\t{$descr}\n\t\t</td>\n\t</tr>\n";

}

$d->close();

echo "</table>\n";
fredp

Improved

Post by fredp »

New improved version

Now you need only one plugin, since it takes parameters:

dir -> image directory
types -> comma-separed list of valid extensions
exclude -> comma-separed list of excluded files
exclude_regexp -> comma-separed list of exclusion regexp

show_descr -> 'yes' shows the descriptions column, 'no' hides it

open_image -> 1: open image in a popup (javascript)
2: in a new window/tab (target=_blank)
3: in the self window/tab

table_class -> css class of the table
tb_td_class -> css class of the thumbnail cell
de_td_class -> css class of the description cell

If these parameters are not set, they default to values set in plugin code.
All params are optionals, default for "dir" is uploads/images/ (if not set in the code).


So paste the code into a new plugin, save it as "gallery" or whatever you want and call it in a content page

Code: Select all

{gallery_or_what dir="gallery/city" table_class="myclass"}
adding/changing/removing params as you want.

Code: Select all

/* PARAMETERS:
dir             -> image directory
types           -> comma-separed list of valid extensions
exclude         -> comma-separed list of excluded files
exclude_regexp  -> comma-separed list of exclusion regexp

show_descr      -> 'yes' shows the descriptions column, 'no' hides it

open_image      -> 1: open image in a popup (javascript)
                   2: in a new window/tab (target=_blank)
                   3: in the self window/tab

table_class     -> css class of the table
tb_td_class     -> css class of the thumbnail cell
de_td_class     -> css class of the description cell

If these are not set default to values set below
*/
extract($params);
// ===== DEFAULT CONFIG =====
// === FILE ===
// = Image directory =
$cdir = "";
// = Valid extensions =
$ctypes = array('jpg', 'jpeg', 'gif', 'png');
// = Exclude files =
$cexclude = array('nottosee.jpg');
// = Exclude with regexp (PCRE) =
$cexclude_regexp = array('#^editor_#', '#^thumb_#');
// === APPEARENCE ===
// = Table class =
$ctable_class = 'gallery';
// = Thumbnail TD class =
$ctb_td_class = 'g_thumb';
// = Show descriptions =
$cshow_descr = 'yes';
// = Description TD class =
$cde_td_class = 'g_descr';
// === LINKS ===
// = Open images in: =
// 1 -> popup (javascript)
// 2 -> new window/tab (target=_blank)
// 3 -> self window/tab
$copen_image = 1;
// END CONFIG

if (!isset($dir)) $dir = &$cdir;

if (isset($types)) $types = explode(',', $types);
else $types = &$ctypes;

if (isset($exclude)) $exclude = explode(',', $exclude);
else $exclude = &$cexclude;

if (isset($exclude_regexp)) $exclude_regexp = explode(',', $exclude_regexp);
else $exclude_regexp = &$cexclude_regexp;

if (!isset($table_class)) $table_class = &$ctable_class;

if (!isset($tb_td_class)) $tb_td_class = &$ctb_td_class;

if (!isset($show_descr)) $show_descr = &$cshow_descr;

if (!isset($de_td_class)) $de_td_class = &$cde_td_class;

if (!isset($open_image) || !is_int($open_image) || $open_image < 1 || $open_image > 3) 
$open_image = &$copen_image;

$filter = "#^(.+)\.(".implode($types,'|').")$#i";

$upath = "./uploads/images/{$dir}/";
$path = realpath("./uploads/images/{$dir}").'/';

if (empty($path)) return;

$d = dir($path);

echo "\n<table class=\"{$table_class}\">\n";

while ($f = $d->read()) {

if (filetype($path.$f) != 'file') continue;

if (in_array($f, $exclude)) continue;

if (!preg_match($filter, $f)) continue;

foreach ($exclude_regexp as $regexp)
if (preg_match($regexp, $f)) continue 2;

$size = @getimagesize($path.$f);

if (is_array($size)) $sizestr = ',width='.($size[0]+20).',height='.($size[1]+20);
else $sizestr = '';

switch ($open_image) {
case 1:
$url= "<a href=\"javascript:void(window.open('{$upath}{$f}','','resizable=no,".
"location=no,menubar=no,scrollbars=no,status=no,toolbar=no,fullscreen=no,".
"dependent=no{$sizestr}'))\" title=\"Full-size image\">";
break;
case 2:
$url = "<a href=\"{$upath}{$f}\" title=\"Full-size image\" target=\"_blank\">";
break;
case 3:
$url = "<a href=\"{$upath}{$f}\" title=\"Full-size image\">";
break;
}

echo "\t<tr>\n\t\t<td class=\"{$tb_td_class}\">\n\t\t\t".$url.
"<img src=\"{$upath}thumb_{$f}\" alt=\"\" /></a>\n\t\t</td>";

$pieces = explode('.', $f);
$pieces[count($pieces)-1] = 'txt';
$descf = implode('.', $pieces);

if (file_exists($path.$descf)) $descr = implode('', file($path.$descf));
else $descr = $f;

if ($show_descr == 'yes')
echo "\n\t\t<td class=\"{$de_td_class}\">\n\t\t\t\t{$descr}\n\t\t</td>";

echo "\n\t</tr>\n";

}

$d->close();

echo "</table>\n";
As usual, not very tested :o

Any suggestion? Please try it and say what do you think about it. Thanks very much

Fred :D
KevinR

[my work] Simple image gallery

Post by KevinR »

Nice job Fred

I have added to my site and it works well (as long as images have been uploaded via the Image Manager, otherwise no thumbs)

Any progress on the change to allow columns to be specified? Or can I go for it?
Greg
Power Poster
Power Poster
Posts: 598
Joined: Sun Sep 26, 2004 6:15 pm

[my work] Simple image gallery

Post by Greg »

Maybe the code from this Image Gallery script could be modified.
ImageGallery
Greg
megabob3
Power Poster
Power Poster
Posts: 498
Joined: Sat Jan 08, 2005 11:11 pm

[my work] Simple image gallery

Post by megabob3 »

Greg wrote:Maybe the code from this Image Gallery script could be modified.
ImageGallery
Really nice, i will modify it ;) and integrate on CMSMS :)
fredp

[my work] Simple image gallery

Post by fredp »

KevinR wrote:Nice job Fred

I have added to my site and it works well (as long as images have been uploaded via the Image Manager, otherwise no thumbs)

Any progress on the change to allow columns to be specified? Or can I go for it?
Thanks

If I understand what you asked for, I think this simple change is something like what you want: now, with the param "columns" you may specify how many columns you want to be displayed: thumb cell( + descr cell, optional) = 1 column

Code: Select all

/* PARAMETERS:
dir             -> image directory
types           -> comma-separed list of valid extensions
exclude         -> comma-separed list of excluded files
exclude_regexp  -> comma-separed list of exclusion regexp

show_descr      -> 'yes' shows the descriptions column, 'no' hides it

columns         -> the number of image columns of the table

open_image      -> 1: open image in a popup (javascript)
                   2: in a new window/tab (target=_blank)
                   3: in the self window/tab

table_class     -> css class of the table
tb_td_class     -> css class of the thumbnail cell
de_td_class     -> css class of the description cell

If these are not set default to values set below
*/
extract($params);
// ===== CONFIG =====
// === FILE ===
// = Valid extensions =
$ctypes = array('jpg', 'jpeg', 'gif', 'png');
// = Exclude files =
$cexclude = array('prev_r_01_medium.jpeg');
// = Exclude with regexp (PCRE) =
$cexclude_regexp = array('#^editor_#', '#^thumb_#');
// === APPEARENCE ===
// = Image columns number =
$ccolumns = 1;
// = Table class =
$ctable_class = 'screenshots';
// = Thumbnail TD class =
$ctb_td_class = 't';
// = Show descriptions =
$cshow_descr = 'yes';
// = Description TD class =
$cde_td_class = 'd';
// === LINKS ===
// = Open images in: =
// 1 -> popup (javascript)
// 2 -> new window/tab (target=_blank)
// 3 -> self window/tab
$copen_image = 1;
// END CONFIG

if (isset($types)) $types = explode(',', $types);
else $types = &$ctypes;

if (isset($exclude)) $exclude = explode(',', $exclude);
else $exclude = &$cexclude;

if (isset($exclude_regexp)) $exclude_regexp = explode(',', $exclude_regexp);
else $exclude_regexp = &$cexclude_regexp;

if (!isset($table_class)) $table_class = &$ctable_class;

if (!isset($tb_td_class)) $tb_td_class = &$ctb_td_class;

if (!isset($show_descr)) $show_descr = &$cshow_descr;

if (!isset($de_td_class)) $de_td_class = &$cde_td_class;

if (!isset($open_image) || !is_int($open_image) || $open_image < 1 || $open_image > 3) 
$open_image = &$copen_image;

if (!isset($columns) || !is_int($columns) || $columns < 1) 
$columns = &$ccolumns;

$filter = "#^(.+)\.(".implode($types,'|').")$#i";

$upath = "./uploads/images/{$dir}/";
$path = realpath("./uploads/images/{$dir}").'/';

if (empty($path)) return;

$count = 0;

$d = dir($path);

echo "\n<table class="{$table_class}">\n";

while ($f = $d->read()) {

if (filetype($path.$f) != 'file') continue;

if (in_array($f, $exclude)) continue;

if (!preg_match($filter, $f)) continue;

foreach ($exclude_regexp as $regexp)
if (preg_match($regexp, $f)) continue 2;

$size = @getimagesize($path.$f);

if (is_array($size)) $sizestr = ',width='.($size[0]+20).',height='.($size[1]+20);
else $sizestr = '';

switch ($open_image) {
case 1:
$url= "<a href="javascript:void(window.open('{$upath}{$f}','','resizable=no,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,fullscreen=no,dependent=no{$sizestr}'))" title="Full-size image">";
break;
case 2:
$url = "<a href="{$upath}{$f}" title="Full-size image" target="_blank">";
break;
case 3:
$url = "<a href="{$upath}{$f}" title="Full-size image">";
break;
}

$count++;
if (($count-1) % $columns == 0) echo "\t<tr>\n";
echo "\t\t<td class="{$tb_td_class}">\n\t\t\t".$url.
"<img src="{$upath}thumb_{$f}" alt="" /></a>\n\t\t</td>";

$pieces = explode('.', $f);
$pieces[count($pieces)-1] = 'txt';
$descf = implode('.', $pieces);

if (file_exists($path.$descf)) $descr = implode('', file($path.$descf));
else $descr = $f;

if ($show_descr == 'yes')
echo "\n\t\t<td class="{$de_td_class}">\n\t\t\t\t{$descr}\t\t</td>\n";

if ($count % $columns == 0) echo "\t</tr>\n";

}

if ($count % $columns != 0) echo "\t</tr>\n";

$d->close();

echo "</table>\n";
KevinR

[my work] Simple image gallery

Post by KevinR »

fredp wrote: If I understand what you asked for, I think this simple change is something like what you want: now, with the param "columns" you may specify how many columns you want to be displayed: thumb cell( + descr cell, optional) = 1 column
Frederick, you are a champion - that is exactly what i needed.

Now I have no excuse not to finish off the Gallery by adding my comment/descriptions files.

Thanks for the code.
fredp

[my work] Simple image gallery

Post by fredp »

Thanks very much :D (also to everyone who tried this little script :P )
Locked

Return to “Modules/Add-Ons”