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 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
    • By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
      Regards
      Annemie
    • By louisstephens
      I was really unsure of how to actually title this post, so I do apologize (if someone has a better idea, I will gladly edit it). I am using the profields: pagetable field to allow people to create their own "content" (copy, image, button, etc etc) and rearrange it. I also included a field called "column_size" using the RangeSlider set to (1-12).
      I guess I'll clarify a bit more on this. I am using flexbox where the "row" is <section></section> and the columns are <div class="column"></div> have given the "columns"  flex: 1 1 0; so no matter how many columns you have, the columns will automatically adjust for new content. Where my confusion is coming in: If a user has set up 3 copy items (with 12, 5, 7 respectfully for the column_size), how do I actually output this in my template? I was going to use a switch statement to handle the various items which I thought made it quite easy, but with closing sections and columns I have confused myself as I assume I need an if statement to check if the column size is > 12, or = 12 to determine the actual closing/opening of sections. I apologize if I have not made this very clear. I am a bit unsure how to word this let alone to go about this. 
      Im very appreciative of for any insight into this.
       
       
×
×
  • Create New...