Creating A Gallery That Uses Albums

[Matt_P]

Hi everyone,

I am trying to create a gallery of tiles where the user can click a tile and it will open another set of images that are unique to that tile.

So a page of albums.

I am using repeaters so that the user can add albums, without having to create fields or pages. However I am struggling to separate the albums into the desired tile, since at the moment all the albums I have uploaded to PW come back.

Generally my code is quite messy and I haven't coded some elements that I have described. Since I was unsure how to progress, I was experimenting with things like having each album having an number so that I could Identify them.

Also I am using UIKit for scrolling through the album.

See code below.

<?php
include("./head.inc"); ?>

<!--Image Viewer-->
<div id="back" class="back">
    <a href="javascript:void(0)" onclick="closeAlbum()" class="material-icons">close</a>
<div class="uk-container uk-container-center">
  <div class="uk-container uk-container-center uk-width-3-4">
    <div id="slideshow" data-uk-slideshow="{autoplayInterval:1000}">
      <div class="uk-slidenav-position">
        <ul class="uk-slideshow">
            <?php
                $i=1;
                foreach ($page->album_repeater as $item) {
                    echo "<li class='album-$i'>";
                    foreach ($item->album_images as $image) {  
                            echo    "<li>";
                            echo        "<img src='{$image->url}'>";
                            echo    "</li>";
                    }
                    $i++;
                }
                echo "</li>";
            ?>
        </ul>
        <ul>
          <a href="" class="gl uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
          <a href="" class="gl uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
        </ul>
      </div>
    </div>
  </div>
</div>
</div>

<!--Album Thumbnails-->
<div id="content" class="uk-width-1-1 uk-grid" style="min-height: calc(100% - 100px);">
    <div id="gallery" class="uk-width-8-10 uk-container-center uk-flex uk-flex-center uk-flex-middle uk-grid" data-uk-grid="{gutter: 20}">
        <?php
        $th = "";
        foreach($page->album_repeater as $item){
            $th .= "<div class='gallery-item uk-width-small-1-2 uk-width-medium-1-3 uk-width-large-1-6'>";
            $th .=     "<a id='thumb' class='uk-panel' onclick=";
            $th .=         "'openAlbum()'";
            $th .=         "><img src='{$item->album_images->first()->url}'>";
            $th .=     "</a>";
            $th .= "</div>";
        }
        echo $th;
        ?>
    </div>
</div>

<script>
    function openAlbum() {
        document.getElementById("back").style.display = "block";
        document.getElementById("thumb").style.display = "none";
        document.getElementById("content").style.display = "none";
    }
    function closeAlbum() {
        document.getElementById("back").style.display = "none";
        document.getElementById("thumb").style.display = "block";
        document.getElementById("content").style.display = "block";
    }
</script>

<?php
include("./foot.inc");

As a visual aid I've attached screenshots of what the code produces. First Image is the album where you can slide through the images. The second is the tiles that when clicked open the associated album.

Does anyone know any solutions or existing gallery's similar to the idea above (preferably tutorials). 

Thanks,

Matt

[szabesz]

Quote

Does anyone know any solutions or existing gallery's similar to the idea above (preferably tutorials). 

@Matt_P How about this one? http://blog.mauriziobonani.com/processwire-basic-website-workflow-part-2/

This is part of a four part tutorial: http://blog.mauriziobonani.com/tags/#processwire

[Robin S]

I think the problem you're having with the slideshow is a JS issue rather than a PW issue - as far as I can tell the UIkit slideshow component doesn't support dynamically adding/removing images out-of-the-box. And this is what you would need if you want the slideshow to load galleries according to which thumbnail below is clicked. You would have to code your own JS solution for this, which could be challenging.

You might be better off to look for an image viewer script that has documentation/examples for loading galleries from a single link. For instance, if you were using Fancybox you could follow one of the examples below:
http://jsfiddle.net/T6NKD/
http://jsfiddle.net/jekAe/

[Robin S]

Here is another option that uses URL segments to get the individual repeater galleries. This would allow you to continue using the UIkit slideshow.

// The repeater field is called 'galleries'
$galleries = $page->galleries;

// Set defaults
$current_gallery = $galleries->first();
$gal_number = 1;

// Deal with url segments
if($input->urlSegment(1) !== '') {
    // Sanitize url segment and subtract 1 to adjust for zero-based index
    $gal_zero_index = $sanitizer->int($input->urlSegment(1)) - 1;
    // Throw a 404 if the url segment is out of range
    if( $gal_zero_index < 1 || $gal_zero_index >= $galleries->count() ) {
        throw new Wire404Exception();
    } else {
        $current_gallery = $galleries->eq($gal_zero_index);
        // Add 1 to give one-based index
        $gal_number = $gal_zero_index + 1;
    }
}
if($input->urlSegment(2) !== '') {
    throw new Wire404Exception();
}

// Gallery heading
echo "<h3>Gallery $gal_number</h3>";

// Slideshow
foreach($current_gallery->images as $image) {
    // Output markup for slideshow here
}

// Gallery links (thumbnails)
$i = 1;
foreach($galleries as $gallery) {
    if($gallery->images->count()) {
        $link = $i > 1 ? $page->url . "$i/" : $page->url;
        $class = $i === $gal_number ? ' current' : '';
        echo "<a class='gal-link{$class}' href='$link'><img src='{$gallery->images->first->size(100,100)->url}' alt=''></a>";
        $i++;
    }
}

 

[Matt_P]

On 8/2/2016 at 11:30 PM, Robin S said:

You might be better off to look for an image viewer script that has documentation/examples for loading galleries from a single link. For instance, if you were using Fancybox you could follow one of the examples below:
http://jsfiddle.net/T6NKD/
http://jsfiddle.net/jekAe/

Hi Robin S,

This is pretty much what I was after and I have implemented Fancybox. However I'm not very experienced in PHP or using fields in Processwire.

So my issue is now (Referring to the first Fiddle) is converting the below code into PHP referencing the repeater fields in Processwire using a loop.

<a class="fancybox" rel="gallery1" title="Gallery 1 - 1" href="<?=$config->urls->templates?>fancybox/demo/1_b.jpg">
    <img src="<?=$config->urls->templates?>fancybox/demo/1_s.jpg" alt=""/></a>

<div class="hidden">
    <a class="fancybox" rel="gallery1" title="Gallery 1 - 2" href="<?=$config->urls->templates?>fancybox/demo/2_b.jpg">
        <img src="<?=$config->urls->templates?>fancybox/demo/2_s.jpg" alt=""/></a>
    
    <a class="fancybox" rel="gallery1" title="Gallery 1 - 3" href="<?=$config->urls->templates?>fancybox/demo/3_b.jpg">
        <img src="<?=$config->urls->templates?>fancybox/demo/3_s.jpg" alt=""/></a>
</div>

<a class="fancybox" rel="gallery2" title="Gallery 2 - 1" href="<?=$config->urls->templates?>fancybox/demo/4_b.jpg">
    <img src="<?=$config->urls->templates?>fancybox/demo/4_s.jpg" alt=""/></a>

<div class="hidden">
    <a class="fancybox" rel="gallery2" title="Gallery 2 - 2" href="<?=$config->urls->templates?>fancybox/demo/5_b.jpg">
        <img src="<?=$config->urls->templates?>fancybox/demo/5_s.jpg" alt=""/></a>
</div>    

My repeater field is called 'album_repeater' and the images for my album are called 'album_images'. Also see attached Images.

Thanks,

Matt

[Robin S]

Rather than put the "hidden" class on a containing div I would put it on the thumbnail links that you don't want to show.

$album_iteration = 1;
foreach($page->album_repeater as $album) {
    $image_iteration = 1;
    foreach($album->album_images as $image) {
        $class = $image_iteration == 1 ? '' : ' hidden';
        echo "
            <a class='fancybox{$class}' rel='gallery{$album_iteration}' title='Gallery {$album_iteration} - {$image_iteration}' href='{$image->size(800,800,array('cropping'=>false))->url}'>
                <img src='{$image->size(200,200)->url}' alt=''/>
            </a>
        ";
        $image_iteration++;
    }
    $album_iteration++;
}

 

[Matt_P]

Hi Robin S,

Thank you very much that has solved my issue.

Thanks,

Matt