Image Gallery v.0.1

maxa11an · December 18, 2011

Well, this is my first template to PW - this very nice CMS!

It's a image gallery, that work with a simple admin-template, with current standard fields:

-title

-summary //little explanation of current gallery

-headline

-images

So here is the template code

--------------------------------------------------

<?php

/**
* Image gallery template
* named bildgalleri.php
* Created by Max Allan Niklasson a.k.a. rödgladan
* Share and use!
*/

include("./head.inc"); 
echo '<style>';
echo '.image-gallery .image-controls{border-bottom:1px solid #CCC;}';
echo '.image-gallery-desc {padding-left:10px;font-style:italic;}';
echo '.image-gallery .image-controls a{color:#FF9494 !important;}';
echo '.image-gallery .image-controls table{width:100%;padding:0px !important; margin:0px !important; border-collapse:collapse;}';
echo '.image-gallery .image-controls table tr td{width:29.99%;}';
echo '.image-gallery .image-controls table tr td.image-prev{text-align:left;}';
echo '.image-gallery .image-controls table tr td.image-thumbs{text-align:center;}';
echo '.image-gallery .image-controls table tr td.image-next {text-align:right;}';
echo '.image-gallery .image-viewer {padding-top:30px; text-align:center;}';
echo '.image-gallery .image-description {font-style:italic;}';
echo '.image-table {border-collapse:separate;border-spacing:10px;}';
echo '.image-table tr td{padding:10px 10px 4px 10px!important;border:1px solid #DCDCDC;text-align:center;vertical-align:middle;}';
echo '.image-table tr td a:hover{background-color:transparent !important;}';
echo '.image-table tr td p.table-desc{margin:0px !important;color:#CCC;}';
echo '</style>';
if(!$_GET['img']){
echo "<p class='image-gallery-desc'>{$page->summary}</p>";
//Get subgalleries
$numberPages = count($page->children);
if($numberPages) {
echo '<h3>Album under <i>'.$page->title.'</i></h3>';
echo '<table class="image-table"><tr>';
for($i = 0;$i < $numberPages;$i++){
	//To find sub images use this
	$subPage = $page->children('template=bildgalleri')->eq($i);
	//To just get the informationen of the relative sub gallery
	$nextPage = $page->children('template=bildgalleri')->eq($i);
	//The thumb to this gallery
	$cover = $subPage->images->first();
	if(!$cover){ //If no sub images is find, digg!
		$coverIsDef = false;
		//Search of childed images, and take the first found image
		while($coverIsDef===false){
			$whileSubPage = $subPage->children('template=bildgalleri')->first();
			$cover = $whileSubPage->images->first();
			if($cover)
				$coverIsDef = true;
			else
				$subPage = $whileSubPage;
		}
	}
	if($cover){ //When images is found, make thumb of it
		$coverThumb = $cover->size(140,140);
	}
	//Write out the nice image whit link
	echo "<td><a href='{$nextPage->url}'>
		<img src='{$coverThumb->url}' alt='{$nextPage->summary}' width='{$coverThumb->width}' height='{$coverThumb->height}' /><p class='table-desc'>{$nextPage->title}</p>
	</a></td>";
}
//Row break
if($i > 0 && $i % 4 == 0){echo'</tr><tr>';}
echo '</tr></table>';
}
//Get images to this gallery
$numberImages = count($page->images);
if($numberImages){
echo "<h3>Foton under <i>".$page->title."</i></h3>";
echo '<table class="image-table"><tr>';
for($i = 0;$i < $numberImages;$i++){
	$image = $page->images->eq($i);
	$thumb = $image->size(140,140); 	
	echo "<td><a href='?img={$image->name}'>
		<img src='{$thumb->url}' alt='{$thumb->description}' width='{$thumb->width}' height='{$thumb->height}' />
	</a></td>";
	//Row break
	if($i > 0 && $i % 4 == 0){echo'</tr><tr>';}
}
echo '</tr></table>';
}
}
//Image view of one image!
else{
$images = $page->images;
$image = $images->get($_GET[img]);
$nextImage = $image->getNext();
$prevImage = $image->getPrev();
$sizedImage = $image->size(700);
echo "<div class='image-gallery'>";
echo "<div class='image-controls'>";
echo "<table><tr>";
echo "<td class='image-prev'>".($prevImage != false ? "<a href='?img={$prevImage->name}'>":"")."Föregående".($prevImage != false ? "</a>":"")."</td>";
echo "<td class='image-thumbs'><a href='./'>Miniatyrer</a></td>";
echo "<td class='image-next'>".($nextImage != false ? "<a href='?img={$nextImage->name}'>":"")."Nästa".($nextImage != false ? "</a>":"")."</td>";
echo "</tr></table>";
echo "</div>";
echo "<div class='image-viewer'>";
echo "<img src='{$sizedImage->url}' />";
echo "<div class='image-description'>{$image->description}</div>";
echo "</div>";
echo "</div>";	
}
include("./foot.inc");

-----------------------------------------------------------

I also changed in the head.inc so the sub menu will not be printed if the template is "bildgalleri" (the name of my template).

if($page->template != 'bildgalleri')

Is there any way to clean it up, or ideas?

ryan · December 19, 2011

Welcome to the forums! Thanks for posting and sharing your template. It looks like you've put together a nice template and I like the output it produces!

Is there any way to clean it up, or ideas?

There are always ways to improve something, and how far you take it really depends other factors. The factors here would be no different than in any other PHP script. For instance, the example you posted could be improved by moving the styles to their own css file, moving the code into functions (or even a class), providing more (or full) separation between output and logic code and moving the output variables (like image size, template names, text labels) to some easily changeable constants or variables at the top. Lastly, unrelated to PHP, but you could use $input->urlSegment(n) instead of a GET var so that your pages could be cached. Or, if you want to use GET vars, then use PW's $input->get rather than PHP's $_GET. But so long as something is secure and meets your needs and those that will be maintaining it, then you are in a good place. If you are building something that you'll be reusing or others will, then it's good to go further with some of these practices. But ultimately PW is here to support your work rather than define it for you. If there were two immediate changes I would suggest, it would be to figure out how to get your styles out of your template file and into their own CSS file, and replace this:

$image = $images->get($_GET[img]);

with this:

$image = $images->get($sanitizer->name($input->get->img));

The above is just a security best practice to make sure that any user input is appropriately sanitized before being sent anywhere else.

maxa11an · December 20, 2011

Thanks! Well, I must say, very good CMS framework!

Now I have changed and cleaned!

<?php 

/**
* Image gallery v.0.2 template
* named bildgalleri.php
* Created by Max Allan Niklasson a.k.a. rödgladan
* Share and use!
*/
$labels = (object) array(
'subAlbums' 	=>	 'Album under',
'subPictures'	=>	 'Foton under',
'prev' 		=>	 'Föregående',
'next' 		=>	 'Nästa',
'thumbs' 		=>	 'Miniatyrer'
);
//breakLine after x-numbers loops
function ImageGallery(Page $page,$breakLine=4){
$return_alb = Array();
$return_img = Array();
$numberImages = count($page->images);
$numberPages = count($page->children);

//Process the albums
for($i = 0;$i < $numberPages;$i++){
	//To find sub images use this
	$subPage = $page->children('template=bildgalleri')->eq($i);
	//To just get the informationen of the relative sub gallery
	$nextPage = $page->children('template=bildgalleri')->eq($i);
	//The thumb to this gallery
	$cover = $subPage->images->first();
	if(!$cover){ //If no sub images is find, digg!
		$coverIsDef = false;
		//Search of childed images, and take the first found image
		while($coverIsDef===false){
			$whileSubPage = $subPage->children('template=bildgalleri')->first();
			$cover = $whileSubPage->images->first();
			if($cover)
				$coverIsDef = true;
			else
				$subPage = $whileSubPage;
		}
	}
	if($cover){ //When images is found, make thumb of it
		$coverThumb = $cover->size(140,140);
	}
	$linebreak = 0;
	if($i > 0 && $i % $breakLine == 0) $linebreak = 1;
	$ret = (object) Array(
		url 		=> 	$nextPage->url,
		title		=>	$nextPage->title,
		cover		=>	$coverThumb->url,
		name		=> 	$nextPage->name,
		description	=>	$nextPage->summary,
		linebreak 	=> 	$linebreak
	);
	array_push($return_alb,$ret);
}

//Process images
for($i = 0;$i < $numberImages;$i++){
	$image = $page->images->eq($i);
	$thumb = $image->size(140,140);
	$linebreak = 0;
	if($i > 0 && $i % $breakLine == 0) $linebreak = 1;
	$ret = (object) Array(
		url			=> '?img='.$image->name,
		thumb		=> $thumb->url,
		description => $image->description,
		linebreak 	=> $linebreak
	);
	array_push($return_img,$ret);
}

return (object) array(albums => $return_alb, images => $return_img);
}
function singleImage(Page $page,$image){
$images = $page->images;
$image = $images->get($image); 
$nextImage = $image->getNext();
$prevImage = $image->getPrev();
$sizedImage = $image->size(900);
if($image)
	return (object) array(
		next_image 	=> 	'?img='.$nextImage->name,
		prev_image	=> 	'?img='.$prevImage->name,
		url			=>	$sizedImage->url,
		description	=>	$image->description
	);
}
/*
* 
* 
* And now, print!
* 
* 
*/
include("./head.inc");
echo '<link rel="stylesheet" type="text/css" href="'.$config->urls->templates.'styles/bildgalleri.css" />';
echo '<div id="bodycopy-100">';
if(!$_GET['img']){
$gallery = ImageGallery($page,3);
echo "<p class='image-gallery-desc'>{$page->summary}</p>";
//Get subgalleries
if($gallery->albums){
	echo '<h3>'.$labels->subAlbums.' <i>'.$page->title.'</i></h3>';
	echo '<table class="image-table"><tr>';
	foreach($gallery->albums as $album){
		echo "<td><a href='".$album->url."'><img src='{$album->cover}' alt='".$album->name."' title='".$album->description."' /><p class='table-desc'>{$album->title}</p></a></td>";
		if($album->linebreak == 1)
			echo "</tr><tr>";
	}
	echo "</tr></table>";
}
//Get images to this gallery
if($gallery->images){
	echo "<h3>".$labels->subPictures." <i>".$page->title."</i></h3>";
	echo '<table class="image-table"><tr>';
	foreach($gallery->images as $image){
			echo "<td><a href='".$image->url."'><img src='".$image->thumb."' title='".$image->description."' alt='".$image->description."' /></a></td>";
		if($image->linebreak==1)
			echo "</tr><tr>";
	}
echo '</tr></table>';
}
}
//Image view of one image!
else{
$image = singleImage($page,$sanitizer->name($input->get->img));
echo "<div class='image-gallery'>";
echo "<div class='image-controls'>";
echo "<table><tr>";
echo "<td class='image-prev'>".(!$image->next_image ? "<a href='".$image->next_image."'>":"").$labels->prev.(!$image->next_image ? "</a>":"")."</td>";
echo "<td class='image-thumbs'><a href='./'>".$labels->thumbs."</a></td>";
echo "<td class='image-next'>".(!$image->prev_image ? "<a href='?img={$nextImage->name}'>":"").$labels->next.(!$image->prev_image ? "</a>":"")."</td>";
echo "</tr></table>";
echo "</div>";
echo "<div class='image-viewer'>";
echo "<img src='".$image->url."' />";
echo "<div class='image-description'>".$image->description."</div>";
echo "</div>";
echo "</div>";	
}
include("./foot.inc");

ryan · December 20, 2011

Nice update, thanks for posting!

thetuningspoon · March 20, 2012

This is just what I was looking for. Thanks, rödgladan!

However, I'm having an issue with the next and previous links. They're just showing as text instead of as actual links, and they don't do anything. Any ideas?

netcarver · March 28, 2012

This is just what I was looking for. Thanks, rödgladan!

However, I'm having an issue with the next and previous links. They're just showing as text instead of as actual links, and they don't do anything. Any ideas?

I'm trying this out and had the same problems. Fixed it by replacing this...

next_image	  =>	  '?img='.$nextImage->name,
prev_image	  =>	  '?img='.$prevImage->name,

...with...

next_image  => $nextImage->name,
prev_image  => $prevImage->name,

And then changing the code that generates links from...

else{
    $image = singleImage($page,$sanitizer->name($input->get->img));
    echo "<div class='image-gallery'>";
    echo "<div class='image-controls'>";
    echo "<table><tr>";
    echo "<td class='image-prev'>".(!$image->next_image ? "<a href='".$image->next_image."'>":"").$labels->prev.(!$image->next_image ? "</a>":"")."</td>";
    echo "<td class='image-thumbs'><a href='./'>".$labels->thumbs."</a></td>";
    echo "<td class='image-next'>".(!$image->prev_image ? "<a href='?img={$nextImage->name}'>":"").$labels->next.(!$image->prev_image ? "</a>":"")."</td>";
    echo "</tr></table>";
    echo "</div>";
    echo "<div class='image-viewer'>";
    echo "<img src='".$image->url."' />";
    echo "<div class='image-description'>".$image->description."</div>";
    echo "</div>";
    echo "</div>"; 
}

...to...

else{
$image = singleImage($page,$sanitizer->name($input->get->img));
?>
<div class='image-gallery'>
   <div class='image-controls'>
   	   <table><tr>
   	   	   <td class='image-prev'><?php if ($image->prev_image) echo "<a href=\"?img={$image->prev_image}\">{$labels->prev}</a>"; else echo " " ?></td>
   	   	   <td class='image-thumbs'><a href='./'><?= $labels->thumbs ?></a></td>
   	   	   <td class='image-next'><?php if ($image->next_image) echo "<a href=\"?img={$image->next_image}\">{$labels->next}</a>"; else echo " " ?></td>
   	   </tr></table>
   	   </div>
   	   <div class='image-viewer'>
   	   	   <img src="<?= $image->url ?>" />
   	   	   <div class='image-description'><?= $image->description ?></div>
   </div>
</div>
<?php
}

YMMV.

AnotherAndrew · April 12, 2012

Thanks for posting. This might come in handy. You should wrap this up and make a module. This would be perfect as a core module. This is something that I think PW is currently lacking.

What can I do to help make this a reality?

ryan · April 12, 2012

This would be perfect as a core module. This is something that I think PW is currently lacking.

Almost anything involving output of markup is not an ideal candidate for a core module (/wire/modules/), but always a great candidate for add-on modules (/site/modules/). The intention is that the PW core stays as markup independent as possible.

Sign In

Image Gallery v.0.1

Recommended Posts

maxa11an

Link to comment

Share on other sites

ryan

Link to comment

Share on other sites

maxa11an

Link to comment

Share on other sites

ryan

Link to comment

Share on other sites

thetuningspoon

Link to comment

Share on other sites

netcarver

Link to comment

Share on other sites

AnotherAndrew

Link to comment

Share on other sites

ryan

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

My Activity Streams

Support

Store

My Details