BitPoet

Module: MediaLibrary

Recommended Posts

MediaLibrary

Update: MediaLibrary can now be found in the official module list.

Out of necessity, I've started to implement a simple media library module.

The basic mechanism is that it adds a MediaLibrary template with file and image fields. Pages of this type can be added anywhere in the page tree.

The link and image pickers in CKEditor are extended to allow quick selection of library pages from dropdowns. In the link picker this happens in the MediaLibrary tab, where you can also see a preview of the selected image. In the image picker, simply select a library from the dropdown at the top, everything else is handled by standard functionality.

I've put the code onto github. This module is compatible with ProcessWire 3.

Steps to usage:

  • Download the module's zip from github (switch to the pw3 branche beforehand if you want to test on PW 3.x) and unpack it into site/modules
  • Click "Modules" -> "Refresh" in the admin
  • Click "Install" for MediaLibrary
  • For testing, create a page with the MediaLibrary template under home (give it an expressive title like 'Global Media') and add some images and files
  • Edit a differnt page with a CKEditor field and add a link and an image to see the MediaLibrary features in action (see the screencap for details)
  • Optionally, go into the module settings for MediaLibrary

Note: this module is far from being as elaborate as Kongondo's Media Manager (and doesn't plan to be). If you need a feature-rich solution for integrated media management, give it a look.

Feel free to change the settings for MediaFiles and MediaImages fields, just keep the type as multiple.

There are some not-so-pretty hacks for creating and inserting the correct markup, which could probably be changed to use standard input fields, though I'm a bit at a loss right now how to get it to work. I've also still got to take a look at error handling before I can call it fit for production. All feedback and pointers are appreciated (that's also why I post this in the development section).

post-2900-0-51982400-1457341364_thumb.gi

Edit 09.03.2016 / version 0.0.4: there's now also a "Media" admin page with a shortcut to quickly add a new library.

post-2900-0-71225900-1457553239_thumb.pn

Edit 01.05.2016:

Version 0.0.8:

- The module now supports nested media libraries (all descendants of eligible media libraries are also selectable in link/image picker).

- There's a MediaLibrary::getPageMediaLibraries method you can hook after to modify the array of available libraries.

- You can switch between (default) select dropdowns or radio boxes in the module configuration of MediaLIbrary to choose libraries.

Edit 10.10.2018:

Version 0.1.3:

- Dropped compatibility for ProcessWire legacy versions by adding namespaces

- Allow deletion of libraries from the Media overview admin page

- Added an option to hide media libraries from the page tree (optionally also for superusers)

  • Like 23

Share this post


Link to post
Share on other sites

That looks really great and is certainly a quick and easy solution for websites, which need a overseeable amount of globally shared assets.

Share this post


Link to post
Share on other sites

Yes, many site owners welcome easy link/picture/doc updating like this.

Share this post


Link to post
Share on other sites

My primary application will be for our intranet site where we have complex product datasheets and configuration information that link to parts sheets, supplier information, technical standards and whatnot. Keeping linked documents up-to-date is quite important, and with today's innovation speed we've got about twenty to thirty doc updates per workday. I'll probably keep creation rights for the MediaLibrary template limit to admins though, to avoid over-eager users cluttering every page with a media child (just in case...).

  • Like 4

Share this post


Link to post
Share on other sites

How about prepopulating a library (from Select library) if there is only one? Or some kind default library? How does it scale with a lot of images, like 1000?

Share this post


Link to post
Share on other sites

Hello,

"Only libraries under the edited page itself or one of its parents are available to keep things organized."

So, it means it can be under a direct parent (it will be a sibling of the edited page) or a child of the page itself, is that it?

Also, as we can already, with ProcessWire by default, create a "Media Library" page anywhere, put images and files in it, and create sub-pages ("sub-sections", "sub-folders", "sub-categories"...) with images and files in it also, and already select them via CKEditor, would it be "difficult" to also have a "Media Library" tab (the "Media Library" page(s) (and/or template(s)) would be defined in a configuration page, etc.) and a way to (drop-down) select the "Media Library" page/"root" or one of its children in order to have only the images and files from a specific (sub-)section?

(And perhaps a way to have only images or only files. But that could wait.)

It's "already there"*, it's just that we only see, for example, the image thumbnails. Perhaps, for example, a "list mode" button in order to see the image names and/or descriptions could be added. (I'll have to check again how it is if they are files and not images).

It's also that it can take quite some time sometimes to find/go to the "Media Library"/"root" page in this case*, so a way to have direct access to it via a tab, after having defined it(/them) would be nice.

This module is a nice addition, it's just that I've been wondering this for some time.

I've done it with a "root" page and sub-pages with one image/page (logos, etc.) and have realized (again) that it could also be simply done with several images/page where sub-pages would be (sub-)categories.

Share this post


Link to post
Share on other sites

How about prepopulating a library (from Select library) if there is only one? Or some kind default library? How does it scale with a lot of images, like 1000?

I don't want to dig too deeply into circumventing PW's default behavior, so doing things in steps is the way to go for me. This way, I can use PW's default behavior in a lot of places. As for lots of images, it's the same as if they were added to the page itself, so with enough images the pwimage dialog will get sluggish (when depends on the client machine). While it doesn't scale infinitely, it should work in most common scenarios. The file links scale better performance wise, as only one is previewed at a time, though there's definitely a limit too when editing the library pages themselves.

Hello,

"Only libraries under the edited page itself or one of its parents are available to keep things organized."

So, it means it can be under a direct parent (it will be a sibling of the edited page) or a child of the page itself, is that it?

Also, as we can already, with ProcessWire by default, create a "Media Library" page anywhere, put images and files in it, and create sub-pages ("sub-sections", "sub-folders", "sub-categories"...) with images and files in it also, and already select them via CKEditor, would it be "difficult" to also have a Media Library tab (the "Media Library" page would be defined in a configuration page, etc.) and a way to (drop-down) select the "Media Library page/"root" or one of its children in order to have only the images and files from a specific (sub-)section.

(And perhaps a way to have only images or only files. But that could wait.)

It can be a sub page of any ancestor, so a child of a "grandparent" or higher up works too.

I'll probably not add much functionality besides what is already there in the short run. I see where you're heading, but that would be counter-productive to what I'm trying to accomplish (at least, where I'm planning to use it). I'll keep the idea in mind, and I won't rule out implementing it if a short, clean solution jumps my mind, but I've got too many other things already on the backburner. If you or somebody else uses my code to as a building block for something like this, you're welcome though.

  • Like 1

Share this post


Link to post
Share on other sites

"It can be a sub page of any ancestor, so a child of a "grandparent" or higher up works too."

So it can be a direct child of the homepage (I was wondering while reading the sentence on github).

But there could be too many images to choose from...

Your module has a lot of use cases.

I'll have to improve my (beginner) coding skills first :). (I'm starting with JUMP START PHP ENVIRONMENT now.)

Share this post


Link to post
Share on other sites

Yes, there's obviously a danger to add too many files to a library and make things convoluted. There's a point where simple dropdowns aren't practical anymore, but then, structuring information always is an ongoing task. That's a reason why one of the next points on my todo-list at work is a small module to show file usage (i.e. which pages' html fields link to a given pagefile), though that's probably going to be less pratical as I'll use a custom link and image url extractor in our OpenSearchServer to get quick results and avoid parsing multiple fields in a few thousand pages in the database for every file.

I haven't read that book, but getting acquainted with tool sets and release procedures before forming bad habits sounds like a good plan, even if not everything (like e.g. composer use) can be used for every project. It's often harder to un-learn a bad habit than learn it the right way first. :)

  • Like 3

Share this post


Link to post
Share on other sites

Update: I've added a "Media" admin page with a quick create option for new library pages.

  • Like 6

Share this post


Link to post
Share on other sites

It could be good to upload images to the media library in ckeditor.

Current, it may confused users, uploaded a image in ckeditor of a editing page, but it could not show up on other pages.

Share this post


Link to post
Share on other sites

It already does that - or, to be more precise, PW's default behavior takes care of that.

post-2900-0-07449400-1457845208_thumb.gi

  • Like 5

Share this post


Link to post
Share on other sites

Thanks for this great module. When using the option to upload images with the media library in CKeditor (like you've mentioned in the previous post). Everything seems to be working fine. However when I visit the page the next day, the image is gone and it's also removed from the Mediamanager.

However when uploading an image directly to the MediaManager (through the link in the sidebar) the images will be there the next day.

Do you have an idea what's causing this?

Share this post


Link to post
Share on other sites

That's strange. Could you do a few checks to narrow it down? Is the uploaded image present in the file system under site/assets/id of the media library page? Is the image tag in the output still present and if yes, what does it look like? Also, which PW version are you using?

Share this post


Link to post
Share on other sites

I've tested it in a bit more detail:
- The uploaded image isn't present under site/assets/id. Both the original and the thumbnail image are gone

- The image tag in the output is still present. It looks like <img alt="" src="/site/assets/files/[id]/[image].jpg" width="800">

- I'm currently using ProcessWire 3.0.11

If you need any additional information, please let me know.

Share this post


Link to post
Share on other sites

I installed 3.0.11 and tested it, and here it worked, but there are so many different parameters that might interfere. So, just to be sure:

  • You edit a page in CKEditor and select a media library from there, then upload an image (let's call it 'test.png')
  • After that, PW should place the image and thumbnails in "site/assets/files/[iD of media library page]/".
  • Can you confirm that the id CKEditor puts into the image tag is the id of the media library page you selected?
  • Is the image there on the file system immediately after you upload it?

If I recall it right, there were some issues with image uploading in certain settings when always_populate_raw_post_data was enabled, but I'm not sure if that still applies. Also, memory limits in php.ini might be worth a look. Generally, though, if you can upload images and get a preview, everything should be running fine. Do you have any other site modules installed?

Share this post


Link to post
Share on other sites

Thanks for checking it out. Uploading images isn't the problem. At first the image is being added to the page correctly and everything is working. The problem arises the next day (I have the feeling it happens somewhere through the night) when the image is being removed. This only happens when uploading the image through CKEditor. When uploading images through the 'Media' page in the sidebar, the images aren't removed automatically.

You edit a page in CKEditor and select a media library from there, then upload an image (let's call it 'test.png')

Yes indeed.

After that, PW should place the image and thumbnails in "site/assets/files/[iD of media library page]/".

That's indeed also the case. The image is added to the assets/files/[id of media library page] folder.

Can you confirm that the id CKEditor puts into the image tag is the id of the media library page you selected?

Yes, that's also the case. In the page the id is used from the media library.

Is the image there on the file system immediately after you upload it?

The image is there after I uploaded it. There are two images (the original file and a thumbnail version).

Do you have any other site modules installed?

On the website, the following modules have been installed:

- ProCache

- Form Builder

- Profields (Table)

- MarkupSEO

- MarkupSimpleNavigation

- TextformatterGoogleMaps

- TextformatterVideoEmbed

- TextformatterSrcSet (but it's not enabled inside the body field where the images disappear)

To be safe, i've added a screenshot of the settings that i've used for the body field. Might the 'HTML Options' have something to do with it?

be64ab.png

If you want I can give you temporarily access to the website.

Share this post


Link to post
Share on other sites

Just curious, I have everything set up and a new "gallery" set up using the library, but how do you actually utilize it in a template?

Share this post


Link to post
Share on other sites

It's not really designed to be used in a template through the API, the use case was to make re-using images and documents in CKEditor less complicated. Behind the scene, MediaLibraries are nothing but pages with a MediaImages and MediaFiles field, the magic is the concise overview over dedicated media pages (and their creation without navigating through the page tree) and, most importantly, the quick selection in the CKEditor dialogs.

You can get the available libraries for a page through the API though:

/* Retrieve all available MediaLibraries for the current page */

// get possible parents first
$mparents = $page->parents->and($page);

// get PageArray with all possible libraries
$libs = $pages->find("template=MediaLibrary, parent=$mparents");

// do something with libraries
foreach($libs as $lib) {
    echo $lib->title . PHP_EOL;
    // Every library is just a page with the fields MediaImages and MediaFiles
    foreach($lib->MediaImages as $img) {
        echo "<img src='$img->url'/><br/>" . PHP_EOL;
    }
}

Of course, you can fetch a specific library through regular selector syntax too, e.g.:

$lib = $pages->get("template=MediaLibrary, name=global-media");

foreach($lib->MediaFiles as $file) {
 // ...
}
  • Like 3

Share this post


Link to post
Share on other sites

It's almost perfect for the task I would use it, but am I right that I need to create multiple Media Libraries under Home to have multiple "categories" of libraries? I tried to put them under a page not to pollute the root with many Media Libraries but then they don't show up in the selector when trying to insert an image.

Update:

I see it's possible to use it from subpages but my current multi-user setup doesn't allow placing them in ancestor pages. 

I wanted something like this:

- global page
- global page
- global page
- user page
- - user subpage
- - user subpage
- user page
- - user subpage
- - user subpage
- Media Library parent page
- - Library 1
- - Library 2

So users cannot reach Library 1 in this setup.

Share this post


Link to post
Share on other sites

I'm a little bit uncomfortable with allowing just any child under a media library, but I can understand the wish for nesting, so version 0.0.7 on github allows you to create libraries under existing MediaLibrary pages, and these child libraries (no limit for nesting) are also listed whenever their parent library is.

For anybody planning to use MediaLibrary through the API, there's a new method that returns an array with all applicable media pages for a given page (following the under-parent-or-current-page rule):

$ml = wire('modules')->get('MediaLibrary');
$mediapages = $ml->getPageMediaLibraries($page);

foreach($mediapages as $mpage) {
   // ...
}

I've made getPageMediaLibraries hookable if anybody wants to apply further rules to which pages should be available.

  • Like 2

Share this post


Link to post
Share on other sites

Thanks! Setting "/medialibrary1/medialibrary2" allows users selecting images from these pages now.

I didn't wanted them to see or use images from "/medialibrary1" but it's something I can live with :)

Now I can use it for common site-wide images, which will be a great plus.

Have you considered changing the way Media Libraries are selected? The current selectbox doesn't seem too user-friendly UI-wise. Maybe radios would be better so they could see libraries with fewer clicks.

  • Like 1

Share this post


Link to post
Share on other sites

Just grab the latest version from git (if you get a message that configurable module test failed, repeatedly refresh modules until the message goes away), then go into the module configuration and select "Radios".

:)

You can exclude certain media pages from showing up for the user through a hook in ready.php:

wire()->addHookAfter("MediaLibrary::getPageMediaLibraries", null, "filterLibraries");

function filterLibraries($event) {
  $media = $event->return;
  if(! wire('user')->isSuperUser) {
    $event->return = array_filter($media, function($v) {
      return ($v->id != $ID_OF_PAGE_TO_EXCLUDE);
    });
  }
}
  • Like 3

Share this post


Link to post
Share on other sites

Great, thanks! Both working fine.

However, when going to the Media page in the admin, I get an error:

"Call to a member function count() on null"

line:

https://github.com/BitPoet/MediaLibrary/blob/master/ProcessMediaLibraries.module#L41

I've removed the MediaFiles from the template, I guess that's why.

Possible fix:

		foreach($this->pages->find("template=MediaLibrary") as $pg) {

			$MediaImagesCount = $pg->MediaImages ? $pg->MediaImages->count() : 0;
			$MediaFilesCount = $pg->MediaFiles ? $pg->MediaFiles->count() : 0;
			
			$tbl->row(array(
				"<a href='{$pg->editURL}'>{$pg->title}</a>",
				implode(' / ', array_map(function($item) { return "<a href='{$this->config->urls->admin}page/?open=$item->id'>$item->title</a>"; }, $pg->parents()->getArray())),
				$MediaImagesCount,
				$MediaFilesCount
			));
		}
  • Like 1

Share this post


Link to post
Share on other sites
Hi.

Thanks for useful module.

I noticed that MediaLibrary.js is loading on frontend even if there is no edit functionality?

Is it normal behavior?

Share this post


Link to post
Share on other sites

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Robin S
      Another little admin helper module...
      Template Field Widths
      Adds a "Field widths" field to Edit Template that allows you to quickly set the widths of inputfields in the template.

      Why?
      When setting up a new template or trying out different field layouts I find it a bit slow and tedious to have to open each field individually in a modal just to set the width. This module speeds up the process.
      Installation
      Install the Template Field Widths module.
      Config options
      You can set the default presentation of the "Field widths" field to collapsed or open. You can choose Name or Label as the primary identifier shown for the field. The unchosen alternative will become the title attribute shown on hover. You can choose to show the original field width next to the template context field width.  
      https://github.com/Toutouwai/TemplateFieldWidths
      https://modules.processwire.com/modules/template-field-widths/
    • By horst
      Croppable Image 3
      for PW 3.0.20+
      Module Version 1.1.16
      Sponsored by http://dreikon.de/, many thanks Timo & Niko!
      You can get it in the modules directory!
      Please refer to the readme on github for instructions.
       
      -------------------------------------------------------------------------
       
      Updating from prior versions:
       
      Updating from Croppable Image 3 with versions prior to 1.1.7, please do this as a one time step:
      In the PW Admin, go to side -> modules -> new, use "install via ClassName" and use CroppableImage3 for the Module Class Name. This will update your existing CroppableImage3 module sub directory, even if it is called a new install. After that, the module will be recogniced by the PW updater module, what makes it a lot easier on further updates.
      -------------------------------------------------------------------------
       
      For updating from the legacy Thumbnail / CropImage to CroppableImage3 read on here.
       
      -------------------------------------------------------------------------
       
    • By MoritzLost
      UPDATE: I have published a stable version of this module!
      Discussion thread:
      Github: https://github.com/MoritzLost/TextformatterPageTitleLinks
      ---
      Hello there,
      I'm working on a tiny textformatter module that searches the text for titles of other pages on your site and creates hyperlinks to them. I'm not sure if something like this exists already, but I haven't found anything in the module directory, so I wrote my own solution 🙂
      It's not properly tested yet and is still missing some functionality I would like to implement, so at the moment it should be considered in BETA. Features include limiting the pages that will get searched by template, and adding a custom CSS class to the generated hyperlinks. As I'm writing this I noticed that it will probably include unpublished and hidden pages at the moment, so yeah ... it's still in development alright 😅
      You can download the module from Github:
      https://github.com/MoritzLost/TextformatterPageTitleLinks
      There's some more information in the readme as well.
      Anyway, let me know what you think! I'm happy about any feedback, possible improvements or ideas on how to improve the module. Cheers.
    • By blad
      Hi guys!
      I just uploaded a module to explore files based on elFinder. By default it will show the "Files" folder.
      Screenshots:

      Video:
       
      To do:
       More options To fix:
       The function of rotating or scaling an image fails  Image editors V 1.01 (view issue)
      Fixed the bug working with the Multi-Language support ( translation of folders ). Fixed the name of elfinder.en  Github:
      https://github.com/LuisSantiago/ProcessElFinder/
      I hope you like it.
    • By BitPoet
      I'm really in love with FormBuilder, but the one thing missing to match all my end users' expectations were repeatable field groups. Think repeaters, in ProcessWire terms. Our primary application of PW is our corporate intranet, so "lines" of fields are quite common in the forms I build. We have all kinds of request forms where the information for a varying number of colleagues needs to be entered (from meal order to flight booking request) and where it is simply impractical to send a form for each, and I don't want to clutter my forms with multiple instances of fields that may only get used ten percent of the time.
      That's why I started to build FormBuilderMultiplier (link to GitHub).
      What it does:
      Adds an option to make a regular Fieldgroup repeatable Lets you limit the number of instances of a Fieldgroup on the form Adds an "Add row" button the form that adds another instance of the Fieldgroup's fields Adds a counter suffix at the end of every affected field's label Stores the entered values just like regular fields Makes the entered values available in preview and email notifications Supports most text based fields, textareas and selects (really, I haven't had enough time to test all the available choices yet) What it doesn't do (yet):
      Support saving to ProcessWire pages (i.e. real Repeaters) I haven't tested all the validation stuff, Date/Time inputs etc. yet, but since I'm utterly swamped with other stuff at work, I didn't want to wait until I have it polished. Any feedback is welcome. There might also be some issues with different output frameworks that I haven't encountered yet. The forms I work with mostly use UIKit.
      Status:
      Still alpha, so test well before using it in the field.
      Known issues:
      When rows are added, the form's iframe needs to be resized, which isn't completely clean yet.
      How it works:
      The Fieldgroup settings are added through regular hooks, as is the logic that adds the necessary field copies for processing the form and displaying previews.
      "Multiplied" field instances are suffixed with _NUM, where NUM is an incremental integer starting from 1. So if you have add two fields named "surname" and "givenname" to a fieldgroup and check the "multiply" checkbox, the form will initially have "surname_1" and "givenname_1" field (I'm still considering changing that to make the risk to shoot oneself into the foot by having a regular "surname_1" field somewhere else in the form less likely).
      When a "row" is added, the first row is cloned through JS and the counter in the fields' IDs, names and "for" attributes as well as the counter in the label are incremented before appending the copies to the Fieldset container in the form.
      To keep backend and frontend in sync, a hidden field named [name of the fieldset]__multiplier_rows is added to the form. Both the backend and the frontend script use this to store and retrieve the number of "rows".
      ToDo:
      Naturally, add the option to store the data in real repeaters when saving to pages. Do a lot of testing (and likely fixing). Make a few things (like the "Add row" button label etc.) configurable in field(set) context. Add a smooth API to retrieve the multiplied values as WireArrays. The mandatory moving screenshot: