Simple Gallery Tutorial for ProcessWire

[Joss]

This is a companion tutorial to the Basic Website Tutorial and the Simple News Tutorial.

This tutorial teaches you how to create a multiple album gallery system in processwire using a lightbox plugin (colorbox) and a slideshow plugin (Flexslider).

As with all tutorials, it is meant as a starting point for you to create your own system rather than an instant plugin.

This can be used standalone on a new installation of ProcessWire, but it was initially designed on top of the Basic Website Tutorial structure. If you are new to ProcessWire, then I suggest doing that tutorial first.

http://wiki.processwire.com/index.php/Simple_Gallery_System

Joss

[Basil]

thank you Joss very very useful!!

[Mark]

Another great tutorial. Thanks very much Joss.

I am having a bit of an issue, any chance you could github the gallery files? I would like to cross reference them with mine and see what I have done wrong! I noticed you have uploaded the News files. Github - News: https://github.com/jsanglier/Pw-News

Cheers

[Joss]

Ummm - now, where have I put them???

What is the issue you are having?

[Mark]

Hey Joss,

Thanks for your fast reply. I hope you don't mind, I have pasted the errors below.

The error from /gallery page

Error: Exception: Method Pageimage::first does not exist or is not callable in this context (in C:\xampp\htdocs\processgallery\wire\core\Wire.php line 232)

#0 C:\xampp\htdocs\processgallery\site\templates\TUT_gallery_functions.inc(16): Wire->__call('first', Array)
#1 C:\xampp\htdocs\processgallery\site\templates\TUT_gallery_functions.inc(16): Pageimage->first()
#2 C:\xampp\htdocs\processgallery\site\templates\TUT_gallery_index.php(12): albumList()
#3 C:\xampp\htdocs\processgallery\wire\core\TemplateFile.php(125): require('C:\xampp\htdocs...')
#4 [internal function]: TemplateFile->___render()
#5 C:\xampp\htdocs\processgallery\wire\core\Wire.php(271): call_user_func_array(Array, Array)
#6 C:\xampp\htdocs\processgallery\wire\core\Wire.php(229): Wire->runHooks('render', Array)
#7 C:\xampp\htdocs\processgallery\wire\modules\PageRender.module(250): Wire->__call('render', Array)
#8 C:\xampp\htdocs\processgallery\wire\modules\PageRender.module(250): TemplateFile->render()
#9 [internal function]: PageRender->___renderPage(O

Error from album child pages:

Error: Call to undefined function albumGrid() (line 12 of C:\xampp\htdocs\processgallery\site\templates\TUT_gallery.php) 

[Joss]

I cant get to my installation at the moment, but can you check whether you have included the functions file properly?

Also, here is a link to the three files so you can check you have them right (or, for that matter, I pasted them into the wiki okay)

http://stonywebsites.co.uk/gallery-files.zip

Joss

[Mark]

Thanks Joss, That repaired the error message on the gallery page (no images showing though). I am getting an error with album child pages:

Calling up line 80:

Error: Call to a member function size() on a non-object (line 80 of C:\xampp\htdocs\processgallery\site\templates\TUT_gallery_functions.inc)

Line 80 below:

        $out .= "<img src='{$albumimage->size($thumbsize, $thumbsize)->url}'>";

[Joss]

Did you create the field gallery_thumbnail_size for the gallery?

As for not showing images, I am not sure - have you checked the source of your page to see if the image url is showing and is pointing at an image? You may have a path problem or something.

[Mark]

I have the thumbnail size field created.

I will try the gallery tut again from scratch. It could be I missed a vital step along the way. 

I appreciate your help Joss. Also, thanks for adding the news tut. Great work. 

[Mark]

 

Hi, When creating the gallery field, editing the details tab I miss read the instructions and read it as "it probably should be 1"! Silly mistake but it got me looking at the functions code in more detail! 

 

Instructions: Under the details tab, the number of images can either be limited (16 or 20 or something) or left as 0 for any number. However, for a gallery, it probably should be more than 1!

[guenter55]

Hi,

thanks for this fantastic tutorial, it works fine for me!

Now I want to add a pagination to albumGrid() like in albumList() in TUT_gallery_functions.inc, but I dont get it work.

Can you help me please?

[Mark]

Hi,

bit of a long shot, but do you have enough entries/articles to be paginated? 

http://processwire.com/talk/topic/942-pagination-on-blog-page/

[guenter55]

Hi Mark,

yes, there are enough images.

I can´t code where to set the limit:

function albumGrid() {
	$albumimages = wire("page")->gallery;
	$albumtitel = wire("page")->title;
	$text = wire('page')->body;
	$anzbilder = count(wire("page")->gallery);
	$thumbsize = wire("page")->gallery_thumbnail_size;
	$out = " ";
	
    echo "<div style='margin-left:25px;'><h3>$albumtitel ($anzbilder Bilder)</h3></div>";
    
	foreach ($albumimages as $albumimage) {
 
        $out .= "<a href='{$albumimage->url}' title='{$albumimage->description}' class='colorbox' rel='group'>";
        $out .= "<img src='{$albumimage->size($thumbsize, $thumbsize)->url}'>";
        $out .= "</a>";
 
	}
    }
	echo "<div class='albumgrid'>{$out}</div>";
	echo $albumimages->renderPager();
}

For my albumlist it works fine:

	// Get the list of albums - limited to ten for later pagination
 
	$albums = wire("pages")->find("parent=/albums/, template=TUT_gallery, limit=8, sort=-date_img_gallery");

I read on other post that´s not possible to make it like above, because no find() or get() ??

But one picture on one page is not my solution and I don´t understand it.

[Mark]

Hi there,

I'm still going through the docs myself, so I wouldn't take any advice from me for quite some time! 

I can only say that Ryan has done a great job documenting the pagination plugin (http://processwire.com/api/modules/markup-pager-nav/)

Another quick check -

Go to Admin > Setup > Templates > [Your Template] > URLs, and check the box for: Allow Page Numbers.

Sorry I cannot be anymore help. 

[tony]

Hi,

 

I have gone through the "Simple News System" tutorial on the wiki and have made a diagram to help myself to gain a better overview of the whole process. I would like to upload the diagram to the wiki but don't have an account. So here is the link: 

 

http://www.sendspace.com/file/tp7gkb

 

Comments much welcome. Btw, how can I get an account for the wiki?

[ryan]

Tony, thanks for making the diagram. I'm in the process of clearing out the Wiki since it's getting all kinds of unusual traffic and it's database has grown to multiple gigabytes (despite only having less than a megabyte of content). Basically, I'm concerned about the security of it, so am slowly moving the content over to the main site. Not to mention, I have no idea how to upload a file to this wiki. I will plan to include your diagram when this tutorial gets moved over to the main site. 

[PhotoWebMax]

How do you trash forum posts?