Photography galleries: best solution?

[PhotoWebMax]

Is it hard to upgrade PHP within MAMP? I have always downloaded new additions of MAMP and just add production projects to the new htdocs folder. I think I have four versions of MAMP on my Mac...

For now I am getting reacquainted with the FancyBox jQuery script: creating a super basic static html page with the simplest gallery I can formulate. From there I am hoping to add the FancyBox script to the PW gallery template I am working with. I am expecting some bumps along this road but I am sure I will get there eventually...

I really appreciate all the input though!

[gebeer]

The image name gets changed because PW makes a cached version of your image that gets the dimensions appended to the name.

Why is the different name of the thumb image a problem? Do you want to use it on the page as a caption?

Is the PW version of the example image a resized output, like bathroom.1000.0.jpg?

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.

This is because you are using

$photo->size(1000,$options)

As adrian said, with size() you will have to use width and height (sorry for giving you wrong example code above).

If you change this to

$photo->width(1000,$options)

and your options array to

$options = array(
'quality' => 100,
'upscaling' => false
);

Then you get the desired effect.

Please have a read through: https://processwire.com/api/fieldtypes/images/

It's all in there.

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

It can't be responsible because it's code is not executed if you don't call the photoSwipe plugin in your template. You most likely get a JS error in your console.

[horst]

Is it hard to upgrade PHP within MAMP? I have always downloaded new additions of MAMP and just add production projects to the new htdocs folder. I think I have four versions of MAMP on my Mac...

just ignore the buggy php version for the moment. Replace the ImageSizer.php from your current local pw installation, (you find it under wire/core/), with the attached one and PW will work fine and do no harm to your images.

After that, you need to read on under the link others have provided here already. This is essential for you!

BTW:

My personal opinion is, that the default settings in site/config.php for $config->imageSizerOptions are very well set for the rest of the world, but not for photographers or photography sites.

I leave the default settings unchanged for all other sites, but for photography sites I use:

$config->imageSizerOptions = array(
	'upscaling' => false,     // upscale if necessary to reach target size?
	'cropping' => false,      // crop if necessary to reach target size?
	'autoRotation' => true,   // automatically correct orientation?
	'sharpening' => 'soft',   // sharpening: none | soft | medium | strong
	'quality' => 94,          // quality: 1-100 where higher is better but bigger
	);

And than in the templates have to pass an individual options array to size() if I need cropped images.

PS: on your site under about you are showing a really nice collection of toys On the third tripod from left, is it a Bronica?

With films I have used 4x5 and 13x18 cm large formats or 6x6 all the times. Now mostly using a phaseone digital back together with large format arcaswiss or adapted to a modified Bronica SQAi.

[PhotoWebMax]

Horst,

Thanks for the input! I will try your suggestions. 

Well spotted: that is a Bronica. The 6x7 GS1 to be exact. I really do not shoot much film any more. I did build a nice Polaroid 180 recently though. As soon as I finished the project I heard the sad news that Fuji is discontinuing the black and white instant film that everyone uses, namely FB3000. My main addiction is lenses. I think I have over 20 lenses for my Canon DSL systems. For a while there I was adapting the best of the old Minolta, Pentax and Olympus lenses to the Canon EOS mount. I was also one of the main moderators at cinema5d.com, a film making site that focussed on DSLR systems. I helped champion their use and promoted interest in adapting 50-year-old lens technology with modern cameras. 

Generally speaking I am suspicious of any script that changes image pixels from a server. I cant tell you how many times I have handed client images over only to then see how mangled and blurry they become after being "served" by some script that I have no control over...

[PhotoWebMax]

This is the current state of my photos.php template:

<?php include("./head.inc"); 
$options = array(
'quality' => 100,
'upscaling' => false
); ?>
 
<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->width(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: "false"
		});		
	});
});
</script>
 
<?php include("./foot.inc"); ?>

There are a few container divs in this code that I really do not need scenically. 

I then downloaded the FancyBox jQuery lightbox script. There is quite a lot of stuff in this download folder with a lot of code samples. To make things super simple I created a very basic html page to get FancyBox working in its most basic form. The standalone (not part of my PW install) html file looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Fancybox test</title>
	<!-- Add jQuery library -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	
	
	<!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="scripts/jquery.fancybox.js"></script>
	<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" media="screen" />
	
	<!-- Optionally add helpers - button, thumbnail and/or media -->
	<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
	<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
	<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$(".fancybox").fancybox();
		});
	</script>

</head>

<body>
<h1>Testing</h1>
<p>Stunning paragraph goes here</p>
<p>
	<a class="fancybox"  rel="group" href="images/cube.jpg"><img src="images/cubeTeaser.jpg" alt="" /></a>
     <a class="fancybox"  rel="group" href="images/midget.jpg"><img src="images/midgetTeaser.jpg" alt="" /></a>
	</p>
</body>
</html>

The next thing is to add the FancyBox system to my PW photos.php template. This will replace the photoSwipe script call at the bottom of the template. I will to customize the jQuery script call so that it triggers the images I upload to the gallery page. CSS classes are part of this: note I am using the class="fancy box" and rel="group" for my images in the test html file. I am also assuming that there is some extra PHP needed to run the gallery page pagination from within PW? I am pretty sure 100% positive I need help with this...