Jump to content

Recommended Posts

Posted

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.

Posted

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 - like a simple image library. 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.
 

  1. Create a template, give it a name and add a multi-image field
  2. 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;
}
  1. 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() ?>*/
  1. 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. 

 

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...