Image Gallery - ItemManager 3

Gallery development can be painful especially the file upload handling process on the back-end. In this tutorial, I will talk about using ItemManager to implement an image gallery script, including a simple back-end for uploading images.

In order to display your images on the front-end you can use any plugin you like, I'll use simplelightbox jQuery plugin https://github.com/andreknieriem/simplelightbox/.

Which files are used in this tutorial

login.php - Login form
backend.php - Upload form for images
function.php - Simple controller
index.php - Front-end gallery
styles.css

Directory structure

project-root
│   index.php
│   backend.php
│   login.php
│   functions.php
│   styles.css
│
└───framework
    │   .htaccess
    │   imanager.php
    │
    └───data
    │   ...
    │
    └───imanager
    │   ...

The first thing we want to do is create a new category, let's call it simple Gallery. This category gets only a single file-field assigned to it called images. We only need to call this script once, after that it can be deleted again, so let's just add it in index.php:

index.php

// NOTE: Fit the path to your environment
include 'framework/imanager.php';
$category = new \Imanager\Category();
$category->set('name', 'Gallery');

if($category->save()) {
    $newField = new \Imanager\Field($category->id);
    $newField->set('name', 'images');
    $newField->set('type', 'fileupload');
    $newField->set('label', 'Visuals');
    // Allow only images
    $configs = new \Imanager\FieldConfigs();
    $configs->accept_types = 'gif|jpe?g|png';
    $newField->set('configs', $configs);
    $newField->save();
}

Once called, the script creates your Gallery category described above. You can then delete the code, it's no longer needed.

The next thing is the login.php file, it will contain our login form:

login.php

<?php include 'functions.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Login Form</title>
    <meta name="description" content="Just a simple login Form">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="J.E">
</head>
<body>
<main role="main">
    <form action="./login.php" method="post">
        <fieldset>
            <legend>Login:</legend>
            <span>Name: <input type="text" name="username"></span><br>
            <span>Pass: <input type="password" name="password"></span><br>
            <button type="submit" name="login" value="1">Login</button>
        </fieldset>
    </form>
</main>
<footer role="contentinfo">
    <small>Copyright &copy;
        <time datetime="<?php echo date('Y'); ?>"><?php echo date('Y'); ?></time> Ehret Studio</small>
</footer>
</body>
</html>

The backend.php is the back-end view and upload form, it should therefore only be accessible to logged-in users:

backend.php

<?php
include 'functions.php';
if(!isset($_SESSION['loggedin']) || true != $_SESSION['loggedin']) {
    \Imanager\Util::redirect('./login.php');
    die('Please log in first to see this page.');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Backend</title>
    <meta name="description" content="Just a simple login Form">
    <!-- Mobile-friendly viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" 
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="author" content="J.E">
</head>
<body>
<main role="main">
<?php
$imanager->fieldMapper->init($gallery->id, true);
$field = $gallery->getField('name=images');
$widget = new \Imanager\FieldFileupload();

echo '<form action="./backend.php" method="post">';

$widget->set('url', 'framework/');
$widget->set('action', "framework/imanager/upload/server/php/index.php");
$widget->set('id', $field->name);
$widget->set('categoryid', $field->categoryid);
$widget->set('itemid', isset($item->id) ? $item->id : null);
$widget->set('timestamp', $timestamp);
$widget->set('fieldid', $field->id);
$widget->set('configs', $field->configs, false);
$widget->set('name', $field->name);

echo $widget->render();

echo '<input type="hidden" name="action" value="save">';
echo '<button type="submit">Save</button>';
echo '</form>';
?>
</main>
<footer role="contentinfo">
    <small>Copyright &copy;
        <time datetime="<?php echo date('Y'); ?>"><?php echo date('Y'); ?></time> Ehret Studio</small>
</footer>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<?php echo $widget->renderJsBlock(); ?>
<?php echo $widget->renderJsLibs(); ?>
</body>
</html>

The functions.php is the simple controller. It handles HTTP requests and executes certain functions depending on them:

functions.php

<?php   
session_start();
// NOTE: Fit the path to your library
include 'framework/imanager.php';

$USER = 'My_Name';
$PASSWORD = 'An extremely secret password';

$gallery = $imanager->getCategory('name=Gallery');
$timestamp = time();

$item = $gallery->getItem(1);
if(!$item) {
    $item = new \Imanager\Item($gallery->id);
}

if($imanager->input->post->login) {
    // It's all hardcoded to go quickly forward.
    if($imanager->input->post->username == $USER &&
        $imanager->input->post->password == $PASSWORD) {
        $_SESSION['loggedin'] = true;
        \Imanager\Util::redirect('./backend.php');
    } else {
        echo 'Incorrect login data';
    }
}

if(isset($_SESSION['loggedin']) && true == $_SESSION['loggedin']) {
    if($imanager->input->post->action == 'save') {
        // It is a New Item, before you can save the images you 
        // should always save the item itself first, because it 
        // should create the directories and the important ID's first.
        $item->save();
        $dataSent = array(
            'file' => $imanager->input->post->position_images,
            'title' => $imanager->input->post->title_images,
            'timestamp' => $imanager->input->get->timestamp
        );
        // Set input value
        if($item->set('images', $dataSent)) {
            $item->save();
        } else {
            echo 'Error: The field value could not be set';
        }
    }
}

The index.php file is our gallery front-end script including simplelightbox plugin:

index.php

<?php include 'functions.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Gallery</title>
    <meta name="description" content="">
    <!-- Mobile-friendly viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="simplelightbox/dist/simplelightbox.min.css" rel="stylesheet"
    type="text/css">
    <link href="styles.css" rel="stylesheet" type="text/css">
    <meta name="author" content="J.Ehret" />
</head>
<body>
<main role="main">
    <h1 class="align-center">Simple Lightbox Demo Page</h1>
    <div class="gallery">  
        <?php
        if($item && $item->images) {
            foreach($item->images as $image) {
                echo '<a href="framework/'.$image->url.'"><img src="framework/'
                .$image->resize(300, 300, null, "adaptiveResize").'" alt=""
                title="'.$image->title.'"></a>';
            }
        }
        ?>
    </div>
</main>
<footer role="contentinfo">
    <small>Copyright &copy;
        <time datetime="<?php echo date('Y'); ?>"><?php echo date('Y'); ?></time> Ehret Studio</small>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="simplelightbox/dist/simple-lightbox.js"></script>
<script>
    $(function(){
        var gallery = $(".gallery a").simpleLightbox(
            {"history": false}
        );
    });
</script>
</body>
</html>

And finally you can add styles.css file to your index.php

styles.css

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Raleway', arial, sans-serif;
    box-sizing: border-box;
}

.container {
    box-sizing: inherit;
    margin: 0 auto;
    text-align: left;
    width: 100%;
    max-width: 1000px;
}

h1,h2,h3 {
    font-weight: 400;
}

main {
    max-width: 1170px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

main .gallery {
    overflow: auto;
}

main .gallery a img {
    float: left;
    width: 24.5%;
    height: auto;
    border: 2px solid #fff;
    -webkit-transition: -webkit-transform .15s ease;
    -moz-transition: -moz-transform .15s ease;
    -o-transition: -o-transform .15s ease;
    -ms-transition: -ms-transform .15s ease;
    transition: transform .15s ease;
    position: relative;
}

main .gallery a:hover img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    z-index: 5;
}

main .gallery a.big img {
    width: 40%;
}

.align-center {
    text-align: center;
}