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 February 24 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 February 24 by ai_slop

[elabx]

15 hours ago, ai_slop said:

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

I can guarantee from experience all these work together fine. 

This could be another logic for your what you are trying to achieve, although I don't see anything wrong in your snippet! Just figuring out that if you are getting started you might find these examples useful:

// assuming section is the name of the repeater
$projects = $pages->find("template=project, section.images.tags=gallery");  

foreach ($projects as $project) {
    $title = $project->project_header->first()->project_title;

    // Maybe something like this to get images from any of the repeaters?
    $images = new WireArray(); 
    $project->section->each(function($images) use(&$images){ 
      $images->import($item->images->findTag("gallery"));
    };

    foreach ($images as $img) {
        echo "<a href='{$project->url}' title='{$title}'>";
        echo $img->render(); 
        echo "</a>";
    }
}

 

[ai_slop]

Really appreciate your time, @elabx thank you.

Out of interest, what are the benefits of using wire arrays over page arrays here? 

$images = new WireArray(); 
$project->section->each(function($images) use(&$images){  // should it be function($item) here, where $item is a repeater item group? 
	$images->import($item->images->findTag("gallery"));
};

I tried to get Claude to explain the code line by line but sometimes it doesn't get it right 😅
Did you mean function($item) instead of function($images)? - I'm assuming this like looks at each item in the section repeater like a foreach loop (?) - the use(&images) thing confuses me too.

My guess is that it updates/appends the $images wirearray with the images inside the section items? it's just that use(&... thing I don't understand. Sorry!
EDIT: So use(&$variable) allows the original $images variable to be updated directly, if i understand correctly.
 

Edited February 26 by ai_slop

[elabx]

Quote

Out of interest, what are the benefits of using wire arrays over page arrays here? 

Just seems more appropiate! Since WireArray is the base iterable array type in ProcessWire, it's a really handy  way to work with lists of things imho. PageArray is meant to work for situations that need pagination from my understanding.  Here the intention is to import Pagefile objects returned within a collection (Pagefiles, heads up on plural!), from the findTag method. So you end up with a WireArray containing Pagefile objects. I haven't tested any of this so please bear with me if there are any errors!

You're absolutely right! (Claude pun intended) it should be $item as the anonymous function parameter.  The syntax for use (&$images) is to pass the WireArray as reference into the context of the anonymous function, the anon function wouldn't know about the $images variable if not passed like this. If we didn't use the "&" we would  be passing the value not the reference to the variable and we wouldn't be able to use $images as a "bucket of Pagefile objects".  Example.

[ai_slop]

Very helpful, thanks.

Haha yes Claude is very supportive 😂 Always try to verify if I can though while I'm learning. 
So it's a bit like function scope in JS then, the use keyword lets the function see outside itself.

You've taught me a lot in this thread, cheers for that

Edited February 26 by ai_slop

[elabx]

18 minutes ago, ai_slop said:

You've taught me a lot in this thread, cheers for that

Glad to hear that! In the age of AI I think it's hard to get your mind to have patience and stop to learn the fundamentals,  so kudos to you!

[ai_slop]

I'm back from the future lol. I studied some php in the mean time and I understand what use and & do now haha.
https://www.johnfarrell.fr

Eventually got round to implementing things. There are still a few things to fix overall. Your suggestions work well, I used slideshow image tags and it pulls in images into my home page slider from a WireArray based on that.

Only thing is, it would be nice if I could change the images for mobile portrait layouts, based on the user-agent. Some of my designs don't really suit portrait viewing. I thought about using MobileDetect, and make the slider pull images with another tag, say slidermobile. It looks like that doesn't play nicely with ProCache though... I don't want to change the url for mobile either...as I've printed qr codes for the site already 😅 Any suggestions? A PHP solution would be nice but maybe JS is needed. I may make a seperate post in case others find this useful. The last topics on this are old:
 

 

[Peter Knight]

Very impressive work and nice PW integration too. 

Im guessing the images have text embedded in them and that’s why you want mobile portrait versions? TBH I normally find centering + object-fit: cover handles a lot of situations gracefully.

I saw some nice work recently by @Stefanowitsch where he had specific mobile crops  for hero images. He might be a good person to ask.

[ai_slop]

Thanks @Peter Knight 🙂
I learned a lot with this project. I definitely need to learn GIT for the next proj I do though, regressions keep popping up all over the place 😅. Some bits and pieces left to fix before I upload more projs.

Well, I would like a separate selection of images for the slider for mobile users and at fullscreen. I had some QR codes printed on business cards so it would be nice to make the mobile image viewing experience nicer to people I meet out and about. I could probably do something with picture tags but it's not about cropping the same image at different ratios as much as having a separate group of images entirely for mobile, which I can update using tags. Just don't know how caching would work for the same page id. 

For desktop I like the 16:9 format because it works well for Behance, portfolio presentation books and web (desktop). Mobile not so much. This is what I want to avoid.

[Peter Knight]

They’re exactly the images that will break your heart 😬

So what you need is to tag your images in ProcessWire as wide or mobile (or whatever suits you), then use a <picture> element to let the browser pick the right one based on screen size or orientation. No server-side logic needed, so ProCache stays happy.

 

[ai_slop]

Mm picture tags could work but then that means creating portrait-oriented edits for every corresponding desktop slide image - and that's not always possible depending on what design will be shown, especially when I begin uploading the rest of my projects. If I'm querying mob vs desktop based on tagged images won't that impact caching regardless? Maybe I misunderstood.

In the end I may end up doing extra edits but it's a bit of a pain. Maybe excluding the slideshow from Procache might be another idea...if possible