Jump to content

Simple Gallery Tutorial for ProcessWire


Joss
 Share

Recommended Posts

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

  • Like 9
Link to comment
Share on other sites

  • 1 month later...

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) 
Link to comment
Share on other sites

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}'>";
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

 

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!
Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

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?

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 8 months later...

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

  • Recently Browsing   0 members

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