Gallery without lightbox & Co

[biber]

Hi,

up to now I've built my (static) websites with a simple editor, so I know the most important things about HTML and CSS. But I have no experience in php or other programming languages. In ProcessWire at last I found a CMS which looks transparent to me, but it's not easy to do the first steps.

With the help of Joss Sanglier's tutorial (thanks a lot) I was able to start the transcription of my first website.

Now my problem:

The site contains some galleries with thumbnail-pages from which a klick at one thumb shall open a new page with the image in original size, caption, additional textfields and  navigation-buttons (previous and next image, back to thumbs). I try to keep this as simple as possible, without lightbox, javascript & Co.

You may have a look at the original site http://malabu.de     and at my trial http://malabu.de/pw

Thanks

Guenter

[mr-fan]

you need a template for the single image...

in that template you show the single image and prev/next image in your gallery.

the simple gallery system don't fit this, but the functions could used.

have a look at this example:

https://processwire.com/talk/topic/772-image-gallery-v01/#entry6489

there is a singleImage function included that could used:

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

here is a link to prev next image links on a images field/page:

https://processwire.com/talk/topic/9144-how-can-i-make-working-links-prev-and-next-arrow-slide-links/#entry88426

and how to use the PW pagination on images from ryan:

https://processwire.com/talk/topic/390-images-pagination/#entry2928

regards mr-fan

[mr-fan]

But I have no experience in php or other programming languages.

You should at least know some basic PHP to work with ProcessWire. Take the time to learn the basics about variables, foreach, while and so on.

Your site is german so a easy to read and great tutorial documentation in german is from Peter Kropff:

http://www.peterkropff.de/site/php/php.htm

regards mr-fan

[biber]

You should at least know some basic PHP to work with ProcessWire. Take the time to learn the basics about variables, foreach, while and so on.

Your site is german so a easy to read and great tutorial documentation in german is from Peter Kropff:

http://www.peterkropff.de/site/php/php.htm

regards mr-fan

Hi mr-fan,

thanks for your reply and your advice to that very useful php-site. You are right: I prefer knowing and understanding what I am doing, not just klicking and copying around. And a text in german is much more easier to understand for me than one in english.

I will try to understand your code-snippets and use it for my project.

regards

Günter

[mr-fan]

If you like you can write me a PM in german - to clear open questions.

Welcome to processwire forum - be not afraid - asking for help here.

[biber]

Because I myself hate topics that end up in nothing, I will show here, how I built my gallery. This template file works for me:

<?php include('./_head.php'); // include header markup ?>

<div id='index'>

	<?php 
	
	// output 'headline' if available, otherwise 'title'
	echo '<h1>' . $page->get('headline|title') . '</h1>';
	
	// galerie.php template file
	// overview - and single image view

	//get all segments and clean segments!
	$seg1 = $sanitizer->pageName($input->urlSegment1);
	$seg2 = $sanitizer->pageName($input->urlSegment2);
	$seg3 = $sanitizer->pageName($input->urlSegment3);
	
	$images = $page->images;
	
	//normal content without first url segment!
if (!$seg1) {
	
	// output bodycopy
	echo $page->body; 
	
	// output images
	foreach($images as &$image) {
		$thumbnail = $image->height(100);
		echo '<div class="rahmen"><a href="'.$page->url . $image.'"><img class="thumb" src="'.$thumbnail->url.'" alt="'.$thumbnail->caption.'" title="'.$image->caption.'"></a></div>';
	}
	}

//check for the second urlsegment not needed
if ($seg2) {
	// unknown URL segment, send a 404
	throw new Wire404Exception();
}

//check for the third urlsegment not needed
if ($seg3) {
	// unknown URL segment, send a 404
	throw new Wire404Exception();
}

//special view output with an url segment...
if ($seg1) { 
	// get the image in the correspondent position:
	$index = $input->$seg1;
	$image = $page->images->index($index); 
	
	// Link zum vorigen Bild:
	echo '<a href="'.$images->getPrev($images->$seg1).'"><img src="'.$config->urls->site.'templates/styles/links.gif" title="voriges Bild"></a> ';
	
	// Link zur Thumbnail-Seite:
	echo '<a href="'.$page->url.'"><img src="'.$config->urls->site.'templates/styles/index.gif" title="zurück zur Übersicht"></a> ';
	
	// Link zum nächsten Bild:
	echo '<a href="'.$images->getNext($images->$seg1).'"><img src="'.$config->urls->site.'templates/styles/rechts.gif" title="nächstes Bild"></a><br />'; 
	

	// Bild zeigen:
	echo '<img src="'.$image->url . $seg1.'" alt="'.$images->$seg1->description.'" title="'.$images->$seg1->description.'">';

	// Textfelder zu den Bildern anzeigen:
	echo '<h3>'.$images->$seg1->caption.'</h3>';
	echo '<p>'. $images->$seg1->description. '<br />'
			.$images->$seg1->name_1.'<br />'
			.$images->$seg1->name_2.'</p>';
	}
?>
</div><!-- end content -->
<?php include('./_foot.php'); // include footer markup ?>

With many thanks to mr-fan, who very patiently introduced me to the basics of ProcessWire and PHP.

Günter

[Gerriet]

Hello all ;D

At first, sorry for my faults, so englisch is not my mother language.

Ok, that here is the best was I am read and very most awsome, so I say very thank you for that ;D

Greetings

Gerriet

http://gridblog.de

Edited June 29, 2015 by Gerriet