ai_slop

So I tried the following but I'm not sure if it's good practice or not. Sharing in case anyone finds it useful. This setup requires that the PageImageSource module is installed with srcset image sizes setup in its config. It basically involves creating a page where cross-site images can be uploaded. I created a short function to make it easier to grab the images where needed. Adding ->render() will output <picture> with srcsets. The media page should be set as hidden. Create a template, give it a name and add a multi-image field In the templates folder create _func.php and add the following: <?php namespace ProcessWire; /* Create a fn. that returns a Pageimage object from media library page you just created. Here i called my function medialib, and $medialibrary is the name of my template.*/ function medialib($filename) { static $medialibrary = null; if (is_null($medialibrary)) { // REPLACE the get directory with the Media Library page url created in admin. Mine was /media-library/ $medialibrary = wire('pages')->get('/media-library/'); } // Returns the image object if found, or null return $medialibrary->id ? $medialibrary->images->get("name=$filename") : null; } Add the include for _func.php in your _init.php in the templates folder: <?php namespace ProcessWire; // This makes the medialib() function available to all templates include_once("./_func.php"); // Render media library images on other pages using format: /*<?= medialib("imagefile.jpg")?->render() ?>*/ Function can now be called in template markup using: // Render media library images on other pages using format: <?= medialib("imagefile.jpg")?->render() ?> //Example <?=medialib("imageNameMustMatchFileName.jpg")->render()?> // Outputs <picture> tag. For CSS styling, target outer div class like so: .class img{.....} Combining this with another module might https://processwire.com/modules/process-media-lister/ might be useful.

Looking good, @Peter Knight! This is exactly what I was looking for. New to PW and building a portfolio site so quickly running into image management questions. I just posted a question on handling static or non-image field images - more specfically, how can we generate <picture> srcsets with PageImageSource when dealing with asset folder images. A solution without duplication would be nice. Not sure how relevant that is to your module but thought I'd share: Picture srcsets have to be the most tedious thing in html markup. I'd be happy to beta test the module if you like. Are you planning on releasing it as paid or open source?

I've been reading through the forums for best practices on handling images on static pages - that's to say, how best to handle images in my static html markup when I don't have any need for image fields. On my current site, I have a lot of images on the home page and it seems silly creating an image field for all of these. Also, for pages where I do have image fields, I've been using the PageImageSource module to create wepb srcsets automatically (and it works great). I like setting my desired image sizes for the srcsets in one place, so I'd like to use this module for everything everywhere if possible. The problem is that it only works with PageImage objects, so I have to do something with my static images in order for the plugin to work with those. It looks like the media manager modules are not maintained. Could I just somehow put all my non-image field images in one page reference or something and have the PageImageSource module render those wherever they're needed? Could the following work? 1) Create an images/media page and template with images field. Set it to hidden. 2) // In _init.php: $media = $pages->get("template=media", include=hidden); 3) // on a template page markup: $desiredImage = $media->images->get("name=imageName.jpg"); .... <div><=?php $desiredImage->render()?></div> // renders the srcsets and <picture> tags with the PageImageSource module I don't know if this is the recommended way of dealing with <picture> tags for static pages (srcsets are such a pain to do manually!). Maybe there are some downsides to this that I'm not aware of. Any guidance would be very welcome.

Looks great. New to PW here and have been scanning the forums for best practices on including images on static pages (no image fields). A media library seems to be the way... I wanted to understand how I might use the PageImageSource module to render webp srcsets on the fly for static images but was disappointed to learn that it can only be used with PageImage images. https://github.com/nbcommunication/PageimageSource I think ProcessWire would be a hard sell to many clients without some a full-featured image library solution, which is a great pity. The UI looks well done.

Strange... I'm seeing some inconsistencies which seem at odds with what the docs say is possible, but maybe I'm going wrong somewhere... If anyone has any tips, I'd appreciate it! For example, in my _main.php and template.php I had: <main id="main-content">...</main> but content would not populate until I used pw-id: <main pw-id="main-content">...</main> I thought that both id and pw-id were possible? I've also had more luck adding scripts before the body tag using divs instead of putting the script tags within region tags for some reason. What worked for me: <div id="regionscript">...</div><!--#regionscript--> in the template instead of placing scripts within region tags. With an optional div in the _main.php: <div id="regionscript" pw-optional></div>

I'm having the same issue however the content is repeated 4 times. Building on the site-blank template and I haven't touched anything above the Doctype declaration, though there are existing variables mentioned below. Should those be deleted? I read the Markup Regions docs thoroughly though I'm at a loss here... Wondering if it's one of my scripts or something interfering with things. I have a GSAP typing text animation plugin before my closing body tag on a markup action region tag (on a template)... /** @var Page $page */ /** @var Pages $pages */ /** @var Config $config */ $home = $pages->get('/'); /** @var HomePage $home */

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

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.

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.

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!

Cheers for the info @poljpocket That's good to know. Thanks for your contributions to the community @bernhard I saw you created a lot of modules - I may try out RockCommerce at some point if I can get it to work with Stripe also. My site is likely to get image-heavy at some point so I'll probably cache it with one of the above solutions. I'm guessing caching mitigates repeater latency completely more or less on smaller/brochure sites? I'm not building anything too complex for the moment. Curious as to how well caching would hold up on a client store site of 100s of products though...

Hello @LostKobrakai, did you ever get a masonry layout working with ProcessWire srcset images in the end? Building a portfolio site and scoping out some ideas. It looks like the new CSS spec for masonry layouts - or "css grid-lanes" will be a thing but it's not ready yet. EDIT: Just realised the OP posted in 2014 lol. In any case, readers might find this of interest: https://metafizzy.co/blog/imagesloaded-v5-released/ I may see if I can get it to work

Hi @kongondo Hope you don't mind me resurrecting this thread after so long. Using a repeater, I'm making a kind of section builder for a porfolio site. Using a radio toggle, it displays relevant layout fields to upload to for each section type. However they all use the same repeater. I'm wondering if there are any downsides or performance issues to including fields in a repeater, if they are not populated. My example only includes about 6 or 7 fields, with a project page using up a repeater about 5 or 6 times. Profields is out of my budget for this project right now, but I'm curious about any performance impacts my alternative may have. I've included screenshots of my repeater in the thread below.

Thanks @monollonom I feel silly now 😅 I thought I had tried using values. I had used a round about way of getting the text values to work like an OR statement by elimination. I've updated to use numbers instead. Still not entirely sure why "section_type<=5" didnt work though. I've included what worked below in case other PW newcomers find it useful: heading section_type!=single_image, section_type!=two_images, section_type!=three_images, section_type!=txt_image, section_type!=image_txt section_type=6|7 text_area section_type!=single_image, section_type!=two_images, section_type!=three_images section_type=4|5|6|7 project_image_1 section_type!=txt_heading, section_type!=heading_txt section_type<=5 (doesn't work) section_type=1|2|3|4|5 project_image_2 section_type!=single_image, section_type!=txt_image, section_type!=image_txt, section_type!=heading_txt, section_type!=txt_heading section_type=2|3 project_image_3 section_type!=single_image, section_type!=two_images, section_type!=txt_image, section_type!=image_txt, section_type!=heading_txt, section_type!=txt_heading section_type=3 By the way, do you think using a large repeater in this way (like a mini page builder) is bad practice or performant enough? I know ProFields exists but I'm not sure how different this is performance wise

Thanks @virtualgadjo. The contentTypes tip looks interesting, though I'm not yet advanced enough yet to fully understand it, but I'll get there eventually! 😄 Ah yes @psy, I forgot about the <region> tags - good idea. I was just going to try something like <script pw-id='js' ...... pw-optional></script> but I'm not sure if that would work with prepending, before, after, etc and if the tags don't match. The region approach looks cleaner. Thanks!