FbIN/htmly
1
0
Fork 0
mirror of https://github.com/danpros/htmly.git synced 2026-04-18 19:46:21 +05:30
Code Issues Projects Releases Packages Wiki Activity

Simple Image Gallery

Browse source 
Allows us to reuse previous uploaded images.
​
This commit is contained in:
danpros 2023-12-15 13:47:38 +07:00
commit 8020b606e2
7 changed files with 232 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

2
system/admin/editor/js/editor.js
View file

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

71
system/admin/views/add-content.html.php
View file

@ -25,6 +25,8 @@ if (file_exists($tagslang)) {
file_put_contents($tagslang, print_r($tmp, true)); 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"/> <link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
@ -193,12 +195,32 @@ $( function() {
</form> </form>
</div> </div>
<style> <style>
.wmd-prompt-background {z-index:10!important;} .wmd-prompt-background {z-index:10!important;}
#wmd-preview img {max-width:100%;} #wmd-preview img {max-width:100%;}
</style> .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 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-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5> <h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5>
@ -207,6 +229,18 @@ $( function() {
</button> </button>
</div> </div>
<div class="modal-body"> <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"> <div class="form-group">
<label for="insertImageDialogURL">URL</label> <label for="insertImageDialogURL">URL</label>
<input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" /> <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> </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 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-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="insertMediaDialogTitle"><?php echo i18n('Insert_Image');?></h5> <h5 class="modal-title" id="insertMediaDialogTitle"><?php echo i18n('Insert_Image');?></h5>
@ -235,6 +269,18 @@ $( function() {
</button> </button>
</div> </div>
<div class="modal-body"> <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"> <div class="form-group">
<label for="insertMediaDialogURL">URL</label> <label for="insertMediaDialogURL">URL</label>
<input type="text" class="form-control" id="insertMediaDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" /> <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> </div>
</div> </div>
<?php endif;?>
</div> </div>
@ -259,3 +306,9 @@ $( function() {
<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script> <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 type="text/javascript" src="<?php echo site_url() ?>system/resources/js/media.uploader.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>

50
system/admin/views/add-page.html.php
View file

@ -1,4 +1,5 @@
<?php if (!defined('HTMLY')) die('HTMLy'); ?> <?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"/> <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.min.js"></script>
<script src="<?php echo site_url() ?>system/resources/js/jquery-ui.min.js"></script> <script src="<?php echo site_url() ?>system/resources/js/jquery-ui.min.js"></script>
@ -56,12 +57,32 @@
</form> </form>
</div> </div>
<style> <style>
.wmd-prompt-background {z-index:10!important;} .wmd-prompt-background {z-index:10!important;}
#wmd-preview img {max-width:100%;} #wmd-preview img {max-width:100%;}
</style> .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 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-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5> <h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5>
@ -70,6 +91,18 @@
</button> </button>
</div> </div>
<div class="modal-body"> <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"> <div class="form-group">
<label for="insertImageDialogURL">URL</label> <label for="insertImageDialogURL">URL</label>
<input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" /> <input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" />
@ -90,4 +123,9 @@
</div> </div>
<!-- Declare the base path. Important --> <!-- Declare the base path. Important -->
<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script> <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>

70
system/admin/views/edit-content.html.php
View file

@ -74,6 +74,8 @@ if (file_exists($tagslang)) {
file_put_contents($tagslang, print_r($tmp, true)); 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"/> <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.min.js"></script>
@ -248,12 +250,32 @@ $( function() {
</form> </form>
</div> </div>
<style> <style>
.wmd-prompt-background {z-index:10!important;} .wmd-prompt-background {z-index:10!important;}
#wmd-preview img {max-width:100%;} #wmd-preview img {max-width:100%;}
</style> .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 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-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5> <h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5>
@ -262,6 +284,18 @@ $( function() {
</button> </button>
</div> </div>
<div class="modal-body"> <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"> <div class="form-group">
<label for="insertImageDialogURL">URL</label> <label for="insertImageDialogURL">URL</label>
<input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" /> <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> </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 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-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="insertMediaDialogTitle"><?php echo i18n('Insert_Image');?></h5> <h5 class="modal-title" id="insertMediaDialogTitle"><?php echo i18n('Insert_Image');?></h5>
@ -290,6 +324,18 @@ $( function() {
</button> </button>
</div> </div>
<div class="modal-body"> <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"> <div class="form-group">
<label for="insertMediaDialogURL">URL</label> <label for="insertMediaDialogURL">URL</label>
<input type="text" class="form-control" id="insertMediaDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" /> <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> </div>
</div> </div>
<?php endif;?>
</div> </div>
<!-- Declare the base path. Important --> <!-- Declare the base path. Important -->
<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script> <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 type="text/javascript" src="<?php echo site_url() ?>system/resources/js/media.uploader.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>

49
system/admin/views/edit-page.html.php
View file

@ -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"/> <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.min.js"></script>
@ -128,12 +130,32 @@ if ($type == 'is_frontpage') {
</form> </form>
</div> </div>
<style> <style>
.wmd-prompt-background {z-index:10!important;} .wmd-prompt-background {z-index:10!important;}
#wmd-preview img {max-width:100%;} #wmd-preview img {max-width:100%;}
</style> .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 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-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5> <h5 class="modal-title" id="insertImageDialogTitle"><?php echo i18n('Insert_Image');?></h5>
@ -142,6 +164,18 @@ if ($type == 'is_frontpage') {
</button> </button>
</div> </div>
<div class="modal-body"> <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"> <div class="form-group">
<label for="insertImageDialogURL">URL</label> <label for="insertImageDialogURL">URL</label>
<input type="text" class="form-control" id="insertImageDialogURL" size="48" placeholder="<?php echo i18n('Enter_image_URL');?>" /> <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 --> <!-- Declare the base path. Important -->
<script type="text/javascript">var base_path = '<?php echo site_url() ?>';</script> <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>

16
system/includes/functions.php
View file

@ -170,6 +170,22 @@ function get_category_folder()
return $_dfolder; 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. // usort function. Sort by filename.
function sortfile($a, $b) function sortfile($a, $b)
{ {

2
system/resources/js/media.uploader.js
View file

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