Search the Community

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

Hello from a newbie I am playing around with PW for the first time, trying to build some kind of foto blog. So after I followed the steps in Joss’ tutorial for the gallery I modified and tweeked the files a bit to suit my wishes. Seems to work pretty well so far. Except … My albums are all in the folder "albums" (as suggested by Joss). So far I have three albums: Azoren, Berlin, Wien. On each page (and on the page, that gives an overview of the albums) I want to have a list of all the albums. So I took one of Joss’ functions and modified it like so: function albumList(){ // Get the list of albums $albums = wire("pages")->find("parent=/albums/, template=mat_gallery"); $out =" "; //Loop through the pages foreach($albums as $album){ $out .="<li><a href='{$album->url}'>{$album->title}</a></li>"; echo "<ul>$out</ul>"; } } What it produces is the following HTML: <ul> <li><a href='/processwire/albums/azoren/'>Azoren</a></li> </ul> <ul> <li><a href='/processwire/albums/azoren/'>Azoren</a></li> <li><a href='/processwire/albums/berlin/'>Berlin</a></li> </ul> <ul> <li><a href='/processwire/albums/azoren/'>Azoren</a></li> <li><a href='/processwire/albums/berlin/'>Berlin</a></li> <li><a href='/processwire/albums/wien/'>Wien</a></li> </ul> I.e. it keeps repeating the list in a strange way. I haven't the faintest as to where I went wrong. Help therefore apreciated very much. Thanks.