Simple Image Gallery

Allows us to reuse previous uploaded images.
​

system/admin/editor/js/editor.js

@@ -9,6 +9,8 @@
         $('#insertImageDialog').modal('hide');
         $('#insertImageDialogURL').val('');
         $('#insertImageDialogFile').val('');
+        $('#insertMediaDialogURL').val('');
+        $('#insertMediaDialogFile').val('');
     };
     $('#insertImageDialogInsert').click( function() {
         callbackFunc( $('#insertImageDialogURL').val().length > 0 ? $('#insertImageDialogURL').val() : null );

system/admin/views/add-content.html.php

@@ -25,6 +25,8 @@ if (file_exists($tagslang)) {
     file_put_contents($tagslang, print_r($tmp, true));
 }
 
+$images = get_gallery();
+
 ?>
 
 <link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
@@ -193,12 +195,32 @@ $( function() {
         </form>
     </div>
 
-    <style>
-    .wmd-prompt-background {z-index:10!important;}
-    #wmd-preview img {max-width:100%;}
-    </style>
+<style>
+.wmd-prompt-background {z-index:10!important;}
+#wmd-preview img {max-width:100%;}
+.cover-container {
+    height: 200px;
+    width: 100%;
+    white-space: nowrap;
+    overflow-x: scroll;
+    overflow-y: hidden;
+}
+.cover-item {
+    position: relative;
+    display: inline-block;
+    margin: 2px 2px;
+    border-top-right-radius: 2px;
+    width: 200px;
+    height: 150px;
+    vertical-align: top;
+    background-position: top left;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+</style>
+
     <div class="modal fade" id="insertImageDialog" tabindex="-1" role="dialog" aria-labelledby="insertImageDialogTitle" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-dialog modal-lg" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5>
@@ -207,6 +229,18 @@ $( function() {
                     </button>
                 </div>
                 <div class="modal-body">
+                    <?php if (!empty($images)) :?>
+                    <div class="form-group">
+                        <div class="row-fluid cover-container">
+                            <?php foreach ($images as $img):?>
+                                <div class="cover-item">
+                                    <img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
+                                </div>
+                            <?php endforeach;?>
+                        </div>
+                    </div>
+                    <hr>
+                    <?php endif;?>
                     <div class="form-group">
                         <label for="insertImageDialogURL">URL</label>
                         <input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@@ -223,10 +257,10 @@ $( function() {
                 </div>
             </div>
         </div>
-    </div>
-    
+    </div>   
+    <?php if ($type == 'is_image'):?>
     <div class="modal fade" id="insertMediaDialog" tabindex="-1" role="dialog" aria-labelledby="insertMediaDialogTitle" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-dialog modal-lg" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="insertMediaDialogTitle"><?php echo i18n('Insert_Image');?></h5>
@@ -235,6 +269,18 @@ $( function() {
                     </button>
                 </div>
                 <div class="modal-body">
+                    <?php if (!empty($images)) :?>
+                    <div class="form-group">
+                        <div class="row-fluid cover-container">
+                            <?php foreach ($images as $img):?>
+                                <div class="cover-item">
+                                    <img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
+                                </div>
+                            <?php endforeach;?>
+                        </div>
+                    </div>
+                    <hr>
+                    <?php endif;?>
                     <div class="form-group">
                         <label for="insertMediaDialogURL">URL</label>
                         <input type="text" class="form-control" id="insertMediaDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@@ -251,7 +297,8 @@ $( function() {
                 </div>
             </div>
         </div>
-    </div>    
+    </div>
+    <?php endif;?>
     
 </div>
 
@@ -259,3 +306,9 @@ $( function() {
 <script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script>
 <script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
 <script type="text/javascript" src="<?php echo site_url() ?>system/resources/js/media.uploader.js"></script>
+<script>
+  $('.the-img').click(function(e) {
+    $('#insertMediaDialogURL').val($(e.target).attr('src'));
+    $('#insertImageDialogURL').val($(e.target).attr('src'));
+  });
+</script>

system/admin/views/add-page.html.php

@@ -1,4 +1,5 @@
 <?php if (!defined('HTMLY')) die('HTMLy'); ?>
+<?php $images = get_gallery(); ?>
 <link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
 <script src="<?php echo site_url() ?>system/resources/js/jquery.min.js"></script>
 <script src="<?php echo site_url() ?>system/resources/js/jquery-ui.min.js"></script>
@@ -56,12 +57,32 @@
         </form>
     </div>
     
-    <style>
-    .wmd-prompt-background {z-index:10!important;}
-    #wmd-preview img {max-width:100%;}
-    </style>
+<style>
+.wmd-prompt-background {z-index:10!important;}
+#wmd-preview img {max-width:100%;}
+.cover-container {
+    height: 200px;
+    width: 100%;
+    white-space: nowrap;
+    overflow-x: scroll;
+    overflow-y: hidden;
+}
+.cover-item {
+    position: relative;
+    display: inline-block;
+    margin: 2px 2px;
+    border-top-right-radius: 2px;
+    width: 200px;
+    height: 150px;
+    vertical-align: top;
+    background-position: top left;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+</style>
+
     <div class="modal fade" id="insertImageDialog" tabindex="-1" role="dialog" aria-labelledby="insertImageDialogTitle" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-dialog modal-lg" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5>
@@ -70,6 +91,18 @@
                     </button>
                 </div>
                 <div class="modal-body">
+                    <?php if (!empty($images)) :?>
+                    <div class="form-group">
+                        <div class="row-fluid cover-container">
+                            <?php foreach ($images as $img):?>
+                                <div class="cover-item">
+                                    <img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
+                                </div>
+                            <?php endforeach;?>
+                        </div>
+                    </div>
+                    <hr>
+                    <?php endif;?>
                     <div class="form-group">
                         <label for="insertImageDialogURL">URL</label>
                         <input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@@ -90,4 +123,9 @@
 </div>
 <!-- Declare the base path. Important -->
 <script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script>
-<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
+<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
+<script>
+  $('.the-img').click(function(e) {
+    $('#insertImageDialogURL').val($(e.target).attr('src'));
+  });
+</script>

system/admin/views/edit-content.html.php

@@ -74,6 +74,8 @@ if (file_exists($tagslang)) {
     file_put_contents($tagslang, print_r($tmp, true));
 }
 
+$images = get_gallery();
+
 ?>
 <link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
 <script src="<?php echo site_url() ?>system/resources/js/jquery.min.js"></script>
@@ -248,12 +250,32 @@ $( function() {
         </form>
     </div>
 
-    <style>
-    .wmd-prompt-background {z-index:10!important;}
-    #wmd-preview img {max-width:100%;}
-    </style>
+<style>
+.wmd-prompt-background {z-index:10!important;}
+#wmd-preview img {max-width:100%;}
+.cover-container {
+    height: 200px;
+    width: 100%;
+    white-space: nowrap;
+    overflow-x: scroll;
+    overflow-y: hidden;
+}
+.cover-item {
+    position: relative;
+    display: inline-block;
+    margin: 2px 2px;
+    border-top-right-radius: 2px;
+    width: 200px;
+    height: 150px;
+    vertical-align: top;
+    background-position: top left;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+</style>
+
     <div class="modal fade" id="insertImageDialog" tabindex="-1" role="dialog" aria-labelledby="insertImageDialogTitle" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-dialog modal-lg" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5>
@@ -262,6 +284,18 @@ $( function() {
                     </button>
                 </div>
                 <div class="modal-body">
+                    <?php if (!empty($images)) :?>
+                    <div class="form-group">
+                        <div class="row-fluid cover-container">
+                            <?php foreach ($images as $img):?>
+                                <div class="cover-item">
+                                    <img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
+                                </div>
+                            <?php endforeach;?>
+                        </div>
+                    </div>
+                    <hr>
+                    <?php endif;?>
                     <div class="form-group">
                         <label for="insertImageDialogURL">URL</label>
                         <input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@@ -279,9 +313,9 @@ $( function() {
             </div>
         </div>
     </div>
-    
+    <?php if ($type == 'is_image'):?>
     <div class="modal fade" id="insertMediaDialog" tabindex="-1" role="dialog" aria-labelledby="insertMediaDialogTitle" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-dialog modal-lg" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="insertMediaDialogTitle"><?php echo i18n('Insert_Image');?></h5>
@@ -290,6 +324,18 @@ $( function() {
                     </button>
                 </div>
                 <div class="modal-body">
+                    <?php if (!empty($images)) :?>
+                    <div class="form-group">
+                        <div class="row-fluid cover-container">
+                            <?php foreach ($images as $img):?>
+                                <div class="cover-item">
+                                    <img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
+                                </div>
+                            <?php endforeach;?>
+                        </div>
+                    </div>
+                    <hr>
+                    <?php endif;?>
                     <div class="form-group">
                         <label for="insertMediaDialogURL">URL</label>
                         <input type="text" class="form-control" id="insertMediaDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@@ -306,9 +352,17 @@ $( function() {
                 </div>
             </div>
         </div>
-    </div>        
+    </div>
+    <?php endif;?>
+    
 </div>
 <!-- Declare the base path. Important -->
 <script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script>
 <script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
 <script type="text/javascript" src="<?php echo site_url() ?>system/resources/js/media.uploader.js"></script>
+<script>
+  $('.the-img').click(function(e) {
+    $('#insertMediaDialogURL').val($(e.target).attr('src'));
+    $('#insertImageDialogURL').val($(e.target).attr('src'));
+  });
+</script>

system/admin/views/edit-page.html.php

@@ -63,6 +63,8 @@ if ($type == 'is_frontpage') {
     }
 }
 
+$images = get_gallery();
+
 ?>
 <link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
 <script src="<?php echo site_url() ?>system/resources/js/jquery.min.js"></script>
@@ -128,12 +130,32 @@ if ($type == 'is_frontpage') {
         </form>
     </div>
         
-    <style>
-    .wmd-prompt-background {z-index:10!important;}
-    #wmd-preview img {max-width:100%;}
-    </style>
+<style>
+.wmd-prompt-background {z-index:10!important;}
+#wmd-preview img {max-width:100%;}
+.cover-container {
+    height: 200px;
+    width: 100%;
+    white-space: nowrap;
+    overflow-x: scroll;
+    overflow-y: hidden;
+}
+.cover-item {
+    position: relative;
+    display: inline-block;
+    margin: 2px 2px;
+    border-top-right-radius: 2px;
+    width: 200px;
+    height: 150px;
+    vertical-align: top;
+    background-position: top left;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+</style>
+
     <div class="modal fade" id="insertImageDialog" tabindex="-1" role="dialog" aria-labelledby="insertImageDialogTitle" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-dialog modal-lg" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5>
@@ -142,6 +164,18 @@ if ($type == 'is_frontpage') {
                     </button>
                 </div>
                 <div class="modal-body">
+                    <?php if (!empty($images)) :?>
+                    <div class="form-group">
+                        <div class="row-fluid cover-container">
+                            <?php foreach ($images as $img):?>
+                                <div class="cover-item">
+                                    <img class="img-thumbnail the-img" src="<?php echo site_url() . $img['dirname'] . '/' . $img['basename']?>">
+                                </div>
+                            <?php endforeach;?>
+                        </div>
+                    </div>
+                    <hr>
+                    <?php endif;?>
                     <div class="form-group">
                         <label for="insertImageDialogURL">URL</label>
                         <input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@@ -163,3 +197,8 @@ if ($type == 'is_frontpage') {
 <!-- Declare the base path. Important -->
 <script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script>
 <script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/editor.js"></script>
+<script>
+  $('.the-img').click(function(e) {
+    $('#insertImageDialogURL').val($(e.target).attr('src'));
+  });
+</script>

system/includes/functions.php

@@ -170,6 +170,22 @@ function get_category_folder()
     return $_dfolder;
 }
 
+// Get images in content/images folder
+function get_gallery() {
+    static $_gallery = array();
+    if (empty($_gallery)) {
+        $tmp = array();
+        $tmp = glob('content/images/*', GLOB_NOSORT);
+        if (is_array($tmp)) {
+            foreach ($tmp as $file) {
+                $_gallery[] = pathinfo($file);
+            }
+        }
+        usort($_gallery, "sortfile");
+    }
+    return $_gallery;
+}
+
 // usort function. Sort by filename.
 function sortfile($a, $b)
 {

system/resources/js/media.uploader.js

@@ -4,6 +4,8 @@
 
     var dialogClose = function() {
         $('#insertMediaDialog').modal('hide');
+        $('#insertImageDialogURL').val('');
+        $('#insertImageDialogFile').val('');
         $('#insertMediaDialogURL').val('');
         $('#insertMediaDialogFile').val('');
     };