Creating a local imagemagick gallery for web
Posted: Tue Sep 20, 2022 11:29 pm
Creating large photo images and touchups can be great on a local computer and apache server with php. but when you have to upload the images and allow a page to load those as a gallery of thumbnails, 200+ mb of images should be resized to be efficient.
What I did was install Imagemagick to windows 10 then I ran a script in PHP I wrote to find my galleries and make another folder replicating them if they didn't exist (none did when I did this, so 20 new gallery folders).
so I have
[data][img][galleries][*]
[data][img][gThumbs][*]
my script makes those gThumbs folders, which I initially created by hand, [website_folder][data][img] is my structure in the apache html root
I made a few files in each folder, kids in a group, then individual kids were photographed as well. I thought, if I rename the group pic to group_00.jpg and keep the names of the individual shots alone, I could scan each folder for a group_00 folder and group_00.jpg file for the gallery menu on the left hand side of my interface. I use 4k because it's easiest to manage so many images and galleries, then I used css grid and css flexbox so they will nicely fit even on smaller HD monitors or sub-windows on 4k.
There were some problems I sorted out with imagemagick's executable [CONVERT.EXE] I called with PHP's EXEC function... windows 10 also has [CONVERT.EXE]. One solution was to change my PATHs in windows to see imagemagick first, but I would rather just call it directly with a location in php. One problem is the [\] slash is [\\] double to be escaped in a php string, say $locStr needs windows paths to be double slashed for a single slash (escaped). Then there is the problem that for whatever reason, microsoft calls it's default program area "PROGRAM FILES" so I tried escaping the space and many ways it kept outputting in error.log of apache's server "C:\PROGRAM " is not a executable... it got lost at the space.
I found a simple command in php called ESCAPESHELLARG and you put your double slash for folders string in there and it fixes the space and suddenly the EXEC works, so I wrote the string, then put it in that ESCPAESHELLARG and saved it in a string itself, then just EXEC that new string:
So, it could now convert all my giant photos to 512 width max and save them in the new folders my program had earlier cycled through. Then in my main index.php file I could just load the smaller thumbnails, make two pointers to the small image, the subfolder had a hyperlink with _blank as the new tab target and loaded the larger image, saving hundreds of megabytes per visit and still show large images on the site.
index.php
create_thumbnails.php
I am sure you can make something better, it's just online to help those who might not know how to do some things or are feeling pitfalls due to exec and paths, maybe even smaller images in web traffic be more efficient. Happy graphic coding.
What I did was install Imagemagick to windows 10 then I ran a script in PHP I wrote to find my galleries and make another folder replicating them if they didn't exist (none did when I did this, so 20 new gallery folders).
so I have
[data][img][galleries][*]
[data][img][gThumbs][*]
my script makes those gThumbs folders, which I initially created by hand, [website_folder][data][img] is my structure in the apache html root
I made a few files in each folder, kids in a group, then individual kids were photographed as well. I thought, if I rename the group pic to group_00.jpg and keep the names of the individual shots alone, I could scan each folder for a group_00 folder and group_00.jpg file for the gallery menu on the left hand side of my interface. I use 4k because it's easiest to manage so many images and galleries, then I used css grid and css flexbox so they will nicely fit even on smaller HD monitors or sub-windows on 4k.
There were some problems I sorted out with imagemagick's executable [CONVERT.EXE] I called with PHP's EXEC function... windows 10 also has [CONVERT.EXE]. One solution was to change my PATHs in windows to see imagemagick first, but I would rather just call it directly with a location in php. One problem is the [\] slash is [\\] double to be escaped in a php string, say $locStr needs windows paths to be double slashed for a single slash (escaped). Then there is the problem that for whatever reason, microsoft calls it's default program area "PROGRAM FILES" so I tried escaping the space and many ways it kept outputting in error.log of apache's server "C:\PROGRAM " is not a executable... it got lost at the space.
I found a simple command in php called ESCAPESHELLARG and you put your double slash for folders string in there and it fixes the space and suddenly the EXEC works, so I wrote the string, then put it in that ESCPAESHELLARG and saved it in a string itself, then just EXEC that new string:
Code: Select all
$imlStr="C:\\Program Files\\ImageMagick-7.1.0-Q16-HDRI\\";
$escStr=escapeshellarg($imlStr);
$sizeW="512";
$execStr=$escStr."convert.exe ".$oldF." -resize ".$sizeW."x ".$newF;
echo "<div>$execStr</div>";
exec($execStr);index.php
Code: Select all
<?php
/*
08-15-2022 group gallery viewer v1.0 by kristoffe brodeur. ©2022 All Rights Reserved.
works for up to 100 folders
(or more if you add to str_pad 000,0000,... for 1000,10000,...)
09-20-2022 created a create_thumbnails.php to make small imagemagick files locally in windows
to shrink from 217mb to 27mb and a new gThumbs folder area with smaller images
max size is 512 pixels (x) in a variable in that program
also made special string repairs for sending windows exec to convert.exe
to the actual imagemagick install folder so it won't conflict with windows
and it's hard drive convert.exe program using php's escapeshellarg
large image is a new tab in the browser with target='_blank' from the interface
*/
$to_root="./";
require_once $to_root."php/menu.php";
require_once $to_root."php/find_files.php";
$groupArr=readMenuArray($to_root."menus/groups.txt");
$lenG=count($groupArr);
$galleryStr="";
$folderNumStr="";
/*
0 folder number
1 person count in singles vs the main group pic
2 title of the dance group image
*/
//
for($a=0;$a<$lenG;$a++)
{
$tgtArr=explode("^",$groupArr[$a]);
$folderNumStr=str_pad($a,2,"00",STR_PAD_LEFT);
//$imgFolder=$to_root."data/img/galleries/group_".$folderNumStr."/";
$imgFolder=$to_root."data/img/gThumbs/group_".$folderNumStr."/";
$groupImgStr=$imgFolder."group_".$folderNumStr.".jpg";
//
$galleryStr.="
<div class='grid-item'>
<figure>
<figcaption>".$tgtArr[2]." [ ".($tgtArr[1]+1)." | pics ]</figcaption>
<a href='index.php?g=$a'>
<img src='$groupImgStr' alt=''>
</a>
</figure>
</div>
";
//
}
$g=-1;
$sub_galleryStr="";
//
if(isset($_GET['g']))
{
$g=$_GET['g'];
//
$folderNumStr=str_pad($g,2,"00",STR_PAD_LEFT);
$imgOrigFolder=$to_root."data/img/galleries/group_".$folderNumStr."/";
$imgFolder=$to_root."data/img/gThumbs/group_".$folderNumStr."/";
//echo "[$imgFolder]<br />";
$subFileArr=new find_files($imgFolder,".jpg","");
$lenF=count($subFileArr->files);
//echo "$lenF files found in subGallery Folder<br />";
//
for($sG=0;$sG<$lenF;$sG++)
{
$fN=$subFileArr->files[$sG];
$imgF=$imgFolder.$fN.".jpg";
$imgOrigF=$imgOrigFolder.$fN.".jpg";
$sub_galleryStr.="
<div class='grid-item'>
<figure>
<figcaption>".$fN."</figcaption>
<a href='$imgOrigF' target='_blank'>
<img src='$imgF' alt=''>
</a>
</figure>
</div>
";
}
}
?>
<html>
<head>
<link type="text/css" rel="stylesheet" href="<?php echo $to_root;?>css/page.css" />
</head>
<body>
<div class="cols_middle_fb">
<div class="cols_middle_fb_single">
<div class='wrapper'>
<div class='grid'>
<?php echo $galleryStr;?>
</div>
</div>
</div>
<div class="cols_middle_fb_single">
<div class='wrapper'>
<div class='grid'>
<?php echo $sub_galleryStr;?>
</div>
</div>
</div>
</div>
</body>
</html>Code: Select all
<?php
/*
09-20-2022 image resize with imagemagick in windows 10 ©2022 by kristoffe brodeur. All rights reserved.
//double quotes allowing php to replace $txt with a text string
make \ needed to be escaped as \\
/ for windows folders
\ for php calls to html server folders
*/
$to_root="./";
require_once $to_root."php/find_files.php";
$dir_c=getcwd()."\\";
$dir_i=$dir_c."data\\img\\galleries\\";
$dir_t=$dir_c."data\\img\\gThumbs\\";
$php_dir_c=$to_root;
$php_dir_i=$php_dir_c."data/img/galleries/";
$php_dir_t=$php_dir_c."data/img/gThumbs/";
//
function imageResize($src,$dest)
{
list($w,$h)=getimagesize($src);
echo "<div>width[$w] height[$h]</div>";
return 0;
}
/*
see if thumbnail folders exist
create them if they do not match the gallery folders
*/
//
$gFolders=find_folders($php_dir_i);
$len_gF=count($gFolders);
echo "<div>folders in gallery [$len_gF]</div>";
//
for($a=0;$a<$len_gF;$a++)
{
//echo "<div>".$gFolders[$a]."</div>";
$newF=$php_dir_t.$gFolders[$a];
//echo "<div>".$newF."</div>";
//
if(!is_dir($newF))
{
mkdir($newF,0777,true);
}
else
{
//echo "<div>$newF exists</div>";
}
}
//resize images that exist
//
for($a=0;$a<$len_gF;$a++)
{
//echo "<div>".$gFolders[$a]."</div>";
$gF=$php_dir_i.$gFolders[$a]."/";
$nF=$php_dir_t.$gFolders[$a]."/";
//
$w_gF=$dir_i.$gFolders[$a]."\\";
$w_nF=$dir_t.$gFolders[$a]."\\";
//
//
$subFileArr=new find_files($gF,".jpg","");
$lenF=count($subFileArr->files);
//echo "<div>$lenF files found in subGallery Folder [$newF]<br />";
$tgtF="";
//
for($sG=0;$sG<$lenF;$sG++)
{
$tgtF=$subFileArr->files[$sG];
$oldF=$w_gF.$tgtF.".jpg";
$newF=$w_nF.$tgtF.".jpg";
list($w,$h)=getimagesize($oldF);
echo "<div>[$oldF] - - - - - [$newF]orig image dimensions [$w][$h]<br />";
/*
windows 10 has a program called convert.exe for hard drives
since the environment variables search windows first and I want to keep it that way
I had to create a way to escape spaces and backslashes so php could send an exec properly
to windows to execute imagemagick's convert.exe in it's current folder where I installed it.
*/
$imlStr="C:\\Program Files\\ImageMagick-7.1.0-Q16-HDRI\\";
$escStr=escapeshellarg($imlStr);
$sizeW="512";
$execStr=$escStr."convert.exe ".$oldF." -resize ".$sizeW."x ".$newF;
echo "<div>$execStr</div>";
exec($execStr);
echo "<hr />";
}
}
?>
<html>
<head>
</head>
<body>
<div>Current Dir [<?php echo $dir_c;?>]</div>
<div>Images Dir [<?php echo $dir_i;?>]</div>
<div>Thumbs Dir [<?php echo $dir_t;?>]</div>
<hr />
<div>php Current Dir [<?php echo $php_dir_c;?>]</div>
<div>php Images Dir [<?php echo $php_dir_i;?>]</div>
<div>php Thumbs Dir [<?php echo $php_dir_t;?>]</div>
</body>
</html>