Tag: Web
#
System
Opis
I used to host kostasz.pl on a shared hosting from my country. I would use FTP as a mean to deliver updates of this jekyll-generated blog. Every time I was satisfied with the result of my changes I would run jekyll build/serve and then navigate to /_site directory with filezilla and upload it to /domains/mysite/public_html overwriting old files. Oh look, I made a typo in that post - let’s do it again! Not that I’m complaining, but I knew from the first time I used jekyll that there must be a more elegant and efficient way to push changes online. And there certainly is!
General concept Link to heading This is a simple PHP script that scans the content of a directory for files with certain extensions (for example .jpg, .png etc.) and automatically generates a image gallery allocated in Bootstrap responsive, scalable grid. Images can be smoothly previewed thanks to lightbox javascript. CSS stylesheet is generated from SASS .scss file and hence more readable.
Features:
PHP loop that automatically scans for every image in given folder - just put all files in one place, edit CSS / navigation links and it’s done! exif data (date, comment) integration in picture’s caption bootstrap framework - grid system and navigation fixed menu lightbox javascripts for image preview and slideshow SASS integration for CSS for faster deployment The code Link to heading Gallery class Link to heading <?php class Gallery { public $path; //this will be later set as a variable in index.php public function setPath($path) { $this->path = $path; } private function getDirectory($path) { return scandir($path); } public function getImages($extensions = array()) { $images = $this->getDirectory($this->path); //list all files foreach($images as $index => $image) { $explode = explode('.', $image); $extension = end($explode); if(!in_array($extension, $extensions)) { //check if files extensions meet the criteria set in index.php unset($images[$index]); } else { $images[$index] = array( //make an array of images and corresponding miniatures 'full' => $this->path . '/' . $image, 'thumb' => $this->path . '/thumbs/' . $image ); } } return (count($images)) ? $images : false; } } ?> Variables included before the HTML document Link to heading <?php require 'gallery.php'; $gallery = new Gallery(); $gallery->setPath('img'); //path to the image folder $images = $gallery->getImages(array('JPG','PNG')); //array of possible image extensions (useful if you have mixed galleries) $row_counter = 0; //don't change that $img_no_caption = " "; //default caption for image that don't have one $page_title="Scandinavia"; //changes the <title> attribute AND the logo in top left corner $no_images_warning="Ooops! No images in gallery!"; //Display the text when $gallery->setPath directory is empty. $col_md_x = 6; //Bootstrap - choose either 2,3,4 or 6 to have 6,4,3 or 2 pics per line respectively //---------------------------------------------- $row_x = 12 / $col_md_x; ?> HTML structure Link to heading The head Link to heading <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title><?php echo $page_title; ?></title> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="lightbox/css/lightbox.css" rel="stylesheet" /> <link rel="stylesheet" href="css/style.css"> <script src="lightbox/js/jquery-1.11.0.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="lightbox/js/lightbox.min.js"></script> </head> The navigation Link to heading <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><?php echo $page_title; ?></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul>--> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Other Galleries <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> The body Link to heading <body> <?php include 'navigation.php'; ?> <br /> <div class="container"> <div class="row"> <?php if($images): ?> <?php foreach($images as $image): $img_caption = exif_read_data($image['full'], 0, true)['COMPUTED']['UserComment']; $img_date = exif_read_data($image['full'], 0, true)['IFD0']['DateTime']; (!$img_caption) ? $img_caption = $img_no_caption : true; $row_counter++; ?> <div class="col-md-<?php echo $col_md_x; ?>"> <div class="picture_card"> <a href="<?php echo $image['full']; ?>" data-lightbox="roadtrip" data-title="<?php echo $img_caption; ?>"><img title="<?php echo $img_caption; ?>" src="<?php echo $image['thumb']; ?>"></a> <br /> <div class="picture_card_description"> <span class="glyphicon glyphicon-time"></span> <span class="picture_card_description_date"><?php echo $img_date; ?></span> <br /> <?php if ($img_caption == $img_no_caption) { echo ""; } else { echo $img_caption; }?> </div> </div> </div> <?php if ($row_counter % $row_x == 0) { echo '</div><br /><div class="row">'; } endforeach; ?> <?php else: ?> <div id=no_images><?php echo $no_images_warning; ?></div> <?php endif; ?> </div> </div> <br /> </body> </html> Known drawbacks Link to heading The code might be optimized by including only the most necessary parts of bootstrap code (grid system, navigation). Date formats should be converted to more common forms. In recent version, file extensions must be used with capital letters. Acknowledgments and License Link to heading This project is a upgraded version of the one included in tutorials provided by codecademy. Bootstrap and lightbox have their own licenses. PHP gallery is licensed under MIT license. The pictures available in the preview are my property. All rights reserved.
Having used Jekyll as the blog engine I decided to store my entire web page in the git repository. Version control lets me fiddle with design and writing drafts, but what about big files? Nowadays a blog shall not lack media, not to mention a thumbnail. But pushing images to git repo is not a desired solution. Instead, try to store it elsewhere. Like in AWS S3 / Digital Ocean object storage space.