Jump to content


Photo

Image Gallery v.0.1


  • Please log in to reply
8 replies to this topic

#1 maxa11an

maxa11an

    Newbie

  • Members
  • Pip
  • 9 posts
  • 1

  • LocationThe Westcoast of Sweden

Posted 18 December 2011 - 07:35 AM

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?  :)

Attached Thumbnails

  • The main gallery page.png
  • Selected_gallery_whithout_subimages_only_subgalleries.png
  • Only subimages to current gallery.png
  • Viewing an image.png


#2 ryan

ryan

    Reiska

  • Administrators
  • 7,797 posts
  • 6573

  • LocationAtlanta, GA

Posted 19 December 2011 - 10:42 AM

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.




#3 maxa11an

maxa11an

    Newbie

  • Members
  • Pip
  • 9 posts
  • 1

  • LocationThe Westcoast of Sweden

Posted 19 December 2011 - 07:58 PM

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"); 


#4 ryan

ryan

    Reiska

  • Administrators
  • 7,797 posts
  • 6573

  • LocationAtlanta, GA

Posted 20 December 2011 - 06:06 PM

Nice update, thanks for posting!

#5 everfreecreative

everfreecreative

    Sr. Member

  • Members
  • PipPipPipPip
  • 222 posts
  • 88

  • LocationCT, USA

Posted 20 March 2012 - 10:19 AM

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?

#6 netcarver

netcarver

    Hero Member

  • Members
  • PipPipPipPipPip
  • 541 posts
  • 507

  • LocationUK

Posted 28 March 2012 - 07:18 AM

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 "&nbsp;" ?></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 "&nbsp;" ?></td>
	   	   </tr></table>
	   	   </div>
	   	   <div class='image-viewer'>
	   	   	   <img src="<?= $image->url ?>" />
	   	   	   <div class='image-description'><?= $image->description ?></div>
	   </div>
</div>
<?php
}

YMMV.
Steve ☧

#7 AnotherAndrew

AnotherAndrew

    Sr. Member

  • Members
  • PipPipPipPip
  • 168 posts
  • 27

Posted 11 April 2012 - 08:22 PM

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?

#8 ryan

ryan

    Reiska

  • Administrators
  • 7,797 posts
  • 6573

  • LocationAtlanta, GA

Posted 12 April 2012 - 09:11 AM

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.

#9 jonicious

jonicious

    Newbie

  • Members
  • Pip
  • 3 posts
  • 0

Posted 09 October 2012 - 09:13 AM

Thanks rödgladan for sharing. I am using it for a project, but it doesn't look that good on smaller browsers like the iPhone. My idea was to only put three images in one row, so it would look better. I know, this is not the best solution.. Do you have better ideas or can help me, so it would look good on smaller browser?




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users