Photography galleries: best solution?

[PhotoWebMax]

Hi All,

Moving onto the next stage of learning PprocessWire: photo galleries...

I am NOT a coder so I need something simple to get going if possible.

Requirements: 

* jQuery script like Fancybox or Colorbox, etc

* Image file uploader from the PW admin system (front end) would be nice, but I am ok with uploading the images to the server via FTP if I have to.

* Must have control over the generated thumbnail size. This is critical. The full-size images will be set by hand using Photoshop. 

* Access to the grid presentation of gallery thumbnails via a CSS file. 

* Pagination: ability to have a single page presenting one gallery of images or a page presenting multiple galleries on a single page. 

* Fast load times.

* Ability to include image title names and captions OR the ability to not include titles and captions. 

Any obvious choices for me to explore here? I have seen a few threads that highlight some options but I thought I would present this question in detail as it might be good for others to follow in the future...

Thanks!

[Macrura]

* jQuery script like Fancybox or Colorbox, etc

* Image file uploader from the PW admin system

* Must have control over the generated thumbnail size.

* Access to the grid presentation of gallery thumbnails via a CSS file. 

* Pagination: ability to have a single page presenting one gallery of images or a page presenting multiple galleries on a single page. 

* Fast load times.

* Ability to include image title names and captions OR the ability to not include titles and captions. 

i can confirm that processwire can handle all of the above requests with no problem (you could practically say that PW excels at all of these things)... just set it up and go!

[kongondo]

Requirements: 
 
* jQuery script like Fancybox or Colorbox, etc

PW won't get into your way. It doesn't care what you use. You could use Mootools if you wanted to (does that still exist, btw?). So, yes, use whatever you wish. But you need to include the script yourself

* Image file uploader from the PW admin system (front end) would be nice, but I am ok with uploading the images to the server via FTP if I have to.

You can do both. For frontend, there's loads of examples on the forums about (see also Soma's Gists..). With frontend, the more important thing is security....
 
* Must have control over the generated thumbnail size. This is critical. The full-size images will be set by hand using Photoshop.

Yep. Right out of the box. See here...
 
* Access to the grid presentation of gallery thumbnails via a CSS file. 

Like I have said (previously)...PW doesn't generate or output markup. So, you can output whatever you wish with whatever CSS you wish. PW doesn't know or care so to speak
 
* Pagination: ability to have a single page presenting one gallery of images or a page presenting multiple galleries on a single page. 

Pagination...right out the box...See here
 
* Fast load times.

Excuse me? Oh, OK, what Macrura said
 
* Ability to include image title names and captions OR the ability to not include titles and captions. 

See here. echo $page->image->url; echo $page->image->description, etc, etc for what you want to show. If you don't what to show them, don't echo them. There are other techniques (yes, the dreaded PHP!) - e.g. echo description only when it is not empty...We can show you how to do that....Also, there's no image title per se, but there's ways round that...

Note: In the above "image" examples, this is just echoing out a custom image field called image. There is no field in ProcessWire called image (or anything else actually). Like any other field, you give your image field whatever name you wish (within acceptable fields' naming conventions, of course). So, this could well have been echo $page->photo, etc. Final thing, you can have either a single image field or a multiple images field. For the latter, that's an array...As with all arrays..you need to foreach (loop) through it to output stuff. There are other stuff like echo $page->photo->first() but that's for later 

Edited April 19, 2014 by kongondo

[PhotoWebMax]

I tried using the ImagesManager module. I got the module working. I could upload images and see them in the module, but no images or thumbs appear on the desired front end page... Not sure if this is the best solution for me?

I will look into your suggestions first Kongondo...

Being able to manage image galleries is an absolute must for me. If I don't connect with the system that I use with PW to manage image galleries then its a total deal breaker. I am a photographer so this is a critical factor for me... 

[PhotoWebMax]

... just set it up and go!

Ah, but the devil is always in the details...

[Craig]

Ah, but the devil is always in the details...

That's true

Let me give you a bit of detail on how I created this photo section.

There are two main templates - photos, and photos_index. They have the following fields:

1. photos_index (fields: title, headline, summary)
2. photos (fields: title, summary, photos)

"photos" is a standard "Image" field type which allows multiple images and descriptions.

The page tree looks like this:

• Photos (template: photos_index)
  • 2 Star March (template: photos)
  • Easter Training Camp (template: photos)
  • ...

Each gallery/album/collection/folder of photos (whatever terminology you're most comfortable with) is just a page that uses the photos template. Within that template, there is an image field that will hold all the images, with the ability to add a description for each one.

Nothing will happen on the website without the code - the code that takes the data from the page and transforms it into nice, clean HTML markup for the browser to interpret.

View the code for both of the templates.

The photos_index template (the parent page, remember) gets the child pages (each album/gallery...). For each one it finds, it will create the link to it, and use the first image from the photos field of album as the thumbnail.

The photos template works in a similar way, but one level deeper. First it shows the album's title and summary content if present. Then it gets all the images added to the "photos" field of the current page. For each one it finds, it will create a link to the large size, and display a thumbnail. At the end, there is some javascript that tells the Photoswipe jQuery plugin to activate.

Does that help you get any further towards what you're after?

[PhotoWebMax]

Thanks Craig,

I have to run to a wine tasting but I will look this over very carefully. 

I did try a couple of threads detailed in the forums but could not get any images or thumbs to appear on the front end page. I might be rushing through the process or missing some steps though...

Max 

[Craig]

I have to run to a wine tasting but I will look this over very carefully.  

I'm not sure if that's going to help or hinder your learning journey with ProcessWire... Enjoy!

Yes, it's possible... one of the best methods is to just work though things slowly, one bit at a time. Ideally when you have enough time to take things in and generally "mess around" with your install. Then it should all start falling in to place.

[PhotoWebMax]

OK Craig I am back.

I set up the photos & photos_index templates, added the fields and created a new Portfolio test page using the photos template. I then dragged in some photos and got a vertical row of thumbnails on the page! This is progress: we have images.

The thumbnails are huge though. The image quality of the thumbnails and the full size images displayed is really awful: very blurry. I reset the size of the thumbs in the photos template to 100x100 pixels. I then trashed the images I had uploaded to the page and added some more. The thumbs are now a better size (to my liking) but the image quality of the thumbs and full size images are still really lousy.

Also, the thumbs, when clicked on, will take you to a new blank page where only the full size image gets presented. I am sure that this is due to me not installing the Photoswipe jQuery plugin yet. There is also not any CSS happening as well. I can deal with the CSS later. Fortunately I am ok with CSS.

But, I would prefer to use the FancyBox jQuery script to present the thumbs and full size images. Is that difficult? Any idea why the thumbs and full size  images are so blurry? 

Thanks so much!

Max

[gebeer]

Hi Max,

can you provide us with a link to the page or source code of the page, including css?

The images might be blurry because their actual proportions don't match the displayed proportions. By default, PW doesn't change anything about the uploaded images if you do not tell it to do so.

In your images field setup in the backend, do you have any dimension restrictions there?

You can adjust the quality of your thumbnails with an options array that you pass on to the resize function:

$x = 100;
$options = array(
'quality' => 100,// adjust quality here
'upscaling' => false,
); 
$thumb = $image->width($x, $options);

For more info see here.

For fast page loading I suggest using a jQuery lazy load plugin.

[PhotoWebMax]

Gebeer (love your avatar by the way),

I am just following Craig's generous solution. I used his code for the two templates he presented. Check his link to the code for the two templates.

After not liking the big thumbnail size I modified the size in the templates. I did flush the original image uploads and started fresh with new images, but the image quaintly is still awful. I have done nothing about adding any specific CSS to the gallery presentation. 

These problems aside I like how the backend PW admin system uploads images. I never really need to upload a ton of images into any gallery at one time so any extra robust upload system is overkill for me. Managing galleries in MODx Revo is sort of a pain in comparison. I added a lot of extra functionality to the MODx Revo Gallery system to get it to perform like I want. I am pretty picky with my gallery presentation. 

If I can get the PW system to match the original image quality of my Photoshop files with decent thumbs then I will be happy. I like the FancyBox script. I am sure that some of you PW pros must think I am a hamstrung newbie with silly issues, but I did help/collaborate with the developer of the FancyBox script (which is now hugely popular) with graphics and CSS several years ago... 

[gebeer]

OK, so in Craigs photos.php and photos_index.php add this at the top:

<?php include("./head.inc"); 
$options = array(
'quality' => 100
); ?>

And change every instance of

$photo->size(1024)...
$photo->size(260,260)...

to

$photo->size(1024,$options)...
$photo->size(260,260,$options)...

This ensures that the thumbnails are generated in the best quality possible.

If the resulting quality is not good enough (you said you were picky about that) you still have the option to generate the thumbs through Photoshop and include a separate thumb-images field into your page template where you upload them. You only would have to make sure then, that both thumbnails and images are in the same order.

Maybe you can attach a screenshot of the resulting page or, even better, one of the generated thumbnails on that page so we can see what you mean by "blurry".

[pwired]

Here some good gallery tuto's / examples :

Brought to you by Joss directly from Processwire:
https://processwire.com/talk/topic/3046-simple-gallery-tutorial-for-processwire/
http://wiki.processwire.com/index.php/Simple_Gallery_System

Owl
https://github.com/OwlFonk/OwlCarousel
http://www.owlgraphic.com/owlcarousel/#how-to
http://www.owlgraphic.com/owlcarousel/#faq

Steven
http://bxslider.com/
http://bxslider.com/faqs

Martin:
http://tutorialzine.com/2009/09/cool-jquery-gallery/
http://tutorialzine.com/2009/11/hovering-gallery-css3-jquery/

With processwire's template system and fields
html, css and js will just fall in place.

[horst]

Hey PhotoWebMax,

here are some photography sites build with pw: http://processwire.com/about/sites/categories/photography/

According to some points here in the posts it sounds to me that it would be the best way for you to upload your photoshop images in the size you want to show them in your gallery. This way you can call the original images and resizing isn't needed.

The other thing is, if you use Thumbnails module together with PageImage Manipulator, you have visual control over the quality and sharpening of the thumbnails.

[PhotoWebMax]

This is what the modified photos.php looks like:

<?php include("./head.inc"); 
$options = array(
'quality' => 100
); ?>
 
<div class="grid_12 content">
	
	<h1><?php echo $page->title ?></h1>
	
	<p><?php echo $page->summary ?></p>
 
	<div class="photo-wrapper clearfix photos">
 
		<?php $photos = wire("page")->photos; ?>
		
		<?php foreach ($photos as $photo): ?>
 
		<div class="photo single">
			<a href="<?php echo $photo->size(1000,?options)->url ?>" title="<?php echo $photo->description ?>">
				<img class="max-img border-primary" src="<?php echo $photo->size(100,100,?options)->url ?>" alt="<?php echo $photo->description ?>">
			</a>
		</div>
		
		<?php endforeach; ?>
		
	</div>
	
</div>
 
<script>
Q.push(function() {
	$(document).ready(function() {
		var photoswipe = $(".photos a").photoSwipe({
			enableMouseWheel: false,
			enableKeyboard: true,
			allowUserZoom: false,
			imageScaleMethod: "fitNoUpscale"
		});		
	});
});
</script>
 
<?php include("./foot.inc"); ?>

But when I go the front end page I get this:

Parse Error: syntax error, unexpected '?' (line 19 of /Applications/MAMP/htdocs/ProcessWire-SREP/site/templates/photos.php) 

This error message was shown because you are logged in as a Superuser. Error has been logged.

Line 19 reads like this: <a href="<?php echo $photo->size(1000,?options)->url ?>" title="<?php echo $photo->description ?>">

Is there an error in there somewhere? 

For now I want to create my own full size images in Photoshop. The longest dimensions will be 1000px. To get this going I want the PW system to generate 100x100px thumbnails.

Also, is now  good time to remove the function call to the photoSwipe script and replace it with FancyBox?

Thanks!

[PhotoWebMax]

Also, at the bottom of the photos.php we have:

<script>
Q.push(function() {
	$(document).ready(function() {
		var photoswipe = $(".photos a").photoSwipe({
			enableMouseWheel: false,
			enableKeyboard: true,
			allowUserZoom: false,
			imageScaleMethod: "fitNoUpscale"
		});		
	});
});
</script>

even though I have not added the actual photoSwipe script to the server scripts folder is the imageScaleMethod responsible for the blurry images?

[adrian]

The error is because you have ?options instead of $options

[PhotoWebMax]

Oops!

Ok, the photos.php is now this:

<?php include("./head.inc"); 
$options = array(
'quality' => 100
); ?>
 
<div class="grid_12 content">
	
	<h1><?php echo $page->title ?></h1>
	
	<p><?php echo $page->summary ?></p>
 
	<div class="photo-wrapper clearfix photos">
 
		<?php $photos = wire("page")->photos; ?>
		
		<?php foreach ($photos as $photo): ?>
 
		<div class="photo single">
			<a href="<?php echo $photo->size(1000,$options)->url ?>" title="<?php echo $photo->description ?>">
				<img class="max-img border-primary" src="<?php echo $photo->size(100,100,$options)->url ?>" alt="<?php echo $photo->description ?>">
			</a>
		</div>
		
		<?php endforeach; ?>
		
	</div>
	
</div>
 
<script>
Q.push(function() {
	$(document).ready(function() {
		var photoswipe = $(".photos a").photoSwipe({
			enableMouseWheel: false,
			enableKeyboard: true,
			allowUserZoom: false,
			imageScaleMethod: "fitNoUpscale"
		});		
	});
});
</script>
 
<?php include("./foot.inc"); ?>

I get the thumbs (still blurry) but when you click on a thumb it takes you to a blank page but it only shows 1000x1px of the photo? The height is only 1 pixel.  The page produces a URL of:  http://localhost:8888/ProcessWire-SREP/site/assets/files/1009/master_deck.1000x1.jpg

[adrian]

Please have a read through this:

https://processwire.com/api/fieldtypes/images/

You must specify both dimensions if you use size. You are only specifying one. Otherwise you should use ->width or ->height instead.

[PhotoWebMax]

Here is a sample of one of the photos I am uploading to the page:

You can see how blurry the image looks once it goes through the PW system. The thumbnail looks even worse.

I did change size to width like Adrian suggested and I get the full image on the page now. One thing I noticed is that the name of the image gets changed, it adds the dimensions to the file name? Bathroom.jpg becomes Bathroom.1000x0.jpg. Don't want that to happen.

The other issue is if I set a desired width of say 1000px then every image will be set to 1000 pixels. This is ok for horizontal images but produces huge vertical images that are bigger than the original file. 

[adrian]

Regarding the issue of images getting sized larger than original, go back to that documentation page and read about setting upscaling to false.

As far as the blurry images goes, check out this post:

https://processwire.com/talk/topic/6077-reduced-image-quality-of-images-added-to-image-fields/

and any of the links/advice from horst. It may be due to a bug in your version of PHP.

[PhotoWebMax]

This is the site I am attempting to replicate in ProcessWire:

http://www.seattlerealestatephotography.com

I would like to refresh this site and add new content. The gallery system is a major component to this site. It took me quite some time to get it working like I wanted. 

This site is built with MODx Revo. One of the snippets (MODx term for module) is called Gallery. I could never get Gallery to present and paginate my galleries like I wanted. I found a guy who had the same issue and he added a Colorbox and a jQuery Asynchronous Image Loader (JAIL) system which seems to work well. This gets added on top of the MODx Gallery snippet. I am also using a custom TV (template variable) to add the gallery id number to the page that aggregates the different galleries. I adopted all this and it works. Some extra steps involved though. I built my own CSS for the presentation.

2013 was a rocky year for MODx it seems. One of the principal developers, Shaun McCormick, has left MODx completely. He built and maintained many of the most popular snippets in the MODx system, including Gallery. As my whole image gallery system has several moving parts in MODx I now find that some pieces get updated while others do not. Upgrading MODx itself seems to give me grief as some of the new code impacts stuff I am left hanging onto. I also feel a little uncertain as to where MODx is going as a project? The developers are desperate for money and are struggling to figure out what is needed to get the project into the same size arena as Wordpress and Drupal, etc. Growing pains I guess. 

The other issue is with sites I hand over to people. Some do their content management only intermittently and they forget the steps involved. I then have to repeat the lessons. The MODx Manager (admin) interface has way more complexity than what I am seeing with PW. PW seems cleaner and more intuitive. This alone is why I am thinking I would like to make the switch...

[Martijn Geerts]

It may be due to a bug in your version of PHP.

This is exactly what I was thinking. It's a pity that you discover this bug so early on. Most little bugs in PW are solved soon and ProcessWire is really stable.

[PhotoWebMax]

Guys,

I am running the most recent version of MAMP (not the PRO version) 3.03 and it looks like the PHP component is 5.5.10 if that helps...

[adrian]

So as horst says in that post I linked to, 5.5.10 is your problem. You can either upgrade to 5.5.11 or implement one of the fixes he describes. These fixes will be available in the dev version of PW shortly: https://github.com/ryancramerdesign/ProcessWire/pull/445