I am trying to build a photo grid block on the home page. I built a grid gallery widget in the panel which will allow the client to manage the photos in the grid block, as well as change the descriptions and title associated with each image.
The pictures field and venue field both generate arrays in the content file which I would like to loop through to generate the below grid structure in the home page:
I have tried to utilize a foreach to loop through the pictures array to place in the background-image url:
<?php foreach(page('gridblock')->pictures()->yaml() as $image): ?>
<?php if($image = page('gridblock')->image($image)): ?>
But by using the above, I am at a loss as to how to utilize the additional loop inside to generate the venue content while the first loop generates the image content.
Wouldn’t it make more sense to select the image within the structure field, so that you have everything that belongs together in one place and in one collection, instead of dealing with two different arrays? Imho, your current structure is not easy to manage for the user if the order. of the images will later be changed, they have to change the order of structure field as well
venue:
label: Gallery
type: structure
entry: >
{{venue_name}}<hr>
{{venue_description}}
fields:
picture:
label: Gallery Image
type: image
venue_name:
label: Venue Name
type: select
options: query
query:
page: venues
fetch: children
value: '{{title}}'
venue_website:
label: Venue Website
type: text
venue_description:
label: Venue Description
type: textarea
placeholder: Enter description of venue here.
You are absolutely correct. It does make more sense to include the image within the structure field. I am still at a loss however as to how to access the two arrays while generating the <li>.
If you would have any recommendation on how better to structure this, I would deeply appreciate any advise!
As I said, if you put everything into your structure field, why would you need two loops? All the information you need is then in your structure collection so you would end up with code like this, based on the structure field in my last post:
<ul >
<?php
// fetch the structure field items into a collection
$gallery = $page->gallery()->toStructure();
// loop through. the collection, fetching the image and the rest of the information
foreach($gallery as $galleryitem): ?>
<?php $image = $galleryitem->picture()->toFile() ?>
<li>
<a href="#">
<div style="background-image:url(<?= $image? $image->url() : '' ?> )"</div>
<div class="box-wrap">
<!-- and somewhere within this loop the rest of the information, e.g. -->
<?= $galleryitem->venue_description()->html() ?>
<span>Learn More</span>
</div>
</a>
</li>
<?php endforeach ?>
</ul>
Thank you very much for your assistance thus far.
I have adjusted the code to reflect your suggestion and it makes sense to me now. My current issue however is that the image gallery plugin will no longer work once it is embedded within the fields . The plugin I decided to use was the Kirby Images. Would you happen to know of any gallery plugins that could work inside the fields for this particular application, or can this plugin files be easily modified to work inside the fields?
Why do you want to use the gallery plugin inside the structure? That would only make sense if one structure item had more than one image? But I got probably got you wrong.
I thought I had use the images field within structure field before, I’ll do a quick test.
Edit: yes, that still works, only dragging and dropping doesn’t work.
The intent is to allow the client to change out the images as well as the title and text that are laid over each image in the panel. The layout in the panel will mirror how it is laid out in the home page; therefore, the client can easily manage any changes.
The gallery plugin works well for the image functionality, but it lacked the title/text editing capabilities. This is why I decided to use a structure field right below the gallery plugin and use custom CSS to display each field as a grid, mirroring the images gallery, where the client can go in and change out the content. Ideally of course, if there were a plugin that allowed the gallery drag and drop functionality as well as content editing for each image, that would have been the easiest solution.
I feel that with the images field inside the structure field, it will defeat the purpose of the nice grid gallery feature of the plugin.
As I already said, if you have a 1 image : 1 description relation, using the images field plugin within the structure field doesn’t make any sense.
I know understand that the important part here was to display a grid IN THE PANEL, I missed that before. However, you could display the image within the structure field and then use. a bit of CSS to do the job, an example can be found here: Structure field & multiple images preview
(It would be best to use the snippet field instead of the structure field in this case, because it makes it easier to display the image together with the description in the Panel). Ignore the fact that it has been moved to the deprecated plugins repo, it has been abandoned but is still usable.
Thank you so much for all the advise! I will give the snippet field a try here shortly.
I have also previously read the example you cited, as well as the related topic here. The only issue it seems with this approach is that they used the selector plugin to aid with hard coding the URI; however, that plugin appears to be discontinued.
If you use the snippet field in combination with the image field, it shouldn’t be a problem, the snippet field didn’t exist at the time the other thread was created.
I feel like it is almost there! I went ahead with using the snippetfield in combination with the images field.
I have the images gallery on top, with a snippetfield table below it with the description content. I also found in the forums a CSS method to add a column for indexing the row position.
I was just curious whether there is a aggregated source of kirby application code examples available which could be referenced. The forum has great content already and the docs are great, but they are limited in its scope in providing actual code examples.
