Jump to content

Another Simple Photo Gallery Tutorial

thetuningspoon

By thetuningspoon,
in Tutorials

 Share

Recommended Posts

PhotoWebMax Sr. Member

PhotoWebMax

Posted
Posted

Everfreecreative,

Thanks for the post. As I said I scratched your system from the test install of PW I am using. This is a local install using MAMP.

I then followed Joss's gallery tutorial which looks quite thorough. I went through all the steps but when viewing my gallery page at the end all I get is a huge error message which I can't understand. 

I don't want to hijack your thread but the error message reads like this:

function albumList(){ // Get the list of albums - limited to ten for later pagination $albums = wire("pages")->find("parent=/albums/, template=TUT_gallery, limit=10"); $out =" "; //Loop through the pages foreach($albums as $album){ $out .="
"; if($album->gallery){ $out .=""; } $out .="
{$album->title}

"; $out .="
{$album->article_maintext}

"; $out .="
"; } // Pagination $out .="
"; $out .= $albums->renderPager(array( 'nextItemLabel' => "Next", 'previousItemLabel' => "Prev", 'listMarkup' => "
{out}
", 'itemMarkup' => "
{out}
", 'linkMarkup' => "{out}" )); $out .="
"; echo $out; } function infoDisplay(){ $info = wire("page"); $out =" "; $out .="
{$info->title}

"; $out .=$info->article_maintext; echo "
$out
"; } function albumGrid() { $albumimages = wire("page")->gallery; $thumbsize = wire("page")->gallery_thumbnail_size; $out = " "; foreach ($albumimages as $albumimage) { $out .= ""; $out .= ""; $out .= ""; } echo "
{$out}
"; } function albumShow() { $albumimages = wire("page")->gallery; $thumbsize = wire("page")->gallery_thumbnail_size; $out =" "; // Slides $out .="
"; foreach ($albumimages as $albumimage) { $out .=""; } $out .="
"; // Carousel $out .="
"; foreach ($albumimages as $albumimage) { $out .=""; } $out .="
"; echo $out; }
Error: Call to undefined function infoDisplay() (line 8 of /Applications/MAMP/htdocs/ProcessWire-master/site/templates/TUT_gallery_index.php) 

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

So far all my attempts at getting a gallery system working in PW have been frustrating. I am beginning to think I need to install a live test site and pay someone to get it working for me. This way I can use this a working blueprint that I can copy for other projects. I am still going to keep trying until something clicks for me. But after a point I might have to abandon PW and double down with my current familiarity and experience with MODx...

Link to comment
Share on other sites
PhotoWebMax Sr. Member

PhotoWebMax

Posted
Posted

I am having another go, starting from scratch, with this system...

I followed the steps. I can now see the parent gallery page with the large thumbnail linking to the child gallery page. The child gallery page displays the thumbnail links to the full size images. This is huge progress!

Unfortunately the FancyBox script is not working. The full size images gets presented on a blank page. It might be an issue in the head.inc file or maybe the path to the FancyBox components...

Update:

Everfreecreative: I looked at the generated output from the live gallery site you gave us. In the head code I see your links to the FancyBox components look like this:

<script type="text/javascript" src="/site/templates/scripts/fancybox/jquery.fancybox.pack.js"></script> 
	<script type="text/javascript" src="/site/templates/scripts/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

My generated code looks like this:

<script type="text/javascript" src="/ProcessWire-SREP/site/templates/scripts/fancybox/jquery.fancybox.pack.js"></script> 
	    <script type="text/javascript" src="/ProcessWire-SREP/site/templates/scripts/fancybox/helpers/jquery.fancybox-thumbs.js"></script>

so, in my case the site name is getting added at the start of the script path. I have /ProcessWire-SREP/site/etc... while you have /site/etc. Is this the issue? How do i fix this? I think I am getting pretty close otherwise...

Link to comment
Share on other sites
kongondo Hero Member

kongondo

Posted
Posted

One way....if calling PHP within HTML...

Note: there is no slash before 'scripts'. ProcessWire will add that

<script src="<?php echo $config->urls->templates;?>scripts/fancybox/helpers/jquery.fancybox-thumbs.js"></script>

$config->urls->templates

URL to your site templates directory.

Read about urls and paths here:

http://processwire.com/api/variables/config/

  • Like 2
Link to comment
Share on other sites
PhotoWebMax Sr. Member

PhotoWebMax

Posted
Posted

Have this at the top of the gallery-album.php template:

$config->styles->append($config->urls->templates . "scripts/fancybox/jquery.fancybox.css"); 
$config->styles->append($config->urls->templates . "scripts/fancybox/helpers/jquery.fancybox-thumbs.css");
$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");

I am not sure if this is even an issue or not. I just noticed my output code adds the site name before /site/template/scripts/etc... It was the first thing I noticed that is different from that site everfreecreative linked to. I am just trying to track down why the FancyBox script is not working on my gallery page...

Link to comment
Share on other sites
kongondo Hero Member

kongondo

Posted
Posted

Ah. I see. Doing it that way means the scripts are being loaded from a module. There can be various pitfalls/gotchas if you take this approach. As someone new to PW, I'd stick with loading my own scripts and css as per the example I showed you :-)

Link to comment
Share on other sites
thetuningspoon Hero Member

thetuningspoon

Posted
  • Author
Posted

I am having another go, starting from scratch, with this system...

I followed the steps. I can now see the parent gallery page with the large thumbnail linking to the child gallery page. The child gallery page displays the thumbnail links to the full size images. This is huge progress!

Unfortunately the FancyBox script is not working. The full size images gets presented on a blank page. It might be an issue in the head.inc file or maybe the path to the FancyBox components...

Update:

Everfreecreative: I looked at the generated output from the live gallery site you gave us. In the head code I see your links to the FancyBox components look like this:

<script type="text/javascript" src="/site/templates/scripts/fancybox/jquery.fancybox.pack.js"></script> 
	<script type="text/javascript" src="/site/templates/scripts/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

My generated code looks like this:

<script type="text/javascript" src="/ProcessWire-SREP/site/templates/scripts/fancybox/jquery.fancybox.pack.js"></script> 
	    <script type="text/javascript" src="/ProcessWire-SREP/site/templates/scripts/fancybox/helpers/jquery.fancybox-thumbs.js"></script>

so, in my case the site name is getting added at the start of the script path. I have /ProcessWire-SREP/site/etc... while you have /site/etc. Is this the issue? How do i fix this? I think I am getting pretty close otherwise...

No, that shouldn't be a problem. That's just because your installation is in a subfolder. Glad you are having better luck this time.

Did you download the Fancybox script (http://fancyapps.com/fancybox/), unzip it, and add it to the /sites/scripts/ folder? You will have to make sure the folder is named "fancybox" as well to match the path I used.

If still no luck, take a look at the "console" in your browser's developer tools and see if it has any errors. It will tell you if there are issues linking files or if you have javascript errors.

Ah. I see. Doing it that way means the scripts are being loaded from a module. There can be various pitfalls/gotchas if you take this approach. As someone new to PW, I'd stick with loading my own scripts and css as per the example I showed you :-)

Actually, this is not loading from the module-- it's just using the $config->styles and $config->scripts arrays. Once the arrays are populated at the top of the template, they are looped through in the header include.

Link to comment
Share on other sites
PhotoWebMax Sr. Member

PhotoWebMax

Posted
Posted

@everfreecreative

In your tutorial which version of FancyBox are you using?  When you download the folder from http://fancyapps.com/fancybox/ it comes in as a new version 2 of the system (new to me). Anyway the core FancyBox files are in "lib" and "source" folders. This does not match the path system that you highlight in the gallery-album.php template. It might be just the paths but I am not sure if the script is compatible with the template code? 

Link to comment
Share on other sites
thetuningspoon Hero Member

thetuningspoon

Posted
  • Author
Posted

@everfreecreative

In your tutorial which version of FancyBox are you using?  When you download the folder from http://fancyapps.com/fancybox/ it comes in as a new version 2 of the system (new to me). Anyway the core FancyBox files are in "lib" and "source" folders. This does not match the path system that you highlight in the gallery-album.php template. It might be just the paths but I am not sure if the script is compatible with the template code? 

I think I am using version 2, while the PW core version is version 1. Nowadays I've started using the Magnific popup instead. Feel free to use whatever lightbox you'd like--you'll just have to tweak the paths, javascript call, and any necessary classes in the html.

Link to comment
Share on other sites
PhotoWebMax Sr. Member

PhotoWebMax

Posted
Posted

I hope I am not driving you crazy here...

Here is the contents of the  fancybox folder that I have in the scripts folder (inside the PW/site/templates folder):

fancybox_zps68e23944.jpg

This is the top of the gallery-album.php template:

<? 
$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/jquery.fancybox.js");
$config->scripts->append($config->urls->templates . "scripts/fancybox/source/helpers/jquery.fancybox-thumbs.js"); 

And this is the code that gets generated in the head of the child gallery page with the photos in it:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

	<title>EverOneGallery</title>

	<meta name="description" content="" />

	<meta name="generator" content="ProcessWire 2.4.0" />
	
	<link rel="stylesheet" type="text/css" href="/ProcessWire-SREP/site/templates/styles/main.css" />

	<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="/ProcessWire-SREP/site/templates/styles/ie.css" />
	<![endif]-->	

	<script type="text/javascript" src="/ProcessWire-SREP/site/templates/scripts/jquery-1.9.0.min.js"></script>

	<script type="text/javascript" src="/ProcessWire-SREP/site/templates/scripts/main.js"></script>
	
	
	
	<script type="text/javascript" src="/ProcessWire-SREP/site/templates/scripts/fancybox/source/jquery.fancybox.pack.js"></script> 
	    <script type="text/javascript" src="/ProcessWire-SREP/site/templates/scripts/fancybox/source/jquery.fancybox.js"></script> 
	    <script type="text/javascript" src="/ProcessWire-SREP/site/templates/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script> 
	    
	<link rel="stylesheet" type="text/css" href="/ProcessWire-SREP/site/templates/scripts/fancybox/source/jquery.fancybox.css" /> 
	    <link rel="stylesheet" type="text/css" href="/ProcessWire-SREP/site/templates/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.css" />  

So far everything works but the FancyBox script?

Link to comment
Share on other sites
thetuningspoon Hero Member

thetuningspoon

Posted
  • Author
Posted

The paths all look correct, although you are including the script twice (the fancybox.pack.js and the unpacked fancybox.js) You only need one of them (it is the same thing, just compressed vs. uncompressed), and having both may be causing a problem.

Like I mentioned earlier-- If that doesn't work, take a look at the "console" in your browser's developer tools and see if it has any errors in it. It will tell you if there are issues linking files or if you have javascript errors.

Link to comment
Share on other sites
PhotoWebMax Sr. Member

PhotoWebMax

Posted
Posted

@everfreecreative:

Thanks for helping here!

I messed around with this last night to no avail and went to bed sort of frustrated. This morning, with fresh eyes, I checked through each line of my templates and really could find nothing. Not knowing PHP kind of makes this chore difficult but I can follow along (more or less) what the system is doing. 

I then checked my head.inc file which I created before the whole gallery experiment. I have an existing jQuery script that runs my top navigation. What I quickly spotted was me calling two different versions of the jQuery lib script. A newer one towards the top of the head.inc and an older one just above the top nav script.  I deleted the second call (older jQuery), saved and refreshed the gallery page: and voila: images rendered by FancyBox!!!

Is it too early in the day for champagne? 

  • Like 1
Link to comment
Share on other sites
thetuningspoon Hero Member

thetuningspoon

Posted
  • Author
Posted

Ah yes, multiple jQueries is a common pitfall to watch out for!

Congratulations on your success--glad I could help! I know that learning the basic php needed for template customization can be a bit challenging at first, but you'll quickly discover how much power it gives you. Most CMSs use some sort of templating language that you have to learn anyway, but using php for templating allows you to carry that skill elsewhere. If you keep at it you'll be a php pro in no time :)

Link to comment
Share on other sites
PhotoWebMax Sr. Member

PhotoWebMax

Posted
Posted

What I need to do now is customize the grid layout of the gallery images and the size and CSS for the thumbnails. I also need to figure out if there is a better way of splitting the page code between the head.inc and footer.inc files. MODx does all this a bit differently and it will take more messing around to get used to it...

Link to comment
Share on other sites
kongondo Hero Member

kongondo

Posted
Posted

........I also need to figure out if there is a better way of splitting the page code between the head.inc and footer.inc files. MODx does all this a bit differently and it will take more messing around to get used to it...

Max, glad you got it sorted.  :)

Just wanted to point out that this head.inc/footer.inc being the PW way is a common misconception :-). That is not the PW way; there is no PW way :-). This is a source of joy for some (the-have-my-cake-and-eat-it-too crowd) and a source of frustration/confusion for others, especially those used to a CMS telling them how to do things (Joomla, WordPress, anyone?). In PW, different people use different approaches according to preference, practicality, etc. Hey, if you wanted, you could even have one massive HTML file with all the markup you need and keep on duplicating that across different template files with only slight modifications. Not very practical (and a lot of unnecessary work on your part) but it would work. The Blog Profile, the Skyscrapers Profile and the default install are good examples of various approaches. But the definitive post on different approaches are in this classic thread.

  • Like 3
Link to comment
Share on other sites
alan Hero Member

alan

Posted
Posted

Following on from the chat about storing each image on a page of it's own, or not. I made the Album code into a function (not that that matters but it explains why the code below is a fn) and this how it starts, you can see it is basically identical to everfreecreative's code

function galleryAlbum() {

    $page = wire('page');

    if($page->treat_as_gallery) {

        $out = '';
        $input = wire('input');

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

        // 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);

        // Paged galleries
            // Create a new pageArray to give MarkupPagerNav what it needs
            $a = new PageArray();

            // Add in some generic placeholder pages
            // org foreach($images as $unused) $a->add(new Page());
            foreach($images as $myKey=>$unused) {
                $a->add(new Page());
            }

            // Tell the PageArray some details it needs for pagination
            $a->setTotal($total);
            $a->setLimit($imagesPerPage);
            $a->setStart($start);

            $a->renderPager();

        $out .= "<div id='gallery-t-group' class='royalSlider rsDefaultInv rsMainSlideImage'>";

        foreach($images as $image)
        { ... etc

The trouble is I really need to store, per image, more than the image and a plain-text description and so the page-per-image approach is ideal.

I spent a few hours trying to work out how to do this and my code fumblings are not above, above is the clean approach that works (tks to everfreecreative :))

Essentially I need:

  1. ideally to get the paging code to work with images that are child pages of the current $page
  2. to get $images built properly before I arrive at the line foreach($images as $image) so it works just as it does when images are all stored on one page.

Cheeky question, does anyone have any ideas how to achieve these probably simple-if-you-know goals? If not I will return here at some point and list my code fumblings (which get some way there) and explain what works and what fails. I've not done that straight away because they are pretty feeble plus that version of the site is archived and the 'simple' one is restored (as I need to launch something with very little time right now).

Thanks lots in advance if you can comment! :)

Link to comment
Share on other sites
thetuningspoon Hero Member

thetuningspoon

Posted
  • Author
Posted (edited)

Hey Alan, thanks for the kind words. If I understand correctly what you're asking (making an album where each image is stored in its own child page along with other metadata), then that is actually simpler than what I've done here since we don't need to "fake" the pages--they already exist.

Here's what the gallery-album.php would look like:

<? 
$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");



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

$images = $page->children("limit=$imagesPerPage");

include("./head.inc")
?>

<?= $images->renderPager() ?>

<div class="upOneLevel"><a href="<?= $page->parent->url ?>">← Albums</a></div>

<h2><?= $page->title ?></h2>

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

<div class="group"><?= $images->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    : 60
                }
            }
        });
    });
</script>

<? include("./foot.inc") ?> 
Where "images" is the name of the image field on your child pages. I haven't tested this yet but it should work. You can then use $image variable anywhere within the loop to access your other metadata fields.

EDIT: Just corrected a stupid mistake. This should work now!

Edited by everfreecreative
  • Like 1
Link to comment
Share on other sites
alan Hero Member

alan

Posted
Posted

Only thing I've had to change to get this revised version to 'fire up' and produce thumbs was

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

changed to

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

and I found that out from this post (thanks all, especially everfreecreative :D)!

Link to comment
Share on other sites
alan Hero Member

alan

Posted
Posted (edited)

Also had to change code

<a href="<?= $image->images->url

to

<a href="<?= $image->images->eq(0)->url

like noted in the above post.

Edit: Don't know if I am having to add the eq(0) due to me making the gallery components functions or not, but just in case that is why, thought I'd mention that I have, made the gallery into a couple of functions.

Edited by alanfluff
Link to comment
Share on other sites
thetuningspoon Hero Member

thetuningspoon

Posted
  • Author
Posted

Hi Alan, the reason why you have to use eq() is that your images field is set to accept multiple images. You should set the image field to accept only 1 image and then it will work. So "images" probably isn't the best name for the field, but you get the idea :)

  • Like 2
Link to comment
Share on other sites
alan Hero Member

alan

Posted
Posted

Hi everfreecreative, thank you for that catch! I had been switching it back and forth knowing that in some circumstances search is limited in some way when it's only 1 image (although limiting to onl1 one image was just what I wanted) and sure enough the last way I had left it set while trying to debug my own attempts was to 0. Switching it to 1 did indeed make the eq() redundant. Thanks SO much for the simple and quick explanation! :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...