Jump to content

Gallery without lightbox & Co


biber
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 4 weeks later...

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

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...