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 picarica
      so i am trying to fetch dimensions of image using getimagesize() but it returns nothing, at least i think so, i want to feed it to data attribute, bit its emtpy, i tried feeding it the image directly or just image->url
      here is my source code

       
      foreach($page->repeat_body as $r_body) { /* other code here*/ if ($r_body->gallery_check == 1) { echo "<div class='my-gallery' id='grid-gallery' itemscope itemtype='http://schema.org/ImageGallery'>"; foreach($r_body->image as $image) { $options = array('quality' => 80, 'upscaling' => true, 'cropping' => 'north', 'sharpening'=>'medium'); $thumb = $image->size(400, 400, $options); $large = $image->size(1280, 0, $options); list($width, $height) = getimagesize($image->url); echo " <figure itemprop='associatedMedia' itemscope itemtype='http://schema.org/ImageObject'> <a href='$large->url' itemprop='contentUrl' data-size='$widthx$height' data-index='0'> <img src='$thumb->url' height='$height' width='$width' itemprop='thumbnail' alt='Beach'> </a> </figure>"; } echo "</div>"; } /* other code here*/ } now, the images are outputted correctly, i can open then and browse them
    • By picarica
      Hello si have this gallery, pretty good website, but yesterday client uploaded over 3000 images oto the site, and it cannot handle filtering them out and showing them at the same time , i wanted some simple pagination maybe infinite scrool or onclikc load whatever, but i cannot seem to implement infinite ajax scrool and any other JS methods, nut sure why i still got stuck at the next method, like there is not next page.
      so i wanted to implement PW method of paginating i wanted to use MarkupPagerNav
      so far i have  this code for outputting images
      $pa = $pages->find("template=basic-page|art_gallery, images.tags!=''"); /* $pa = $pages->find("has_parent!=2,id!=2|7,status<".Page::statusTrash.",include=all"); */ echo "<div class='js-filter' id='gal' >"; /* row gtr-50 gtr-uniform */ $frame = $pages->get('/settings/')->watermark; foreach ($pa as $p) { foreach($p->images as $image) { if(!$image->hasTag("act")) { $options = array('quality' => 80, 'upscaling' => true, 'cropping' => 'north', 'sharpening'=>'medium'); $large = $image->size(1200, 0, $options); $wmImage = $large->pim2Load('wm1', ['quality'=>80, 'upscaling' => true, 'sharpening'=>'medium', 'defaultGamma'=>-1])->watermarkLogo($frame, $position='se',$padding=1.5)->pimSave(); /* zmazanie variacii, treba odpoznakovat ked sa menia nastavenie vyssie */ /* $image->pim2Load('wm1')->removePimVariations(); */ $thumb = $image->size(400, 300, $options); echo "<div class='$image->tags grid-item' style=''>"; echo "<span style='overflow:hidden;'class='image fit'>"; echo "<a class='hvr-reveal' href='$wmImage->url'>"; echo "<img uk-scrollspy='cls: uk-animation-fade; repeat: false' src='$thumb->url' alt='$image->tags'>"; echo "</a>"; echo "</span>"; echo "</div>"; } else { $options = array('quality' => 80, 'upscaling' => true, 'cropping' => 'north', 'sharpening'=>'medium'); $large = $image->size(1200, 0, $options); $wmImage = $large->pim2Load('wm2', ['quality'=>80, 'upscaling' => true, 'sharpening'=>'medium', 'defaultGamma'=>-1])->pixelate(25)->smooth(255)->watermarkLogo($frame, $position='se',$padding=1.5)->pimSave(); /* zmazanie variacii, treba odpoznakovat ked sa menia nastavenie vyssie */ /* $image->pim2Load('wm2')->removePimVariations(); */ $thumb = $image->size(400, 300, $options); echo "<div class='$image->tags blur grid-item' style=''>"; echo "<span style='overflow:hidden;'class='image fit'>"; echo "<a class='hvr-reveal' href='$wmImage->url'>"; echo "<img uk-scrollspy='cls: uk-animation-fade; repeat: false' src='$thumb->url' alt='$image->tags'><span>18+</span>"; /* <span>BY OPENING THIS IMAGE YOU CONSET THAT YOU'RE 18 YEARS OR OLDER</span> text copyraightova,y dat vedla obrazky potom */ echo "</a>"; echo "</span>"; echo "</div>"; } } }; to put it  simply, it first searches for sites, and then outputs all images from those sites, pretty simple, it also uses watermarking and uikit filtering
      i have filtering done like this
      $num = 1; echo "<ul class='uk-subnav uk-subnav-pill'>"; foreach(array_unique($alltags) as $key => $tag) { echo"<li uk-filter-control='filter: .$tag;group: $num' class='butt$num' uk-toggle='target: .butt$num ; animation: uk-animation-fade; queued: true'><a href='#'>$tag</a></li>"; echo"<li uk-filter-control='group: $num' class='butt$num active' aria-hidden='true' hidden='' uk-toggle='target: .butt$num; animation: uk-animation-fade'><a href='#'>remove - $tag</a></li>"; $num++; } echo "</ul>"; simple, but i have NO idea how to implement pagination, just because it seems to work that it like find all images, and stores with limit, and then just paginates them, but i cannot apply this method in my code.
      any idea how to make any JS inifite scroll work ? or just how to make this work ? with my setup, or with some modifications, it just have to work as is now
    • 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 🙈
       
×
×
  • Create New...