PhotoWebMax

Quick update: I set the thumbnail sharpening to "medium" and the sizes to 150x150 and there its a noticeable improvement. 

Thanks Guys.

I will try some experimentation today. 

What I did late last night was adjust the sharpening to "strong" inside the foreach code. I kept the size the same at 100x100 and uploaded a new image. It looks better, definitely better than before. I will try different sharpening levels at 120, 150, etc sizes and see how it renders. 

I am using the default PW install, no extra Modules for images and the thumbnails. Zeka, I am not even sure what GD or ImageMajick is? I am using the Lightbox2 jQuery script to present the gallery slide show, but the PW foreach statement is generating the thumbnails.

Some of the new gallery scripts I see create (or use) really large thumbnails in a tight grid system that then links to a traditional Lightbox display for the full size images. My own personal view is that presenting overly large thumbnails can result in viewers not to even bother with viewing the image images at their full size? Most server generated thumbnails will have some level of pixel changes and compression when compared to the full size images that might have been processed more carefully. 

I would be interested if there is way for the thumbnails to have extra resolution (for detail and crispness) for retina displays without making them larger (width x length)?

Thanks!

Hi All,

Getting back to a working project. I have a working image portfolio system that uses the Lightbox2 jQuery script. The gallery works fine, it displays the full size images well and loading them to the site via Processwire is ok. The issue is that the generated thumbnails are very blurry?

This is the relevant chunk of code I am using in my gallery template:

  foreach ($images as $image) {        
        // create/get image thumbs
        $thumb = $image->size(100,100,$options=array('sharpening' => 'none','defaultGamma' => -1,'quality' => 100,)); 

I initially had the thumbnail dimensions larger at 120x120 but reduced the size to what is show above. The page has reduced the size correctly but the quality of the thumbnails is still bad, quite soft. 

Is this a PW issue, an issue with my template code, or something I need to track down or adjust in the  Lightbox2 jQuery script?

Thanks!

Hi All,

I have a gallery system that runs on the Lightbox2 jQuery script. I want to add some flexibility with adding custom presentation to the produced thumbnails: padding, border colors, shadows, rollover affects, etc. What is the best method here? Adding code to the gallery template, or creating a container div and then adding new CSS to the <a> anchor tags for the thumbnails themselves? 

Thanks!

Thanks for that...

Before CMS systems became a "thing" I was pretty active in designing and working with modern web standards static sites. But my day job was photography. I tried a bunch of systems before setting on the first branch of MODx, namely Evo. The thing I liked about MODx was that it was easier to design custom sites that fit into the structure. What was confusing to me (and many others) was the reliance on system syntax specific "chunks"  and a hard to to grapple navigation system. Wayfinder was powerful but a pain. Kongondo was one of THE best MODx contributors back then. Especially with helping to build the community knowledge and comfort level with creating flexible and complicated connections between pages. But I sort of felt that the creation of the new branch of MODx, namely Revo, made the whole thing sort of awkward? The two different branches happening at the same time, etc. It changed the focus, and key guys went in new directions.

Processwire wire is a vastly superior product. I can still design things on paper and use the very flexible template and field combination without fighting the whole structure. My issue has been a long standing limitation: I just could never learn to code PHP and Javascript, etc. I tried but just never gave it the commitment required. For many these skills come easily. Not for me. 

Looking back one of my frustrations with my early MODx days was getting elegant looking dynamic image galleries to work. I guess some things never change? MaxiGallery had promise but it was a pain to work with. The cool thing with Concrete5 is that it comes with a nice paginated and functioning gallery system, plus a blog system, etc, all without having to use a front end plus a back end editing routine. But the issue is how easy is it to customize a theme or deploy a custom design? There is always a road block with any system it seems. 

The other thing I like about Processwire is the size of the whole project and the community. Wordpress and Drupal have massive numbers but that can add confusion, too many choices and doubts as to how long the widget you are deploying will be actively maintained. Some systems have too little community evolvement and support. Processwire just has a nice balance. 

Another head puzzler from the above post:

When I was trying to get this to work I changed the name of the Lightbox css file from lightbox.css to xlightbox.css and changed the link in my head like this:

<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>lightbox/css/xlightbox.css" />

This was to preserve the default css file. Once I made the above changes to the css border value and found it working I then dropped the "x" from the head link and the name of the actual file while keeping the change to the border. But the unwanted side box gap reappeared. I added the "x" back in and the box is gone. ???

Ok, I came back and gave it another go. Fiddled with and fiddled with that.

I made a couple of changes to the lightbox.css that comes with the default Lightbox2 archive. Starting on line 37 I made the border thinner and added a padding:0 like so...

 /* Image border */
  border: 2px solid white;
  padding:0;

On my local test install this has killed the unwanted transparent box that appeared on the right side of every full size image when presented by the script. I think the thinner border looks better as well. 

I am not sure if this is a real bug or something that is just happening to me? 

I really, really, really appreciate the help of pwired and Kongondo with helping me unravel this issue. Thank you both!

It is interesting how each of the approaches were both similar and quite different. The critical code for the gallery template is quite different. I plan on playing with both. I also need to check back with a previous install to get some multiple galleries to appear on the same page, but that will be for a new day...

3 minutes ago, pwired said:

Can you tunnel from your laptop your local website online ? Or sync your local website with an online host ? It will be more easy if we can see the setup online.

The test site is just local right now. The odd thing is if I make ANY test edits to the lightbox.css file and then reload my gallery page the script presentation remains the same. A caching issue?

I did find this: https://stackoverflow.com/questions/51016622/jquery-lightbox-2-showing-border-in-random-images

OK, got the caption and alt system working.

Still trying to track down the unwanted extra box on the right side of the full size images. Messing around with the Lightbox CCS is not fixing this. I looked at the images field settings but don't really see anything that would trigger this?

Good to know, thanks!

I need to test this in a different browser? I am using Safari on my desktop Mac. Maybe a CSS issue?

This is what shows up on my sample test:

<div id='content'><h1>Portfolio</h1><h2>Gallery with Lightbox2</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Duis viverra diam non justo. Etiam dictum tincidunt diam. Aenean fermentum risus id tortor. Nullam eget nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean placerat. Cras elementum. In convallis. Proin in tellus sit amet nibh dignissim sagittis. Nullam eget nisl. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nulla turpis magna, cursus sit amet, suscipit a, interdum id, felis. Fusce tellus.</p><a href='/SRP_2018/site/assets/files/1014/big_1.jpg' data-lightbox='image-group'><img src='/SRP_2018/site/assets/files/1014/big_1.150x150.jpg' alt='Gary on Orcas' />
            </a><a href='/SRP_2018/site/assets/files/1014/big_2.jpg' data-lightbox='image-group'><img src='/SRP_2018/site/assets/files/1014/big_2.150x150.jpg' alt='Spot prawns' />
            </a><a href='/SRP_2018/site/assets/files/1014/big_3.jpg' data-lightbox='image-group'><img src='/SRP_2018/site/assets/files/1014/big_3.150x150.jpg' alt='Good old Portia' />
            </a></div><!-- end content -->

I added a brief caption in the description of each image. When the script runs it is not displaying the caption/description?

I noticed that the markup that is generated shows that the img tag lists the individual image number like this:
 data-lightbox='image-2'

I changed the template from this:

 "<a href='$image->url' data-lightbox='image-{$cnt}'>" .

to this:

"<a href='$image->url' data-lightbox='image-group'>" .

Doing so now adds the group previous/next navigation. But that odd box on the right end of the full size images is still there. I will try dumping the images and uploading them again...

<edit: I dumped the images and uploaded them again and that extra box is still there? A headscratcher: never seen this before...> 

Thanks Pwired! I will take a look at this. In fact I think I will build a new test install to see how it differs from Kongodo's work! ?

Kongondo: thanks for catching that error. I would never have zoomed in on that issue.

The good news is that the three test uploaded images now show as thumbs on the page! And when you click on one you get the Lightbox doing its thing. Yay! Progress!!

But one issue: the image has this odd extra box strip on the right side of the image? And there is no previous/next navigation on the images? The other thing I am doing differently than your example is that I am linking to the latest jquery script directly (not linking to a file in my template folder) and I am not using the combined Lightbox and jquery lightbox-plus-jquery.min.js file. Instead I am using just the Lightbox.min.js file. Could this be a conflict or something? <edit: I tried the combined jquery file link and that does not change the result...>

I am running a local MAMP install of PW 3.0.98

I stripped out a bunch of stuff like the sidebar, breadcrumbs, and search, etc.

When I tried once to upload photos to the text editor I got a strange error message saying request denied because it was "forged" or something? I loose out and logged back in and did not see that error again (yet).

This is my folder structure:

The _head.php file:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title><?php echo $page->title; ?></title>
	<meta name="description" content="<?php echo $page->summary; ?>" />
	<link href='//fonts.googleapis.com/css?family=Lusitana:400,700|Quattrocento:400,700' rel='stylesheet' type='text/css' />
	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/test.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>lightbox/css/lightbox.css" />
			<!-- JS -->
			<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
			<script src="<?php echo $config->urls->templates?>lightbox/js/lightbox.min.js"></script>
			</head>
	</head>
<body>
<!-- top navigation -->
	<ul class='topnav' role='navigation'><?php

		// top navigation consists of homepage and its visible children
		$homepage = $pages->get('/'); 
		$children = $homepage->children();

		// make 'home' the first item in the navigation
		$children->prepend($homepage); 

		// render an <li> for each top navigation item
		foreach($children as $child) {
			if($child->id == $page->rootParent->id) {
				// this $child page is currently being viewed (or one of it's children/descendents)
				// so we highlight it as the current page in the navigation
				echo "<li class='current' aria-current='true'><span class='visually-hidden'>Current page: </span><a href='$child->url'>$child->title</a></li>";
			} else {
				echo "<li><a href='$child->url'>$child->title</a></li>";
			}
		}
      ?></ul>
 </div>

The basic-page.php file:

<?php

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

	<div id='content'><?php 
	
		// output 'headline' if available, otherwise 'title'
		echo "<h1>" . $page->get('headline|title') . "</h1>";
	
		// output bodycopy
		echo $page->body; 
		
		
		
		// TIP: Notice that this <div id='content'> section is
		// identical between home.php and basic-page.php. You may
		// want to move this to a separate file, like _content.php
		// and then include('./_content.php'); here instead, on both
		// the home.php and basic-page.php template files. Then when
		// you make yet more templates that need the same thing, you
		// can simply include() it from them.
	
	?></div><!-- end content -->		
	

<?php include('./_foot.php'); // include footer markup ?>

The gallery.php file:

<?php

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

	<div id='content'><?php 
	
		// output 'headline' if available, otherwise 'title'
		echo "<h1>" . $page->get('headline|title') . "</h1>";
	
		
		
	
	



// gallery.php template file 

// Primary content is the page's images gallery
$gallery = '';

// if there are images, lets choose them to create an image gallery
if(count($page->images)) {
	$cnt = 1;
	// if the page has images grab 'em
    $images = $page->images;

    foreach ($images as $image) {        
        // create/get image thumbs
        $thumb = $image->size(150,150);        
        // add image to gallery        
        $gallery .=
            // @note: unique data-lightbox value! (for single images according to docs)
            // link to full image
            "<a href='$image->url' data-lightbox='image-{$cnt}'>" .
                // image thumb
                "<img src='$thumb->url' alt='$image->description' />
            </a>";
        $cnt++;
    }
	
} else {
	// no images... 
	$gallery .= '<p>Sorry, there are no images in this gallery</p>'; 
}
// append gallery and body markup
$content = $gallery; 
$content .= $page->body;

?></div><!-- end content -->

The three pages will load fine. I use the basic-page.php for the two normal test pages and all is good: the minimal content I expect is there.

The Portfolio page is using the gallery.php template with has the title, headline, body and images fields.

No pictures or thumbs show at all. I am sure this is operator error (ME)...

Tried to implement Kongondo's work into my template but I am obviously missing something. I don't a get a thumbnail, just the full size image on the page and no script activation at all?

Got to leave this again...

Wow, Awesome!

Thanks for taking the time to play with this and create the demo! I will get back to this on Monday and report back...

 OK, that would be great. I have to walk away from this as well...

8 minutes ago, pwired said:

That script should be outside the 

<div class="galleryTest">

and put at the bottom just before the </body> tag

Ok, I removed the script from the basic-page.php file and added it to the bottom of the footer file like so:

<!-- footer -->
	<footer id='footer' role="contentinfo">
		<p>all photographs, renderings and designs copyrighted &copy; by xxx &#124;&#124; all rights reserved &#124;&#124; 2018<br/>Powered by <a href='http://processwire.com'>ProcessWire CMS</a>  &nbsp; / &nbsp; 
				<a href='/pwadminmax/'>Admin Login</a></p>
	</footer>
		<script type='text/javascript' src="<?php echo $config->urls->templates?>lightbox/js/lightbox-plus-jquery.min.js"></script>
		<script>
		     $(document).ready(function(){
		      $('.galleryTest').lightbox();
		    });
		</script>
</body>
</html>

The script is still not working on the images though.

If I look at the markup that is generated on the page I see the code for the script is there? 

I get the following:

<div class="galleryTest">
		<a href='/SRP_2018/site/assets/files/1014/orcas_gary.jpg'><img src='/SRP_2018/site/assets/files/1014/orcas_gary.150x150.jpg' alt='Gary on Orcas Island' ></a><a href='/SRP_2018/site/assets/files/1014/portia_at_chucks.jpg'><img src='/SRP_2018/site/assets/files/1014/portia_at_chucks.150x150.jpg' alt='Portia' ></a><a href='/SRP_2018/site/assets/files/1014/spotprawns.jpg'><img src='/SRP_2018/site/assets/files/1014/spotprawns.150x150.jpg' alt='Spot Prawns' ></a>		<script type='text/javascript' src="/SRP_2018/site/templates/lightbox/js/lightbox-plus-jquery.min.js"></script>
		<script>
		     $(document).ready(function(){
		      $('.image').lightbox();
		    });
		</script>
			
			
	</div><!--galleryTest ends-->

I am using the lightbox2-master

I really do not know PHP, which I think ultimately is the major issue for me.

I added a path to the Lightbox css file in my template  and added the following to my basic-page.php template:

<div class="galleryTest">
		<?php

		foreach($page->images as $image) {
	      // https://processwire.com/api/fieldtypes/images/
	      // set some default image options
	      $options = array('quality' => 90, 'cropping' => 'center');
		   $thumbnail = $image->size(150,150, $options);
		   echo "<a href='{$image->url}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a>";
		}
	
		?>
		<script type='text/javascript' src="<?php echo $config->urls->templates?>lightbox/js/lightbox-plus-jquery.min.js"></script>
		<script>
		     $(document).ready(function(){
		      $('.galleryTest').lightbox();
		    });
		</script>
			
			
	</div><!--galleryTest ends-->

The page looks fine. The thumbnails (via Proceswire) are there but the script is not doing its thing to the pictures. Clicking on a thumb just takes you to the full size image on a blank page. I think this is due to me using the class GalleryTest inside the function? I don't know what is needed though?

I just spent some time reviewing the different "boxes" on your list. So far I am liking Lightbox2...

Thanks Guys...

I am not sure what happened but I think the older version of FancyBox has been downgraded and a fresh branch of the project has been put in place. (I actually helped the developer with graphics way back in the early stages of FancyBox.) But I have a couple of updated PW sites that will not display thumbnails at all. When I built this years ago I created (with lots of help from PW forum members and following tuts) a seemingly complicated system of galleryPage, galleryPost, galleryBlogPost, parentPost, etc, PHP and Include template files. The new version of FancyBox spits out different code and does not use the same jquery and css files as before. But either a host server script upgrade or the new update to PW itself is breaking my gallery system. 

I am no longer going to do any web development for clients. It takes a commitment to stay on top of malware misery and system updates. I do have a couple of older client sites that run on MODx Revo, but the owners don't like the backend manager system. I showed them both Processwire and Concrete5 and Concrete5 was better received. I have not deployed a live Concrete5 site, just messing around with a local MAMP install. So far I Iike how a full polished gallery system, blog and Contact form is all there in place without having to code PHP template files. I understand how you guys apprentice the flexibility of PW here, but I am beginning to doubt my ability and commitment for doing this over time moving forward?

That being said it sort of really irks me that I can't get a basic chore like a picture gallery system running on a modern CMS that I have spent real time with! This is more to do with my ability and commitment and not the system itself. I would like to figure this out, even if it just helps me confirm in my mind which system I should settle on. I want to be in a more simple and less frustrating place ultimately...

I have upgraded two of my sites to the most recent versions of Processwire. These are basic photo gallery sites. I have tried a bunch of things to get a basic thumbnail - gallery presentation to work with Processwire. But my thumbs will not display with the fancyBox script I am using. Other attempts with different scripts have not worked for me either. 

I am at the very end here: I have downloaded Concrete5 locally on MAMP and I get a full working system with gallery, blog and contact form. For me it might best to tweak the themes here and work on my content instead of fighting the CMS system itself. I fear Processwire might be more for developers than for where I am at currently?

Any last suggestions before I scrap everything and start fresh with a new system?

Thanks!

Ok, I am feeling like a dumb student after coming back to algebra after four years: I have forgotten to do most things here.

I tried the above module but I am lost on how to to set it up and get it working. 

I thought I would try two things:

1) Create a super basic stripped down folder to get a static (away form Processwire) html test page to present a basic three image slide show using FancyBox. I came up with this and it works fine. I created and named the full size and thumbnail images directly with Photoshop. 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>My page</title>
<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css">
	<!-- JS -->
		<script type='text/javascript' src='http://code.jquery.com/jquery-latest.js'></script>
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
</head>
<body>

	<h1>Huge Headline</h1>

	<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
	<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>
	<a data-fancybox="gallery" href="big_3.jpg"><img src="small_3.jpg"></a>
	
	
</body>
</html>

2) Create a fresh local (MAMP) install of the the latest Processwire with a test gallery page using the PW image Field. This works. I can upload images and fiddle with the thumbnails, etc. All that happens when you click on a thumbnail: it takes you to a blank page that presents the individual full size image:

...


<div id="gallery">
		<?php

		foreach($page->images as $image) {
	      // https://processwire.com/api/fieldtypes/images/
	      // set some default image options
	      $options = array('quality' => 90, 'cropping' => 'center');
		   $thumbnail = $image->size(150,150, $options);
		   echo "<a href='{$image->url}'><img src='{$thumbnail->url}' alt='{$thumbnail->description}' ></a>";
		}
	
		?>
		
	</div><!--gallery ends-->
...

What I would like to do is combine these: Use the Processwire system to upload and customize thumbnails, present the thumbnails in a nice clean grid and then have FancyBox take over with presenting a floating end user slideshow. I also hope to strip down the CSS to just the presentation I need.

Any guidance would be most welcome. I have zero PHP skills so this is always an uphill battle for me. But I have achieved results in the past...

Thanks! Will explore these options...