Media Lister

[Robin S]

Media Lister

Lists images and files from across the site in a sortable and filterable table. For images you can choose between table, small thumbnails and large thumbnails view modes.

The module retrieves the data using SQL queries so is able to efficiently list media information for all but the largest of sites.

Possible use cases:

• Check that a nice variety of banner images is used for top-level pages.
• Find duplicate files/images by sorting by filesize or filename.
• Find images without descriptions if this is important for use in alt tags.
• Find large PDF files that would benefit from optimisation.
• Check for "inappropriate" images, or images that are not "on-brand".

Images in small thumbnails view mode

Files saved as a bookmark

Controls

Media type: Choose between Images and Files.

View mode: When listing images you can choose between small thumbnails, large thumbnails and table view modes. When in one of the thumbnail view modes you can see information about the image in a tooltip by clicking the "i" icon, or edit the page containing the image by clicking the pencil icon.

From pages matching: This field allows you to add filters to limit the pages that the media will be listed for.

Add bookmark: Superusers can add bookmarks for the current settings that will be available from the flyout menu for all users. See the bookmarks section below for more information.

Column visibility: Choose the columns that appear in the table and in the information tooltip (when in thumbnails mode).

Search: Quickly filters the results to show only items that have the search text in any column, whether the column is visible or not.

Custom search builder: For more advanced searches where you can combine conditions for specific columns with AND/OR logic.

Pagination: You can navigate through the results and set the number of results per page.

Reset: Click the "Reset" button at the top right to return to the default settings for Media Lister (or for the current bookmark if applicable).

Editing the page that contains the media

For any media result click the link in the "Page" column to open the page that contains the media item in Page Edit. When in thumbnail view mode you can click the pencil icon to achieve the same thing. The field that contains the media item will be focused.

When a media item is contained within a Repeater field this is indicated by an asterisk at the start of the page title. When opening Page Edit for a media item within a Repeater field the Repeater item will be automatically expanded, including for nested Repeaters.

Limitations for values that are merged in the database

The module has limited support for multi-language values and custom fields for images/files. In order to be efficient enough to handle large sets of results the module retrieves raw values from the database, and in the case of multi-language values and custom field values ProcessWire stores these in JSON format in a single database column.

The module improves the display of this JSON data by extracting the uploadName value into a separate column, substituting custom field labels for field IDs, adding language names where possible, and by transforming the data into a quasi-YAML format for better readability. Some limitation remain though – for example, if you use Page Reference fields in the custom fields then only the page IDs are displayed.

Bookmarks

Superusers are able to create a bookmark for the current Media Lister settings by expanding the "Add bookmark" field, entering a title for the bookmark, and clicking the "Add bookmark" button.

Bookmarks will be visible to all users from the flyout menu.

You can delete a bookmark from the module config screen.

Module config

In the module config screen you can define defaults for controls such as media type, view mode, pagination limit and column visibility. You can also delete bookmarks from the module config screen.

 

https://github.com/Toutouwai/ProcessMediaLister
https://processwire.com/modules/process-media-lister/

[MarkE]

Looks good @Robin S, but images seem to be missing in the above post. 

[Robin S]

1 hour ago, MarkE said:

Looks good @Robin S, but images seem to be missing in the above post. 

Thanks, hopefully fixed now.

[MarkE]

3 hours ago, Robin S said:

hopefully fixed now

Nope ?"This private-user-images.githubusercontent.com page can’t be found"

But it's fine in GitHub and the modules library ?

[Robin S]

7 hours ago, MarkE said:

Nope ?"This private-user-images.githubusercontent.com page can’t be found"

GitHub has recently changed something that now makes it much more difficult to host readme images at GitHub without making them a part of the repo. There has long been a gotcha for previously private repos where if you if you added images before making the repo public then those image URLs wouldn't get the public subdomain.

But now it seems that if a public repo has ever been private then GitHub forces the "private-user-images" subdomain, even retrospectively changing image URLs that previously had the public "user-images" sudomain. I can observe this in some of my recent modules where the PW forum post has the public URLs that were copy/pasted from the readme at the time the post was created but the readme at GitHub now has the "private-user-images" subdomain, which is going to make it a real drag to update the forum post when the readme is updated.

And GitHub tricks you into thinking the image URLs are publicly accessible (I double-checked in an incognito window to make sure after the previous attempt to fix), but as this post describes the private URLs contain an encoded token that causes the images to expire after 5 minutes, although I don't know how any mere mortal is expected to know that. Presumably GitHub checks the referrer so the expiry doesn't occur when viewing the readme on GitHub itself.

So the only solution I can see is manually changing all image URLs from the private to the public subdomain before using them in the readme - you can no longer conveniently use the GitHub image markdown directly from the "issue". I wrote a little Tracy Console script to make the process a bit less painful - might be useful to anyone else who changes repos from private to public and likes to host readme images at GitHub.

// Require Simple HTML Dom: https://sourceforge.net/projects/simplehtmldom/ 
require_once $config->paths->templates . 'TracyDebugger/snippets/simple_html_dom.php';

// Get HTML from issue where images are embedded
$html = file_get_html('https://github.com/Toutouwai/ProcessMediaLister/issues/1');

// Process images
foreach($html->find('.markdown-body img') as $img) {
	$alt = $img->alt;
	$src = $img->src;
	// Remove query string
	$pos = strpos($src, '?');
	$src = substr($src, 0, $pos);
	// Replace private subdomain with public subdomain
	$src = str_replace('private-user-images', 'user-images', $src);
	// Echo image Markdown for copy/paste into readme
	echo "![$alt]($src)<br>";
}

 

[Fuzen]

What a great addition to PW. Thanks @Robin S 

[lpa]

Great module, thank you!

One small problem: I have a two language site. The description field having some text shows not the text, but this: array-0. The text of the description field is not found with the search-box or Custom Search Builder, but it can be search with the filter part above.

Is this a limitation of the multilanguage fields or a bug?

[Robin S]

20 hours ago, lpa said:

The description field having some text shows not the text, but this: array-0.

That looks like it might be the result of an array to string conversion error, but the module should handle multi-language descriptions that decode from JSON to an array.

Maybe the database has something unexpected in the description column. I don't work with multi-language sites so I'm not very familiar with them, but when I tested by entering descriptions on a site with two languages the description column looks like this:

The first row has a description in the non-default language but not the default language, the second row has descriptions in both languages, the third row has a description in the default language but not the non-default language, and the fourth row has no description in either language. The module handles all of these.

Can you locate the description in PhpMyAdmin or Adminer (included with Tracy Debugger) and let me know what the raw database value is? If your images field is named "images" it will be in the "field_images" table.

[lpa]

First of all, the images field is inside a repeater. But I don't think that is a problem.

In addition to the four different formats you show above, for some reason I have just the text in the description field, the last one. But I don't know why is that even possible, as it does not happen if I save a new description.

It might be, that the language support was added later and the old descriptions are not converted to the JSON format. This is not a big issue for me. I just happend to notice that there is some weird behaviour. 

At least you could check that the empty description fields would not be shown as "array-0":

[Robin S]

11 hours ago, lpa said:

It might be, that the language support was added later and the old descriptions are not converted to the JSON format.

It's good to be aware that this can happen - I've made an update in v0.1.1 to fall back to the plain text if the description value cannot be decoded as JSON. But I don't think this can be the reason for "array-0" because json_decode() returns null if the supplied value cannot be decoded as JSON.

Of the database values you showed in the screenshot, which is the one that is displayed as "array-0" in Media Lister? Or are all descriptions displaying that way?

It's hard for me to debug this because I can't reproduce the issue here on a two-language site. The code that formats the description from the raw database value is here: https://github.com/Toutouwai/ProcessMediaLister/blob/f744014bb402d2de25888c89e3db4bcced80ff32/ProcessMediaLister.module#L426-L452
If you use Tracy Debugger to dump variables within this section you might find where the "array-0" is creeping in. Or maybe somebody else will have the same issue and we can find out more then.

[lpa]

The problem seems to be when the database has an empty description field which is returned as an array on line 429:

$description = wireDecodeJSON($item['description']);

With TracyDebugger bd($description) I get: Array

Before line 452

$description = $sanitizer->entities($description);

bd($description); gives: "Array" 

And after the sanitizer

bd($description); gives: array-0

 

[Robin S]

2 hours ago, lpa said:

The problem seems to be when the database has an empty description field which is returned as an array

Thanks for debugging this. Although I can't reproduce it here I can see a solution - please update to v0.1.2 for the fix.

[gornycreative]

This is really helpful for folks who are used to having a single place to review imagery as found in other systems. Thanks!

[Mats]

This is such a great module, thank you @Robin S! 

Would it be possible to extend this module so it could be used for adding existing images to an image field?

1. A button in the image field ("Add media") opens the Media lister module in a modal.
2. You select an image from the list, on "save/add to page" the image is copied to the image field.

 

[Robin S]

7 hours ago, Mats said:

This is such a great module, thank you @Robin S! 

Glad you like it!

7 hours ago, Mats said:

Would it be possible to extend this module so it could be used for adding existing images to an image field?

That would really be a different purpose than what this module is for. So that idea would be for a different module rather than a feature of this module.

Although it wouldn't work exactly as you describe, as it happens I have another module that's 90% finished and just waiting for a core issue to be resolved. This module is designed to make it easy to copy or move images from one field to another, so it could be used together with Media Lister to copy an image, just with one or two more steps. I'll come back and explain more once the module is released.

But as a general thing, are you sure you want to be duplicating image files across the site like this? If you have images that need to be regularly reused on different pages you could look at an "image reference" solution instead, so the image file stays in a single place and is referenced on other pages. My Select Images module provides for a basic solution, but if you need more power you could look at a "page per image" approach which is used in modules such as Media Manager and Visual Page Selector by @kongondo

 

[Mats]

That sounds like an interesting module! I look forward to testing it.

I don't mind the images being duplicated as that is how ProcessWire handles images.
I think Media Lister with the proposed expansion of functionality would fill a need that seems to exist within the ProcessWire community (if you can live with duplicate images).

I want to take the opportunity to say thanks for all the phenomenal modules you share with the rest of us @Robin S!

[Robin S]

@Mats, I've released the module I mentioned above: 

If you want to use Media Lister to find an image and then copy it to a field in Page Edit you can follow these steps:

1. Open Media Lister in one browser tab, and Page Edit for the page you want to copy an image to in another browser tab.
2. Find the image you want to copy in Media Lister. Click the link in the Page column - this will open the page that contains the image in Page Edit and will focus the containing field.
3. Use File Mover to select the image you want to copy.
4. Switch to the browser tab that contains the page you want to copy the image to. In the destination field use File Mover to copy across the image you selected in the previous step.