How to reuse or reference (selected) images across site without duplication?

[ai_slop]

Hello all, Another day, another thread! 😅

So I'm building out a portfolio site bit by bit, and trying to learn how ProcessWire works for clients in the meantime.
Below is a screenshot of what a project page might look like. The project header is made with a project repeater and some txt fields. Below this is another repeater (sections) - that's where my project images live.


What I'd like to make:

• a curated gallery page (like a photographer's portfolio page) where I can manually choose images from across my project pages to be displayed in a masonry style layout (e.g. like Masonry.js https://masonry.desandro.com/)
• I'd like to avoid duplication or double uploads - I'd like to reuse existing project images and keep my setup as fast/light as possible
• Clicking an image on the gallery should link to the related project
• Ideally without resorting to third party solutions - could image tags be used like an image reference?

I've read a discussion on community requests for something like an image reference field (which would be great) but it looks like this isn't natively supported in PW yet:
https://github.com/processwire/processwire-requests/issues/207
 

I'm wondering if I could use PW's built in image tags or something and then display all of those on a gallery page layout. But I'm not sure if I could grab the related project page links through tags alone? Fyi, I'm also using the PageimageSource module to keep things efficient. https://github.com/nbcommunication/PageimageSource

Beginner here, so maybe I'm thinking about this the wrong way. Would be nice to hear your thoughts. Thanks!

 

Edited 11 hours ago by ai_slop

[elabx]

2 hours ago, ai_slop said:

• I'd like to avoid duplication or double uploads - I'd like to reuse existing project images and keep my setup as fast/light as possible

My personal solution for this issue, without using third party modules, has been:

Setup a page reference field on the home template, that lets me pick the projects I want to showcase, and I make the assumption that l'll pick the first image of the gallery of each project. 

So i the home template you'll end up with something like:

<div id="masonry-gallery"> 
  <?php foreach($page->portfolio_pick as $project):?>
      <img src="<?=$project->gallery->first->url?>">
  <?php endforeach ?>
</div>

- gallery being the field within the project template.
- portfolio_pick being the page reference field on the home template. 

Another thing I've done, but that I'm not a huge fan of for certain uses, is adding a extra fields to the image field, in this example, the field "gallery" in the project template. So you can then code something like this on the home template:

<div id="masonry-gallery"> 
  <?php foreach($page->portfolio_pick as $project):?>
      <img src="<?=$project->gallery->findOne('is_main_image=1')->url?>">
  <?php endforeach ?>
</div>

 

 

[ai_slop]

Hi @elabx Thanks for your post.

Your code looks clean but I'd like a little more flexibility ideally for my use case.

I'd like the option to choose any image from my projects (not just the first).
Also, sometimes I'll need to pick more than one image from the same project for display on the masonry gallery.

For this reason, I'm thinking image tags might be the way to go but then the question is, how do I wrap that image in a link to its respective project page..

Page references seem like the way to go, but I'm still trying to wrap my head around how these work tbh. Custom image fields could also work but I'm trying to keep things as simple as possible. I also don't want to screw up alt fields for SEO and I'm looking to use PageimageSource to manage srcset and webp automatically (maybe I'm looking to learn too much at once for my first PW site 😂) https://github.com/nbcommunication/PageimageSource


Assuming all image fields are image arrays with tags enabled in admin, could I do this?:

// "sections" is the repeater on my projects pages that contain images and content.
// "project_header" is a repeater in project template that contains project title and info.
// Can I can use find() to get repeaters with template=repeater_repeaterName, like this?

$projSections = $pages->find("template=repeater_sections, images.tags=gallery");  

foreach ($projSections as $section) {
    $projectPage = $section->getForPage();
    $title = $projectPage->project_header->first()->project_title;
    
    foreach ($section->images->findTag("gallery") as $img) {
        echo "<a href='{$projectPage->url}' title='{$title}'>";
        echo $img->render(); 
        echo "</a>";
    }
}

It seems inefficient to me to have to parse through all project content repeaters for tagged images like this but maybe with caching it wouldn't be a problem?

In my setup project title and description text is in one repeater, and all images are in another - not sure if that complicates things. I would like to wrap each image in a <a> that links to the respective project page.

 

Edited 5 hours ago by ai_slop