Jump to content
Matt_P

Creating A Gallery That Uses Albums

Recommended Posts

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

slider.png

tiles.png

Share this post


Link to post
Share on other sites

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/

  • Like 1

Share this post


Link to post
Share on other sites

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++;
    }
}

 

  • Like 3

Share this post


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

fields.png

repeater.png

Share this post


Link to post
Share on other sites

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++;
}

 

  • Like 3

Share this post


Link to post
Share on other sites

Hi Robin S,

Thank you very much that has solved my issue.

Thanks,

Matt

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 franciccio-ITALIANO
      Hello to all. I would like to create an app. So I need to learn at least one programming language. I got informed online, and discovered that javascript with node.js, is the revolution of recent years, because it's faster than php. I wonder: if I develop an app with javascript and with a javascript framework (e.g. Meteor), is there a way to integrate processwire work? I know that processwire supports the transformation of the site into an application, but would it be as simple as Meteor? With the Meteor framework I have my app online in 10 minutes, and without even knowing javascript! (Knowing javascript would serve to personalize it). I should then install the app in a SUB-DOMAIN. If I study php, instead, and if I use a php framework (e.g. Laravel), how long does it take to have my first working app? Is it easy to process Laravel's components? Is writing forms for processwire apps with php a very complex job? Is it better to use Meteor and start with javascript? What would you recommend?
    • By Marvin
      Hello, i want to ask, i maintain a website that using a processwire and php, and i want to make an archive at my website using a subfolder system, but when i try,
      the sebfolder is show but when i click the files in that subfolder not show, and my browser just show me an error Invalid argument supplied for foreach(), i don't know why it error
      Here i attach my code and my screenshoot website :
      This is my code

      This is result of my website

      This is my error

       
       
    • By ragnarokkr
      Hi everyone. A lot time not writing here but periodically checking for the nice updates.
      I'm facing a problem and not able to figure out how to solve it easily  🤕  (admitedly that something in programming is easy 😂).
      I'm trying to implement featured and gallery fields for generic post. My problem is that I need to have the Inputfield reading/writing the images from/to a system folder rather than a page. Reason of that is that:
      customer stressed me out about the need to have a WordPress-ish 🤮 central folder for images; if referencing images from a page, possible future changes to the source page will change accordingly all images src link, breaking everything (and I'm trying to keep the backend as lighter as possibile by not fill it with modules which keep track of this and that at every change). I'm actually using the great ImageReference module, but I'm still facing some issues I already exposed on its GitHub repo, which I'll try to summarize here:
      image preview not (yet) responsive in edit page, or at least in my case it doesn't work as (I) expected; no scrolling in image selection (widget expans a lot especially if the container is narrow); no description available for the uploaded images. What I would like to have is the power of the default FieldtypeImage combined to the huge range of choices ImageReference gives out of the box, but from what I did understand the author is not interested into merging the things.
      All this brings me to the final question, which is:
      since I actually cannot afford to spend a lot of time reinventing the wheel, and is low-budget work, is there a way to hook some event from the default FieldtypeImage right before it uploads or reads the file from the page's folder, in a way I can modify the path by routing it to a folder of my choice?
      I hope I've been able to make clear my thought 🙈
       
    • By Majesrse
      Hey i have a problem with the code:
      $('a').click(function(link) { link.preventDefault(); location = this.href; $('body').fadeOut('slow', open); }); function more() { window.location = location; } It's writen in Jquery but i will convert it to vanilla js. Can somone help me with it?
    • By Mithlesh
      Hi there,
      My form is not getting submitted, it is showing:
      Unable to verify successful email delivery of this form submission.
      Attaching for your reference as well: 

      In the Backend, it is showing Connection timed out with smtp.gmail.com
      Pl guide me how to resolve that
×
×
  • Create New...