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...

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...