Basil

Photo Gallery Site

Recommended Posts

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..

Share this post


Link to post
Share on other sites

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. 

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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

thank you Radek Your help is very important..

Share this post


Link to post
Share on other sites

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!!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!!

Share this post


Link to post
Share on other sites

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!!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

  • Like 1

Share this post


Link to post
Share on other sites

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!!

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By AndZyk
      Gallery Claeys is a art gallery in Freiburg, Germany, with focus on exhibitions of female artists. Our agency designconcepts developed a website that features the latest exhibitions of the gallery as well as an archive of previous exhibitions. Every artist has its own page with an excerpt of their works and a vita of the artist.
      The website was build with help of the framework UIkit and Barba.js for smooth transitions between pages.
      www.galerie-claeys.de
       
      Features:
      Exhibitions Page transitions  
      Exhibitions
      On the homepage you can find a preview of upcoming or current exhibitions as well as an archive of previous exhibitions. Based on the date the exhibitions get automatically sorted in one of the three categories (preview, current or archive). Each category has its own deep-link with URL segment.
       
      Page transitions
      The smooth fading page transitions are made with Barba.js.
       
      Modules used:
      Front-End Page Editor Markup Sitemap XML ProCache Tracy Debugger Upgrades  
      Regards, Andreas
    • By modifiedcontent
      Is there a way to change the input options for the images field?
      I am trying to figure out if it would make sense to use an external script like Zenphoto as a central media library/manager. How could I connect that with Processwire?
      'Choose File' in the images field would have to be able to open that 3rd party media library or a directory on the server or some cloud service instead of (only) the client file manager.
      Could justb3a's field type module Image Extra be part of the solution? I will try that and report back. Other field types/modules?
      I know there is a pro module Media Manager that does look very slick, but would prefer to make this work with a mature, tested 3rd party script if a central media gallery is never going to be a core Processwire feature.
    • By David Koplin
      Hello dear community
      I have a problem with a front edit possibility inside a OWL gallery.
      The thing is, normally you do a double click to edit something directly on a page.
      In my case a single click opens up a picture inside a gallery, so I can't "hit" the editing.

         
                           <div class="demo-gallery">                             <ul id="lightgallery2" class="list-unstyled row">                                 <li class="img-md-12 mb-12 mb-sm-12 mb-md-12 mb-lg-12 mb-xl-12 col-12 col-md-12 img-fluid full-height" data-responsive="" data-src="<? echo $page->page_home_owl_00_img->url; ?>" data-sub-html="<h4><? echo $page->page_home_owl_00_h4; ?></h4><p><? echo $page->page_home_owl_00_p; ?></p>">                                     <a href="">                                         <img class="img-responsive" src="<? echo $page->page_home_owl_00_img->url; ?>">                                     </a>                                 </li>                                                                  <? foreach($page->children('template=9dk-owl-home') as $item): ?>                                 <li class="img-md-6 mb-3 mb-sm-3 mb-md-3 mb-lg-3 mb-xl-3 col-12 col-md-6 img-fluid" data-responsive="" data-src="<? echo $config->urls->templates ;?><? echo $item->page_home_owl_01_img; ?>" data-sub-html="<h4><? echo $item->page_home_owl_01_h4; ?></h4><p><? echo $item->page_home_owl_01_p; ?></p>">                                     <a href="">                                         <img class="img-responsive" src="<? echo $config->urls->templates ;?><? echo $item->page_home_owl_01_img; ?>">                                     </a>                                 </li>                                 <? endforeach; ?>                                                         </ul>                         </div>  
      I tried any variants of options C and D from this page:
      https://processwire.com/api/modules/front-end-editing/
      Are there any hints for me, what I can do?
      Any help is highly appreciated!

      Best from Munich in Germany
    • By jothanne
      I have a problem realizing a picture gallery with albums using repeater fields.
      Here is what I have:
      - The repeater field 'repeater_gallery' for all the albums
      - A text field 'album_name' in the repeater for the album name
      - An image field 'album_images' in the repeater for all the album images
      Now I'd like to pick a small selection of images (say 4) of ALL albums randomly and present them with their associated album name.
      How can this be done with the described repeater setup? Or is there a better way to realize such a gallery without repeaters?
      Thanks in advance for a little help.
    • By Kiwi Chris
      Marlborough Camera Club
      Originally this was a site built in Concrete 5 that I inherited when the previous webmaster became pregnant. It was horribly slow, and very hard to edit without making mistakes. I kept the existing theme, but converted the whole site to Processwire, resulting in a massive improvement in performance, and the ability to delegate authority for editing parts of the site to other club members.
      Not publicly visible, but another feature I added was an competition entry form that integrates with Dropbox so instead of having email entries, frequently with errors, they could enter directly via the site.