Jump to content
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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Robin S
      A community member raised a question and I thought a new sanitizer method for the purpose would be useful, hence...
      Sanitizer Transliterate
      Adds a transliterate method to $sanitizer that performs character replacements as defined in the module config. The default character replacements are based on the defaults from InputfieldPageName, but with uppercase characters included too.
      Usage
      Install the Sanitizer Transliterate module.
      Customise the character replacements in the module config as needed.
      Use the sanitizer on strings like so:
      $transliterated_string = $sanitizer->transliterate($string);
       
      https://github.com/Toutouwai/SanitizerTransliterate
      https://modules.processwire.com/modules/sanitizer-transliterate/
       
    • By dimitrios
      Hello,
      this module can publish content of a Processwire page on a Facebook page, triggered by saving the Processwire page.
      To set it up, configure the module with a Facebook app ID, secret and a Page ID. Following is additional configuration on Facebook for developers:
      Minimum Required Facebook App configuration:
      on Settings -> Basics, provide the App Domains, provide the Site URL, on Settings -> Advanced, set the API version to 2.10, add Product: Facebook Login, on Facebook Login -> Settings, set Client OAuth Login: Yes, set Web OAuth Login: Yes, set Enforce HTTPS: Yes, add "http://www.example.com/processwire/page/" to field Valid OAuth Redirect URIs. This module is configurable as follows:
      Templates: posts can take place only for pages with the defined templates. On/Off switch: specify a checkbox field that will not allow the post if checked. Specify a message and/or an image for the post.
      Usage
      edit the desired PW page and save; it will post right after the initial Facebook log in and permission granting. After that, an access token is kept.
       
      Download
      PW module directory: http://modules.processwire.com/modules/auto-fb-post/ Github: https://github.com/kastrind/AutoFbPost   Note: Facebook SDK for PHP is utilized.


    • By thomasaull
      I created a little helper module to trigger a CI pipeline when your website has been changed. It's quite simple and works like this: As soon as you save a page the module sets a Boolean via a pages save after hook. Once a day via LazyCron the module checks if the Boolean is set and sends a POST Request to a configurable Webhook URL.
      Some ideas to extend this:
      make request type configurable (GET, POST) make the module trigger at a specified time (probably only possible with a server cronjob) trigger manually Anything else? If there's interest, I might put in some more functionality. Let me know what you're interested in. Until then, maybe it is useful for a couple of people 🙂
      Github Repo: https://github.com/thomasaull/CiTrigger
    • By Robin S
      I created this module a while ago and never got around to publicising it, but it has been outed in the latest PW Weekly so here goes the support thread...
      Unique Image Variations
      Ensures that all ImageSizer options and focus settings affect image variation filenames.

      Background
      When using methods that produce image variations such as Pageimage::size(), ProcessWire includes some of the ImageSizer settings (height, width, cropping location, etc) in the variation filename. This is useful so that if you change these settings in your size() call a new variation is generated and you see this variation on the front-end.
      However, ProcessWire does not include several of the other ImageSizer settings in the variation filename:
      upscaling cropping, when set to false or a blank string interlace sharpening quality hidpi quality focus (whether any saved focus area for an image should affect cropping) focus data (the top/left/zoom data for the focus area) This means that if you change any of these settings, either in $config->imageSizerOptions or in an $options array passed to a method like size(), and you already have variations at the requested size/crop, then ProcessWire will not create new variations and will continue to serve the old variations. In other words you won't see the effect of your changed ImageSizer options on the front-end until you delete the old variations.
      Features
      The Unique Image Variations module ensures that any changes to ImageSizer options and any changes to the focus area made in Page Edit are reflected in the variation filename, so new variations will always be generated and displayed on the front-end.
      Installation
      Install the Unique Image Variations module.
      In the module config, set the ImageSizer options that you want to include in image variation filenames.
      Warnings
      Installing the module (and keeping one or more of the options selected in the module config) will cause all existing image variations to be regenerated the next time they are requested. If you have an existing website with a large number of images you may not want the performance impact of that. The module is perhaps best suited to new sites where image variations have not yet been generated.
      Similarly, if you change the module config settings on an existing site then all image variations will be regenerated the next time they are requested.
      If you think you might want to change an ImageSizer option in the future (I'm thinking here primarily of options such as interlace that are typically set in $config->imageSizerOptions) and would not want that change to cause existing image variations to be regenerated then best to not include that option in the module config after you first install the module.
       
      https://github.com/Toutouwai/UniqueImageVariations
      https://modules.processwire.com/modules/unique-image-variations/
    • By Sebi
      I've created a small module which lets you define a timestamp after which a page should be accessible. In addition you can define a timestamp when the release should end and the page should not be accessable any more.
      ProcessWire-Module: http://modules.processwire.com/modules/page-access-releasetime/
      Github: https://github.com/Sebiworld/PageAccessReleasetime
      Usage
      PageAccessReleasetime can be installed like every other module in ProcessWire. Check the following guide for detailed information: How-To Install or Uninstall Modules
      After that, you will find checkboxes for activating the releasetime-fields at the settings-tab of each page. You don't need to add the fields to your templates manually.
      Check e.g. the checkbox "Activate Releasetime from?" and fill in a date in the future. The page will not be accessable for your users until the given date is reached.
      If you have $config->pagefileSecure = true, the module will protect files of unreleased pages as well.
      How it works
      This module hooks into Page::viewable to prevent users to access unreleased pages:
      public function hookPageViewable($event) { $page = $event->object; $viewable = $event->return; if($viewable){ // If the page would be viewable, additionally check Releasetime and User-Permission $viewable = $this->canUserSee($page); } $event->return = $viewable; } To prevent access to the files of unreleased pages, we hook into Page::isPublic and ProcessPageView::sendFile.
      public function hookPageIsPublic($e) { $page = $e->object; if($e->return && $this->isReleaseTimeSet($page)) { $e->return = false; } } The site/assets/files/ directory of pages, which isPublic() returns false, will get a '-' as prefix. This indicates ProcessWire (with activated $config->pagefileSecure) to check the file's permissions via PHP before delivering it to the client.
      The check wether a not-public file should be accessable happens in ProcessPageView::sendFile. We throw an 404 Exception if the current user must not see the file.
      public function hookProcessPageViewSendFile($e) { $page = $e->arguments[0]; if(!$this->canUserSee($page)) { throw new Wire404Exception('File not found'); } } Additionally we hook into ProcessPageEdit::buildForm to add the PageAccessReleasetime fields to each page and move them to the settings tab.
      Limitations
      In the current version, releasetime-protected pages will appear in wire('pages')->find() queries. If you want to display a list of pages, where pages could be releasetime-protected, you should double-check with $page->viewable() wether the page can be accessed. $page->viewable() returns false, if the page is not released yet.
      If you have an idea how unreleased pages can be filtered out of ProcessWire selector queries, feel free to write an issue, comment or make a pull request!
×
×
  • Create New...