Another Simple Photo Gallery Tutorial

[PhotoWebMax]

@everfreecreative,

Question: I have my gallery index page working. It aggregates child galleries with thumbnails that take you to the child galleries themselves. All good so far, although I need to tweak the CSS. What I want to change is preventing the web links to the child galleries form appearing in my site navigation. I only want the parent container "Gallery" link to appear in the site navigation: just one link. When you go to the Gallery page users can then follow the child gallery links by clicking on the image thumbnails.

Right now if I go to the settings tab on any of the child galleries and click the Hidden: Excluded form Lists and Searches box the child gallery is removed format he front end site navigation but the actual child gallery is also completely missing form the parent Galley page...

Thanks!

[thetuningspoon]

There are a few different approaches you could take. How are you generating your menu? If it's with Soma's plugin, you can limit the number of page levels with the settings (see the plugin documentation). This is usually the approach I take since I don't ever go more than 2 levels deep on my menus. If that won't work for your use case, I believe you can also exclude by template in the plugin settings. So in that case you would add gallery-album to the excluded template list. You can also exclude by template if you are writing your own menu logic.

Another approach would be to make the album pages hidden and then add include=hidden to the children selector (although the downside is that you have to remember to set the page to hidden for every new album):

Change this:

$albums = $page->children('template=gallery-album');

To this:

$albums = $page->children('template=gallery-album,include=hidden');

A third way would be to have all of the albums in a different (hidden) part of the page tree so they are separated entirely from your menu structure, but that would involve a bit of code tweaking.

There are probably other ways too... Hope that helps!

[PhotoWebMax]

Great stuff everfreecreative! (you need to capitalize your name) 

This morning I skimmed through the templates that we are using for the gallery. I really did not find any thing specific to the navigation so I suspected the next thing to look at would be the menu module I am using so far. 

But your template changes look interesting...

[PhotoWebMax]

I tired your last suggestion:

Change this:

$albums = $page->children('template=gallery-album');

To this:

$albums = $page->children('template=gallery-album,include=hidden');

I then hid the sub album but doing so means the parent "Galllery" page shows no content...

I will try the other suggestions as well...

[thetuningspoon]

That's strange. It definitely should work...

[PhotoWebMax]

Arrgghgh,

I was working on my test site: templates and includes, etc...

The fancy box script is now not working. I used Chrome Consul to check for errors and I get a "Uncaught TypeError: undefined is not a function" message.

Right in the middle of the fancybox script in my gallery-album.inc file:

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox({
            prevEffect    : 'elastic',
            nextEffect    : 'elastic',
            loop : false,
            mouseWheel: true,
            helpers    : {
                title    : {
                    type: 'outside'
                },
                thumbs    : {
                    width    : 100,
                    height    : 60
                }
            }
        });
    });
</script>

I have tried replacing the $ with jquery and still no go. I did not change the link to the version of the script I am calling in the head of the template: <script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/jquery-1.9.0.min.js"></script>

I am at a loss on how to debug this? Any pointers from here:

Thanks!

[thetuningspoon]

Do you have any other javascript running on the page, or did you add any additional scripts? Make sure that your jQuery is being loaded before the fancybox script and any other javascript code.

In cases like this I usually make generous use of edit > undo until things start working the way they were before and then I make note of what may have changed.

If you have a public link I'd be happy to look at it.

[PhotoWebMax]

I cant thank you enough!

I can post the generated output from the page if that helps. The frustrating thing is that I had it working at one stage. 

...

EDIT: got the system working again! What I did wrong is sort of hard to explain. I had my gallery-album.php to read just this:

include("./head.inc"); 
include("./gallery-album.inc"); 
include("./sideBar.inc");
include("./foot.inc"); 

I then had most of the code from your gallery-album.php in my gallery-album.inc file. But you had the link to the head.inc file in the middle of your code. I removed both the head and the foot from the gallery-album.inc file and all the layout worked perfectly. But the Fancybox jquery would not load. I tried several trial and error fixes. In the end I added the head back to the gallery-album.inc file and removed the head from the gallery-album.php file. This made the layout work and the script came back on. 

...

Question on the code you are using for the album:

<div class="upOneLevel"><a href="<?= $page->parent->url ?>">← Albums</a></div>
<div class="album">    
    <ul class="album-row row">
      <?
      if(count($images) > 0) {
        foreach($images as $image) 
        {    
            $thumb = $image->size($thumbWidth, $thumbHeight); 
      ?>
            <li class="album-photo darkenOnHover col span3">
                <a href="<?= $image->url ?>" rel="fancybox-gallery" class="fancybox" title="<?= $image->description ?>">
                    <img src="<?= $thumb->url ?>" alt="<?= $thumb->description ?>" />
                    <!-- Uncomment this line if you want descriptions under images <p class="album-photoDescription"><?= $image->description ?></p>--> 
                </a>
            </li>

It looks like you got these class names from a design template somewhere? Are these required? Would it be ok to rename them so they are not specific to the design template you used? I refer to stuff like "album row row" and "col span 3" etc. 

...

Also, getting back to not having the child gallery names show in the site navigation: adding this:

$albums = $page->children('template=gallery-album,include=hidden');

... to the parent gallery-index.php template removed the links from the navigation (after adding the checkbox to the child galleries) just fine but the actual galleries did not show on the parent gallery page at all? Not sure why?

I then tried your other suggestion and changed max levels setting to "1" in the MarkupSimpleNavigation module. This worked: the child gallery links are gone from the navigation (which I want) and the actual child galleries are there inside the parent gallery page. So far so good. The only thing that concerns me about this technique is what happens if I want to increase the depth of the visible site navigation at some point? Increasing the level depth will bring the child gallery links back to the navigation as well. But I will cross that bridge later I guess...

Sorry to be a newbie pain the rear about this, but the help has been great!

Cheers!     

Edited April 26, 2014 by PhotoWebMax

[thetuningspoon]

Ok, let's back up a bit Can I ask why you're separating everything out into includes in your template files? Unless you're going to be reusing the code in other templates (as with the head, sidebar, and foot), breaking everything out is unnecessary and may be contributing to some of the confusion here.

Anyway, I think what's happening here is that you're getting confused by this bit:

$config->styles->append($config->urls->templates . "scripts/fancybox/jquery.fancybox.css"); 
$config->styles->append($config->urls->templates . "scripts/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.7");
$config->scripts->append($config->urls->templates . "scripts/fancybox/jquery.fancybox.pack.js"); 
$config->scripts->append($config->urls->templates . "scripts/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.7"); 

This is just a way of creating an array (list) of the scripts and css files particular to one template without having to change the code inside of head.inc (this is so the scripts will only load when they're actually needed). The reason why this comes before the head.inc file is that the list is actually output inside of the head.inc file (you may want to go back and re-read that part of my tutorial), so the array has to be built before that. This is the logic in the head.inc file that actually takes the arrays and produces the links from them:

<? foreach($config->scripts as $file) { ?><script type="text/javascript" src="<?= $file ?>"></script> 
    <? } ?>

<? foreach($config->styles as $file) { ?><link rel="stylesheet" type="text/css" href="<?= $file ?>" /> 
    <? } ?>

In retrospect, I should have left this out because it is really too confusing for beginners. But you can always remove the arrays and just link the css files and scripts directly in the head.inc file the same way that you link your other scripts and css files. But you must make sure that each script is in the correct order. In Javascript, if one script references a function or a variable from another script, that script must precede the current script in the document flow. So your jQuery must always be loaded first in head.inc.

It is good practice in web programming to separate out your logic (php) from your markup (html) as much as is possible/reasonable to do. So that, along with the need to create the script/css arrays BEFORE they are output inside the head.inc file is the reason why head.inc was not loaded at the top of gallery-album.php. So when you moved head.inc above gallery-album.inc without moving the arrays too, you disrupted the program flow.

In regard to the CSS classes: These aren't part of a template, but part of a layout system I created for my own projects to speed development. The only class here required to make the gallery work functionally is the "fancybox" class. All of the rest can be removed or replaced as you see fit, but you will lose the grid layout (assuming you attached the css I provided to go along with it in the tutorial) and will have to rebuild it.

Hope some of that made sense...

[PhotoWebMax]

Interesting reading...

You are spot on of course. My issue is a lack of experience using PHP logic in websites. I think I am leaning on using includes files because it sort of mimics my experience in creating templates with chunks and template variables in MODx. 

In my test site I have a series of pages that are more regular text and inserted image based and a different series of pages that are photo gallery based. The code for the center of the content area is what changes. Also, the gallery system requires a different set of links to scripts, css, template stuff in the head. Using different includes was my way of managing that. To be honest I was not quite getting the logic you were using or why some vital stuff seemed "out of sequence" to my perceptions of normal markup flow. 

So when you moved head.inc above gallery-album.inc without moving the arrays too, you disrupted the program flow.

I think that is exactly what I was doing wrong. It took some experimentation to mix your system with my includes and template structure, but I got there in the end. My issues were not so much PW based but placing the various bits and pieces in the correct order for the gallery system to work without my overall layout exploding. 

I once read this about coding and programming: "don't ever copy and paste code without knowing exactly what it is doing". This sounds like great advice but it is just not always practical. A designer friend of mine also once pointed out; "CMS platforms can be very useful but the learning curve and heavy code lifting takes so much time and effort that presenting the actual content becomes secondary." I can see his point.

...

Throughout all of this I have had this nagging voice in my head saying that I am playing in the wrong pool with ProcessWire. The presentation of the entire project, the user base, the conversations in the forms, etc, are more closely connected to programing experience that other systems I have played with. I find reading the documentation and the API to be more of a sales mix of highlighting the features and strengths of the system using technical adjectives than a guide to achieving learning and results. 

I think web guys and gals that have equal design and programming skills are rare. Usually people lean more one way or the other. To have great skills in both can be wonderful, especially if you work as a one man band. I am a visual person. I like web work though. Its very different to my regular photography work. The main reason I gave up on using Wordpress is the template system. Building stuff from scratch and pouring it into the system revealed how much skeleton scaffolding there really is with Wordpress. I then tried about eight or so systems before settling on MODx. Installing MODx presents pretty much a blank canvas. There is no content and template. The learning curve is figuring out all the building blocks and all the custom MODx placeholder syntax. But there is a lot to like about MODx for designers. 

After years with MODx I stumble upon ProcessWire. The plusses and minuses are different for each user, but I find there is so much in PW that gives me the sense that this is a pursuit very much worth sticking with. Some things are way easier with PW and some things are like a mirage: not quite sure what I am looking at. It will take some time. 

I think the design community has this simple request from new CMS platforms: don't just list technical features and parameters, rather show us why they are useful, how & where to add them and how they work. What I see with MODx currently are some real growing pains now that the project has reached some level of maturity. Who is the target audience? Do you attract developer/programmers, designers, or end users? Its a good question if your project aspires to even come close to matching the user base that Wordpress and Drupal enjoys. I guess a good question for ProcessWire is: does this project want to invite designers in solid numbers? A few well placed articles on ProcessWire where designers hang out could create real interest. As things grow the base changes as does the forums. I have seen this with MODx. 

I better stop rambling here. I think I am guilty of creating some signal-to-noise-ratio concerns on this thread, which should remain focused on your fine and very useful tutorial...

Thanks! 

[thetuningspoon]

PhotoWebMax, I think your post is very perceptive. ProcessWire appeals very much to people who are both designers and developers. It also works well for teams who divide up those responsibilities. However, it doesn't make any attempt to do development for you (like Joomla or WordPress might, for example). Having said that, what it does do is reduce the learning curve on the development side as much as is possible without sacrificing capabilities or imposing limitations on what can be done with it. 

I started ProcessWire as a designer too, so you're in good company. Most of my sites were not built on CMSs because I could never get the big ones (Joomla, Drupal, or WordPress) to do what I wanted, or to do it in a way that would be intuitive for my clients to manage. Anyway, the only php experience I had was using includes in my regular html sites (and whatever I could remember from the one or two non-php-based programming classes I had taken). What really drew me to PW was that I could continue making sites exactly the way that I always had-- writing all my own html, css, and choosing when and where to break up my code into external includes. And I didn't even have to learn a new syntax for that, since it was all php-based.  From there, it was just a matter of learning how to grab the data from the CMS that I needed to be dynamic and putting it into my template files with the API. Going through this process opened me up to the world of development. I won't say that it was easy (or that I don't still have a lot to learn), but for me PW made programming fun and intuitive, and actually seem attainable for a design-minded person like me.  And by spending time on these forums and asking a lot of questions, I was able to get up and running with the basics right away and then learn the more complex stuff from there.

Now that you've described what you're trying to do with having galleries as a part of multiple templates, I do believe you have a good approach for your use case. Please don't get hung up on my way of doing things. Do what makes sense to you and will be easy for you to manage. If that means loading the scripts on all pages and sacrificing a tiny bit of page load speed, then do that. Heck, if repeating the code in every template file and not using includes at all makes it easier and gives you the more granular level of control that you need, then do that.

I only looked at MODx briefly before I found PW, so I can't speak to the similarities and differences. But I will say that once I finally found PW I haven't looked back

[davo]

ignore post; me=idiot that should read prior posts and more carefully!

[pwired]

Going through this process opened me up to the world of development.

Everfreecreative: great post, you really said it there. Posts like that should not fade but pinned

as one of the first posts e.g. in faqs.

Copied your post link and changed old title Newbies first starting questions into starting newbies and designers.

https://processwire.com/talk/topic/4173-grouped-forum-posts-links-articles-tutorials-code-snippets/

[thetuningspoon]

Thanks so much pwired

[davo]

Thanks for this great tutorial. I also have a client that has a very large gallery. Because it's so large we'll be sharing the work of actually uploading the images. To help them  i've made a quick and dirty screencast rather than trying to explain how to create the index, create the gallery and upload the images.

http://screencast-o-matic.com/watch/c2hb6TnaT3

Some albums have sub albums so i've tweaked the code to show an album within an album.

Also you may notice that the albums are linked to another page. The site represents event companies. This means each album can be associated with and event company on the site meaning users can browse the album and get to the event company that runs the events there. In reverse, the event company pages can call a set of random pictures from the gallery relevant to their destination. Hopefully good for SEO too!

The site is under development at the moment and the url is likely to change but in it's current state can bee seen here:

http://dmc.dudmc.com/

[PhotoWebMax]

@everfreecreative

Have you ever used the Thumbnails module for customizing cropped thumbnails for your gallery images? Any tips for doing so?

Ultimately I would like to have the full collection of gallery thumbnails set to a specific square size. I would also like to present the index gallery thumbnails (that point to the actual child galleries) at a different larger thumbnail size...

Thanks!

[alan]

+1 PhotoWebMax's Q, I too would love to try out apeisa's uber cool thumbs module

[PhotoWebMax]

I have installed the Thumbs module and adjusted the Images Field type to CropImage instead of the default Image.

I then imported a bunch of test images onto a page. I could then click the thumbnail link in the Images Field while editing the page. I could then crop the thumbnails as I liked and saved the page. But the cropped thumbs do not show as the 100x100 square I wanted. The generated thumbs on the front end page still take on a irregular rectangle shape depending on the different heights of the full size image. This makes for a unappealing grid display.

Say I upload a full size image called garden1.jpg. The system will generate two thumbnails for this one image: garden1.100x100.jpg and thumbnail_garden1.jpg. The page will show the garden1.100x100.jpg thumbnail but this thumb is not cropped. The thumbnail_garden1.jpg is cropped like I wanted (via the Thumbs module) but this version is not displayed on the page. 

I think I need to adjust the template I am using for the gallery page (see code below).

<?
$config->styles->append($config->urls->templates . "scripts/fancybox/source/jquery.fancybox.css");
$config->styles->append($config->urls->templates . "scripts/fancybox/source/helpers/jquery.fancybox-thumbs.css");
$config->scripts->append($config->urls->templates . "scripts/fancybox/source/jquery.fancybox.pack.js");
$config->scripts->append($config->urls->templates . "scripts/fancybox/source/helpers/jquery.fancybox-thumbs.js");



// Configure thumbnail width/height & number of photos to display per page
$thumbWidth = 100;
$thumbHeight = 100;
$imagesPerPage = 50;



// Make ProcessWire pagination work on the images field (see  for full explanation of this)
$start = ($input->pageNum - 1) * $imagesPerPage;
$total = count($page->images);
$images = $page->images->slice($start, $imagesPerPage);
// Create a new pageArray to give MarkupPagerNav what it needs
$a = new PageArray();
// Add in some generic placeholder pages
foreach($images as $unused) $a->add(new Page());
// Tell the PageArray some details it needs for pagination
$a->setTotal($total);
$a->setLimit($imagesPerPage);
$a->setStart($start);

include("./head.inc")
?>
<?= $a->renderPager() ?>

<div class="album">
    <ul class="album-row row">
      <?
      if(count($images) > 0) {
        foreach($images as $image)
        {
            $thumb = $image->size($thumbWidth, $thumbHeight);
      ?>
            <li class="album-photo darkenOnHover col span3">
                <a href="<?= $image->url ?>" rel="fancybox-gallery" class="fancybox" title="<?= $image->description ?>">
                    <img src="<?= $thumb->url ?>" alt="<?= $thumb->description ?>" />
                    <!-- Uncomment this line if you want descriptions under images <p class="album-photoDescription"><?= $image->description ?></p>-->
                </a>
            </li>
      <?
        }
      }
      ?>
    </ul><!-- /album-row -->
</div><!-- /album -->
<div class="group"><?= $a->renderPager() ?></div>
<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox({
            prevEffect    : 'elastic',
            nextEffect    : 'elastic',
            loop : false,
            mouseWheel: true,
            helpers    : {
                title    : {
                    type: 'outside'
                },
                thumbs    : {
                    width    : 100,
                    height    : 100
                }
            }
        });
    });
</script>

[horst]

Hi,

you need to go and read how to call thumbnails with the Thumbnails Module. It is explained on the Modulespage. SOmething like $cropfield->getThumb('nameOfYourThumbsetting')

In the above code you simply request a Pageimage of 100 x 100 (centered autocropping)

[PhotoWebMax]

I am trying to do that...

I have the Images Field set to the CropImage Type and the Input Thumbnail setting is this: thumbnail, 100,100

Therefore, I think I do not need the configuration of the thumb width and thumb height near the top of this template? 

I assume the critical element is the following inside the foreach of the album row:

 $thumb = $image->size($thumbWidth, $thumbHeight);

On the Thumbnails Module page there is the usage suggestion of needing this:

echo $page->images->eq(0)->getThumb('thumbnail');

I have tried substituting all of that line and parts of it into the $thumb call while leaving out the size settings. So far I either get a parse error, blank thumbs or no thumbs at all. 

Obviously I am missing something...

[PhotoWebMax]

I have tried all kinds of experiments with getting this line of code to add the cropped Thumbnails module thumbs to my gallery system. Still getting errors, no thumbs or blank thumbs? I have read the entire forum thread on this module but I do not see anyone who has tried adding this module to a similar gallery script like we have in this tutorial thread. 

I finally got the gallery system working on a single stand alone gallery page and to paginate on a separate parent gallery page that presents child galleries, all using a working jQuery script. I like how it all works so far. But I really want to be able to customize square thumbnails on my galleries. It makes the presentation of a mix of full sized landscape and portrait images so much nicer...

[thistimj]

I had to figure this out as well. If you are using the thumbnail module, you won't need to define your width and height as variables in the template.

See if this works. Instead of

 foreach($images as $image)
        {
            $thumb = $image->size($thumbWidth, $thumbHeight);

try

 foreach($images as $image)
        {
            $thumb = $image->getThumb('thumbnail');

Then your

<img src="<?= $thumb->url ?>"

should change to

<img src="<?= $thumb ?>"

That might work.

[PhotoWebMax]

@thistimj,

You Sir, are a rock star! Thanks so much...

I had tried the first part of your solution with no luck. I had also tried editing the second part(img src=...) but never had both edits going at the same time. This works perfectly.

I really like this Thumbnails Module....

Cheers,

Max

[thistimj]

Glad that worked. Reading your posts made me think, "Crap, I'm going to have to solve this issue too!" My gallery system is set up differently than everfree's tutorial (which is very cool, by the way), but it worked out similarly for both uses.