Photo Gallery Site

[Basil]

Hi to all Processwire experts!

i recently found Processwire this very promising cms, and i am very happy!

i was making sites until know  in joomla, and now i want to move to Processwire..

until know the posts help me to start a basic site like planets example but

i want to make a photography site with functionality similar to the video section: http://processwire.com/videos/using-the-image-thumbnail-plugin/

The layout i need is

SECTIONS

eg:

main menu- Categories

     sub menu-   -Hotels Photofraphy

                             -Hotel 1

                             -Hotel 2

                             -Hotel 3

     sub menu-   -Villas Photofraphy

                              -Villa 1

                              -Villa 2

                              -Villa 3

     sub menu-   -Commercial Photofraphy

                             -Commercial 1

                             -Commercial 2

                             -Commercial 3

when visitor click Categories link go to page that shows thumbnails of the subcategories (Hotels Photofraphy - VillasPhotofraphy - Commercial Photofraphy)

and when click Hotels Photofraphy thumb or link from menu goes to Hotels page that shows thumbnails of the subcategories (Hotel 1 - Hotel 2 - Hotel 3)

and then when click the Hotel1 thumb or link from menu goes to hotel1 page to view the photos and description of the hotel..

i read a lot of the very explained posts from members in the forum, but i have no experience with programming, so it's a little difficult to make it..

How to outpout this to my template

The best help i can have will be a process example (how you will do it) and code to achieve this.

i believe that this help for me, will help a lot of other designers also

I wish that someone make a book for Processwire with a lot of diferent website cases - examples... i will buy

Thank you all... and i am very sory for my bad english..

[Joss]

This week I will be doing a gallery tutorial with Flexslider. But to be honest, rather a lot of it is down to how you do your template.

For the moment, have a look at two tutorials I have done and one profile

The first is a basic get you going tutorial:

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

The second has more relevance as it teaches how to do a news system - that is relevant because if you are doing lots of albums with possibly categories as well, then you would use a lot of these techniques to sort it out

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

Lastly is my Bootwire Demo Profile

This is a Bootstrap profile with some Bootstrap elements demo'd - and that includes a very, very basic gallery:
 

http://processwire.com/talk/topic/2411-bootwire-basic-twitter-bootstrap-profile/

Make sure you go for the Demo, not the starter, as the starter has nothing in it!

Other than that I will work on a Gallery/album demo with categories and so on in the next few days, I hope. But it really is very straight forward. 

[Radek]

Last time i made simple gallery with code below:

Gallery template output:  breadcrumbs, first image thumb from children pages if they exists and image thumbs with links from current page if they exists.

Basicaly is posible make recursive gallery pages structure.

<?php
/**
 * Gallery template
 *
 * Need image field named 'images'
 *
 */

// thumbnails width/height
$twidth = 140;
$theight = 140;

/* Breadcrumbs */
$outBreadcrumbs = '<ul class="breadcrumbs">';
$root = $pages->get('/');
foreach($page->parents->remove($root) as $parent) {
    $outBreadcrumbs .= "<a href='{$parent->url}'>{$parent->title}</a> » ";
}
$outBreadcrumbs .= "{$page->title}";
$outBreadcrumbs .= "</ul>";

/* Child album list */
$outList = "";
if($page->numChildren > 0) {
    //goes thrue child pages
    $outList .= '<ul class="block-grid six-up mobile-three-up">';
    foreach($page->children() as $album) {
        //show only child pages with gallery template
        if (count($album->images) > 0 && $album->template == "gallery") {
            // get the first image
            $fimage = $album->images->first();
            // make a thumbnail
            $thumb = $fimage->size($twidth, $theight);

            $outList .= "<li>";
            //child album thumb link
            $outList .= "<a href='{$album->url}'><img class='album_thumb'src='{$thumb->url}' alt='{$album->title}' /></a>";
            //child album link
            $outList .= "<div class='panel gallery_dir_panel'><a href='{$album->url}'>{$album->title}</a></div>";
            $outList .= "</li>";
        }
    }
    $outList .= '</ul>';
}

/* Gallery images */
$outGal = "";

$outGal .= '<ul class="block-grid six-up mobile-three-up">';
foreach($page->images as $image) {
    $outGal .= "<li>";
    $thumb = $image->size($twidth, $theight);
    $outGal .= "<a href='{$image->url}' class='colorbox' title='{$image->description}'>";
    $outGal .= "<img class='gallery_thumb' src='{$thumb->url}' alt='{$thumb->description}' width='$twidth' height='$theight' /></a>";
    $outGal .= "<div class='panel gallery_panel'>{$image->description}</div>";
    $outGal .= "</li>";
}
$outGal .= "</ul>";

//$outGal .= "</div>";

/* Fill content area of main template */
$block1 = $page->block1 . $outBreadcrumbs . $outList . $outGal;

include("./inc/main.inc");
?>
 

[Basil]

Thank you a lot Joss, i have read this great tutorials, but with not clear idea yet about how to build the project above... i will wait for your tutorial about Flexslider.. it will hepl a lot!!

Radek hi and thank you for the help.. i make a new template and i paste your code but nothing output here is the code:

<?php 

/**
 * Home2 template
 *
 */

include("./head.inc"); 

echo $page->body;


/**
 * Gallery template
 *
 * Need image field named 'images'
 *
 */

// thumbnails width/height
$twidth = 140;
$theight = 140;

/* Breadcrumbs */
$outBreadcrumbs = '<ul class="breadcrumbs">';
$root = $pages->get('/');
foreach($page->parents->remove($root) as $parent) {
    $outBreadcrumbs .= "<a href='{$parent->url}'>{$parent->title}</a> » ";
}
$outBreadcrumbs .= "{$page->title}";
$outBreadcrumbs .= "</ul>";

/* Child album list */
$outList = "";
if($page->numChildren > 0) {
    //goes thrue child pages
    $outList .= '<ul class="block-grid six-up mobile-three-up">';
    foreach($page->children() as $album) {
        //show only child pages with gallery template
        if (count($album->images) > 0 && $album->template == "gallery") {
            // get the first image
            $fimage = $album->images->first();
            // make a thumbnail
            $thumb = $fimage->size($twidth, $theight);

            $outList .= "<li>";
            //child album thumb link
            $outList .= "<a href='{$album->url}'><img class='album_thumb'src='{$thumb->url}' alt='{$album->title}' /></a>";
            //child album link
            $outList .= "<div class='panel gallery_dir_panel'><a href='{$album->url}'>{$album->title}</a></div>";
            $outList .= "</li>";
        }
    }
    $outList .= '</ul>';
}

/* Gallery images */
$outGal = "";

$outGal .= '<ul class="block-grid six-up mobile-three-up">';
foreach($page->images as $image) {
    $outGal .= "<li>";
    $thumb = $image->size($twidth, $theight);
    $outGal .= "<a href='{$image->url}' class='colorbox' title='{$image->description}'>";
    $outGal .= "<img class='gallery_thumb' src='{$thumb->url}' alt='{$thumb->description}' width='$twidth' height='$theight' /></a>";
    $outGal .= "<div class='panel gallery_panel'>{$image->description}</div>";
    $outGal .= "</li>";
}
$outGal .= "</ul>";

//$outGal .= "</div>";

/* Fill content area of main template */
$block1 = $page->block1 . $outBreadcrumbs . $outList . $outGal;

include("./inc/main.inc");

include("./foot.inc");

i am rookie to code and to processwire, i only web design

if somebody can help me from how to begin,  what kind of fields i need, and how to output them in template.

the target i have is this:

when visitor click Categories link go to page that shows thumbnails links of the subcategories (Hotels Photofraphy - VillasPhotofraphy - Commercial Photofraphy)

and when click Hotels Photofraphy thumb or link from the menu goes to Hotels page that shows thumbnails of the subcategories (Hotel 1 - Hotel 2 - Hotel 3)

and then when click the Hotel1 thumb or link from menu goes to hotel1 page to view the photos and description of the hotel..
 

is posible for beginer to do this? with your help..

i like this cms a lot and i wiss i can use it. i dont want to go back to joomla

thank you all

_{dont forget the good we do - or give - come back}

[Radek]

I dont use separate header and  footer includes. To use it change line:

$block1 = $page->block1 . $outBreadcrumbs . $outList . $outGal;
 

to

echo $outBreadcrumbs . $outList . $outGal;
 

and delete line

include("./inc/main.inc");
 

This code belong to template file gallery.php and needs only one field  = images (type image).

[Basil]

Radek thank you very much!! it work i am so happy!!

thank you Radek Your help is very important..

[Basil]

Radek i am sory to bother you i have a small issue when i go to categories -> hotels -> hotel1...  it prints out the photos of hotel1 like i want

but allso output the hotels photo from the parent category::

categories -> hotels -> hotel1...

you have any idea how to fix this

thank you you make my processwire entrance a lot easier!!

[MatthewSchenker]

Greetings Basil,

Thank you a lot Joss, i have read this great tutorials, but with not clear idea yet about how to build the project above... i will wait for your tutorial about Flexslider.. it will hepl a lot!!

Putting together a slider is just a few steps in ProcessWire.

Check out the tutorial I wrote on how to do this with Galleria (the steps are the same for Flexslider):

http://processwire.com/talk/topic/2533-first-site-first-problem/page-2#entry24929

It's very exciting to know you can make these things work so nicely, and ProcessWire allows us to have that excitement over and over again!

Let me know if you have other questions.

Thanks,

Matthew

[Basil]

thank you MatthewSchenker for your help. very useful

i will try it when i finish with the issue i have above and let you know how i did it..

thank you again!!

[Basil]

Can somebody help me i fell so lost with this:

The layout i need is

SECTIONS

eg:

main menu- Categories

     sub menu-   -Hotels Photofraphy // when clicked show->

                             -Hotel 1 // show link & image
 

                             -Hotel 2 // show link & image

                             -Hotel 3 // show link & image

     sub menu-   -Villas Photofraphy // when clicked show->

                              -Villa 1 // show link & image

                              -Villa 2 // show link & image

                              -Villa 3 // show link & image

     sub menu-   -Commercial Photofraphy // when clicked show->

                             -Commercial 1 // show link & image

                             -Commercial 2 // show link & image

                             -Commercial 3 // show link & image

when visitor click Categories link go to page that shows thumbnails of the subcategories (Hotels Photofraphy - VillasPhotofraphy - Commercial Photofraphy)

and when click Hotels Photofraphy thumb or link from menu goes to Hotels page that shows thumbnails of the subcategories (Hotel 1 - Hotel 2
- Hotel 3)

and then when click the Hotel1 thumb or link from menu goes to hotel1 page to view the photos and description of the hotel..
 

i read a lot of the very explained posts from members in the forum,
but i have no experience with programming, so it's very difficult to work with processwire.. i need example of what fields to make and what code to use  to outpout this to my template
 

The best help i can have will be a process example (how you will do it) and code to achieve this.

Thank you very very much!!

[diogo]

Create the structure exactly how you want it in the admin tree and the URLs will follow the same logic, from there you can easily build the menus. For this have a look at this module http://modules.processwire.com/modules/markup-simple-navigation/

Plus, don't only read the links that Joss pointed to. Spend some time following them and try to build those sites yourself before starting to work on your own.

[wishbone]

i am rookie to code and to processwire, i only web design

I feel with this guy... I like this system it's so clever and smooth!

But for non-coders, it's very very difficult.

Which is a pitty, because it's so worth for more people to like and use it!

[Basil]

thank you diogo for your help! i have look at the most tutorials and posts but not find something very similar to what i look for, if i see it in action this will help me a lot..

thank you wishbone

and i agree with you. processwire cms is the best i ever try, it works like all designer dreaming, i wiss i have time for this website i want to make to stay with processwire and try to learn it. but sure for next project!!!

thank you!!

[pwired]

I feel with this guy... I like this system it's so clever and smooth! But for non-coders, it's very very difficult. Which is a pitty, because it's so worth for more people to like and use it!

That is only because php looks unfamiliar to a designer who thinks that php is only for experienced coders. That was my cms thinking also for a long time. Until I saw how easy you can mix html and php tags in Processwire. After playing for a while with simple php tags in processwire your opinion will change. The thing with php (and any other programming language) is that you "have to get into it". Just start with the PW tutorials and first learn to use simple php tags like <?php echo $page->title; ?> Here is a good start http://processwire.com/api/templates/ Later on you can learn something more like a for each in php. Check this post also

http://processwire.com/talk/topic/2994-learning-php/#entry29499

[Joss]

Here is the new Simple Gallery tutorial

http://processwire.com/talk/topic/3046-simple-gallery-tutorial-for-processwire/

[wishbone]

That is only because php looks unfamiliar to a designer who thinks that php is only for experienced coders.

I can manage normal tasks I have been using modX which I don't find so very different.

Except if it get's more in depth ^^

I have learned (have been learning?) a little php and JS to get the syntax, but...

[Basil]

Thak you all for your help!!

Joss thank you a lot i start reading you great tutorials...

http://wiki.processw..._Gallery_System

Basic Website Tutorial

Simple News Tutorial.