Create a medialibrary in Laravel PHP inspired by WordPress

5 Views

At the moment I am working on a medialibrary in the Laravel framework.
I am looking at WordPress with a users-experience point of view.
The tab Media Library shows the images which you can select.

  1. I’ve checked TWO images (Shift + click) within “Insert Media”
  2. I switch to “Featured Image” and check ONE image for Featured Image.
  3. When I switch back at Insert Media it remembers the two previously selected images and forgets the checked Featured Image.

enter image description here

Read More

How does WordPress “remember” what images are checked in Insert Media view. Is that a Backbone view they’re using with some data stored in a model? Because each time I switch between Insert Media and Featured Image the UL element is changing it’s id attribute: (__attachments-view-xxx).

When I just use plain javascript, could I put some ID’s in an associative array instead? It means that each time I switch back to Insert Media, I need to find the corresponding images to re-check them? What if you have hundreds of media-items to search each time…

I have the feeling the Underscore library might be helpfull somehow as a good alternative but haven’t figured out how to use it to make everything as smooth and fast as possible… It looks WordPress isn’t even “refreshing” the media items. Could anyone give me some advice to mimic this behaviour?

Post Views: 5

Related posts

1 comment

  1. A simple way would be:

    • each item in the gallery view has a unique id (for example the actual ID from wordpress). It can be stored as a data-attribute or the html id attribute for example.
    • you then have separate arrays that store the IDs of selected items for each tab (insert media / featured image)
    • when user clicks an item, the ID of that item is added (or removed) to the corresponding array for the tab he’s viewing
    • when the user switches tabs you first deselect everything in the gallery (remove the class that marks them as selected), then go through your corresponding array and re-select what’s in that list.

    Of course, I’m sure WordPress is doing something much more refined, like storing a list of all the images it got from the AJAX request as objects, then doing these operations on that list and also showing/hiding items in the gallery view based on what tab you select. But the general idea is the same.

Comments are closed.