Permalink
Browse files

Plugin: Photo Albums

Added photo albums plugin.
ToDo: cleanup rendering. Add caching. Add thumbnail support.

Instructions (after adding plugin, and enabling):
- In your content directory, create a directory named 'albums'
- In your new albums directory, create another directory. This is your
Album title.
- In this directory, create an index.md. This is the description of
your Album. For example, it's what you are reading right now.
  • Loading branch information...
antijingoist committed Apr 25, 2016
1 parent 9eae2c8 commit 3d32566f06216fb59a30be5f0d334bc7778692af
@@ -0,0 +1,75 @@
<?
register_page("albums", 'index.php?p=albums');
register_text_engine("albums", "albums/album_page.php");
register_stylesheet(sculpt_system("plugin_path") . "albums/album_styles.css");
register_script(sculpt_system("plugin_path") . "albums/album.js");
function album_categories_list($active_album) {
$directory = sculpt_system("content_path") . 'albums';
$page_data = '';
$page_data .= '<ul>';
if (file_exists($directory)){
$categories = glob($directory . '/*' , GLOB_ONLYDIR);
foreach ($categories as $category) {
$category_parts = pathinfo($category);
$category_name = $category_parts['filename'];
if (!($active_album)) {
$active_album = $category_name;
}
if ($category_name === $active_album) {
$category_class = "active_tab";
} else {
$category_class = "inactive_tab";
}
$page_data .= '<li class="' . $category_class . '"><a href=index.php?p=albums&sac=' . $category_name . '>' . ucfirst($category_name) . '</a></li>';
}
}
$page_data .= '</ul>';
echo ($page_data);
return $active_album;
}
function album_content($category_name) {
$page_data = "";
$photos_directory = sculpt_system("content_path") . 'albums/' . $category_name;
if($category_name){
if(file_exists($photos_directory)) {
$page_data .= '<h2>' . ucfirst($category_name) . '</h2>';
if (file_exists($photos_directory . '/index.md')) {
echo $page_data;
sculpt_parse_markdown_file($photos_directory . '/index.md');
$page_data = "";
}
$page_data .= '<div id="photos">';
$photos = glob($photos_directory . '/*.{png,PNG,jpg,JPG,jpeg,JPEG,gif,GIF}', GLOB_BRACE);
foreach ($photos as $photo) {
$photo_info = pathinfo($photo);
$photo_name = $photo_info['filename'];
$page_data .= album_image_thumb($photo, $photo_name);
}
$page_data .= '</div>';
echo $page_data;
}
} else {
}
}
function album_image_thumb($image_path, $image_name) {
$thumbnail_piece = '';
$thumbnail_piece .= '<div class="thumbnail">' .
'<div class="image">' .
'<a onclick="showLightbox(\'' . $image_path . '\')">' .
'<img class="thumb" src="' . $image_path . '"/></a></div>' .
'<div class="caption">' . $image_name . '</div></div>';
return $thumbnail_piece;
}
?>
@@ -0,0 +1,15 @@
$(document).ready(function() {
$('#lightboxPhoto').click(function() {
$('#lightbox').css("display", "none");
});
});

function showLightbox(imgUrl) {
var image;

if (imgUrl) {
image = '<img class="fullPhoto" src="' + imgUrl + '" alt="" />';
$("#lightboxPhoto").html(image);
$("#lightbox").css("display", "inline");
}
}
@@ -0,0 +1,14 @@
<? $album_cat = _INPUT("sac", ""); ?>
<div id="lightbox">
<div id="lightboxPhoto">
</div>
<div id="lightboxCaption">
(Click image to close)
</div>
</div>
<div class="sc_album_cat">
<? $current_album = album_categories_list($album_cat); ?>
</div>
<div class="sc_album_content">
<? album_content($current_album); ?>
</div>
@@ -0,0 +1,112 @@
.sc_album_content {
display: inline-block;
}

.sc_album_cat {
display: block;
width: 100%;

border-bottom: 1px solid rgba(0, 0, 0, 0.46);
}

.sc_album_cat li {
display: inline-block;
list-style-image: none;
list-style: none;
text-align: center;
padding: 0px 6px;
border: 1px solid rgba(0, 0, 0, 0.25);
background: rgba(0, 0, 0, 0.23);
}

.sc_album_cat li a{
text-decoration: none;
color: inherit;
}

.sc_album_cat li.active_tab {
background: none;
}

.sc_album_cat li:before {
content:"";
}

.sc_album_cat ul {
display: inline-block;
}

img.thumb {
max-width: 320px;
width: 90%;
margin: 3px;
}

#photos {
width: auto;
margin: 0 auto;
text-align: center;
}

#photos .thumbnail:hover {
/* border: 1px solid black; */
box-shadow: 1px 1px 11px rgba(0, 0, 0, 0.77);
transform: rotate(3deg);
}

#photos .thumbnail:hover:nth-child(even) {
transform: rotate(-3deg);
}


#photos .thumbnail {
width: 320px;
max-width: 90%;
margin: 5px 5px;
text-align: center;
background: white;
display: inline-block;
border: 1px solid rgba(0, 0, 0, 0.25);
padding-bottom: 6px;
}

#photos .thumbnail .image {
background: white;
}

#photos .thumbnail .caption {
background: white;
color: black;
}

#photos .thumbnail .caption a {
color: black;
}

#lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: black;
background: rgba(0,0,0, .7);
width: 100%;
height: 100vh;
text-align: center;
}

#lightboxPhoto {
margin: 0 auto;
}

#lightboxCaption {
color: white;
}

.fullPhoto {
max-width: 90%;
max-height: 90vh;
margin: 0 auto;
border: 3px solid white;
}

0 comments on commit 3d32566

Please sign in to comment.