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.
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
label: Gallery Image
label: Venue Name
label: Venue Website
label: Venue Description
placeholder: Enter description of venue here.
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:
// 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() ?>
<div style="background-image:url(<?= $image? $image->url() : '' ?> )"</div>
<!-- and somewhere within this loop the rest of the information, e.g. -->
<?= $galleryitem->venue_description()->html() ?>
<?php endforeach ?>
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?
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.
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.