How to Build Media Library in the Front-end ▶

 What if you could remove images by just simply selecting them like this and coming down here to click on delete files and it actually goes away from the media library? What if these three files can be simply deleted as quickly as that? What if I can come down here and click on delete files and then refresh the media library and see if it’s gone?

What if it’s actually gone? What if I can also very easily select a file from the media library and use that as my post featured image? What if all of this was possible? With the power of JetEngine and JetFormBuilder. What would you do with it? My name is Tobi Salami and I’m going to show you how you can do that in this one video.

You want to hit that subscribe button so you never miss a video like this which comes out every single week. Without wasting more time, let me show you just how you can get this done. Let’s do it. Here are the plugins you need. You just need to install JetFormBuilder and JetEngine. JetEngine is used to query the items inside of the media library.

And JetFormBuilder, you can use it to display and even manipulate the media library items. I’m going to show you how to do that in a bit. Your page builder really doesn’t matter. As long as it supports JetEngine and JetFormBuilder, you’re good to go. I’m going to use Elementor Pro to demonstrate what I’m going to demonstrate here, but of course you can follow me if you’re using Bricks Builder or Gutenberg, just the same.

I have Bitfile Manager here installed, and my reason for that is that I want to show you how the files are structured whenever they’re uploaded in the media library. And also, Be able to prove certain things to you, such as the deletion of the actual files. Beyond all of this that I’ve shown you here, the only other thing you need is an extra code snippet I’m going to give to you, but I’m going to show you that later in this video.

Check the link to that code snippet in the description and you can make use of it totally for free. Let’s go ahead now to create our first query. Now, why are we even creating a query in the first place? It’s because of the fact that every single time that you create a media library item, like you upload items like images to the media library, what you’re actually doing is creating a post in the database.

And the post in the database is linked to the actual file inside of the file structure. Let me show you that. Let’s go ahead and create a query. If you come to query and click on add new, and we just call this query, whatever we need to call it, maybe we call it query of media library items. Now inside of query type, let’s just select here SQL and AI query.

We want to come down here to where we have from table. And as I mentioned before, what you’re creating when you upload something to the media library is a post. So we’re going to come for the post. Table. So we’re going to select the posts table there. Good. The next thing we want to do is to toggle on the preview result here, because we want to see all of the posts we have.

There, 908 posts. This includes all of the posts from all of the post types on the site. When you upload something to the media library, it could be an image, it could be a music file like an mp3, it could be anything else. What it actually does is to create a post with the post type of attachment. So let’s specify that query clause here.

We can come to column and select the post type here and say that it should be equal to attachment. Now, once we have that type in there, you can see we now have 39 posts. And this makes sense. Let’s take a look at it and see what we have here. You see you have a post with the post title Elementor logo full blue.

It’s one of the media library items. We can check for it. If we come to media library here and let’s just search Elementor. There we have it. In fact, we have it uploaded multiple times here. If you scroll down a bit and look again, you see another one here. Elementor logo full blue. Exactly. You scroll again, you see another one here.

That’s all uploaded into the media library. Let’s scroll down a little and see if we have another one. We have logos of cars. Um, I think we’re expecting to see cars here, but let’s copy and search and see what we have here. What we have is this. They’re not logos of cars. They’re actually logos of other logos.

I’m not sure why I called it that. But anyway, that’s not the point of the tutorial. The point is this, that when you upload any media item to the media library, it creates a post inside of the post table where the post type is attachment. Excellent. As you can see here, you have the ID of that particular media library item.

That’s good. We’re going to make use of that later. We also have the post author, which is simply the person who uploaded that particular media library item to the media library. And this is good news, because you may only want to show the media library items to the person who uploaded them. So let’s make that additional specification here.

We can come to add new and on the column here we can say that the post author should be compare and say equal to and we use the dynamic value here of user and we get user id, current user id. So it’s going to fetch the current user id and if it matches the post author. Then it returns all of the media library items belonging to that person.

We also want to specify that post that a user has not yet sent to the trash should be shown to the user. So to do that, let’s come down here to post status and select and specify the default post status to be inherit. So I want to select that and come down here and add new. We want to come inside of here and select post status and say it should be equal to.

Inherit, just like that. Now you see the number is result count 37, and that’s okay. When a post is created, it’s not set to publish as the post status, it’s set to inherit. And I want to guess why. Whatever the parent is, whatever that news post is, if it’s currently published, so am I. If it’s currently trashed, so am I.

So I think this is why it’s set to inherit by default. I don’t know. I mean, ask WordPress. So set this to inherit by default, and it’s not going to show all of the media library items that are in the trash. Let’s move on. Now, because of the fact that we’re dealing with images and some of the media library items could be MP3 files or PDFs, you know, or other such file extensions, we want to make sure that we’re dealing with an image.

Thankfully, whenever you upload an image to the media library, That image is specified in the database as an image. If it’s an mp3 file, it is specified as a music file. So, that is good because now we can further drill down our query. Let’s look at it. If we look at this image for example, we see that it has something inside here called post MIME type and that is set to image.

You see image and then you have SVG plus XML. So first of all, for each upload, it tells you the type of the upload that it’s an image, and then it tells you the file extension of that particular image. If we scroll down to the next one, let’s say this one, the logos of cars that turned out not to be actual cars, but All the logos.

You see, it’s a PNG right here, right? If we look inside of the database structure, let’s just see what we have here. You see that the post MIME type is image. That’s good. Slash. And it tells you it’s PNG. That’s good. So let’s say we want to specify that the PostMIME type should start with the expression Image.

That way we’re sure we’re getting all of the images in our media library and nothing else. Let’s do that. We can add new here and say that the column of PostMIME type should be PostMIME. We’re going to select regexp, or regular expression, and we’re going to say that it should start, and that’s what the caret symbol there does, it says start with the value image.

So we’re going to say, hey, start with the value image. That way, all of them that we have here should start with the value image. Image. Now, because of the fact that we want to show this in the front end and attach this as a featured image to an actual post, we don’t want SVGs, right? So let me show you how we can exclude that.

We can come to add new here, and on the column, we want to specify again the post MIME type. Now, inside of compare, you want to select not regexp. So you’re saying the post MIME type should not be SVG. So we shouldn’t have the expression. SVG. As you can see inside of the result counts. Here you see, you no longer have SVGs.

What you have is PNG. If you come down here, you have another PNG and so on. So you have all of the other file types including web P and whatever you want, but not s VGs. That’s okay. I just wanted to show you how you can further exclude items if you wanted to do that. Now we have this all set up. We can come back here later to make some modifications if we want to, but this is entirely our choice.

Inside of where we want to specify and, so that all of this should be true for this query to work. Now that we’re done with that, we want to click on add query. We’re almost ready to go. What we need to do now is to create a listing of all of this media library items. We can do that. We can come inside of listing here and create one.

Let’s create one. We can add new, and we’ll come to listing source and click on query builder and select the query we just created. The query of media library items. Now, we want to say listing of media library items. Whether you use Elementor or Bricks or Gutenberg, your choice, just select your listing view here and move on.

Click on create listing item and we’re ready to go. Now inside of here, let’s add a simple container. Now, once you add the container, inside of that container, you want to add a checkmark widget. The checkmark widget will be available to you inside of your builders. Just look for it and bring that inside of here.

Now, you probably have seen that before. You may not have, but if you have, you probably was wondering, what is that for? I’m going to show you. Now, once you add the checkmark widget, you see it looks exactly like it says, it’s a checkmark. So, let’s just modify it a little bit. You can see the control type can be either HTML here or image.

So, let’s just select image as the checkmark type and select icons that I’ve previously uploaded. So, by default, it’s going to show this way. So we’re going to click on select, and it’s going to show that way by default. And after it is checked, it’s going to show this way. Now, this makes complete sense, right?

Not yet, but I’m going to show you. Want to add now the dynamic field for the title of this particular image. So let’s just drag that inside of there. Now that we have that there, you see it already pulls in logos of cars as the post title, because by default, the media library items for. Each of the media library items has the title of that particular media library file as the post title.

So it makes sense that this already pulls it in because by default it fetches the title. We want to fetch one more thing. We want to fetch the actual image. So we’re going to come inside here again and select the dynamic image widget here. Let’s drag that in. We have it inside of there, but unlike the previous dynamic field widget, this does not by default fetch it.

Let’s see where that is fetched into. Let’s come back inside of the query and look right at the bottom here. We can see inside of each of these query items that you have something called GUID. Global unique identifier. The meaning of that is not the point. The point is this, that carries the URL to the particular image file, as you can see here.

So we’re just going to copy the expression GUID here. We’re going to come back inside of that listing, and we’re going to paste that inside of custom field here. And as you can see, very sweetly, it returns the particular image. To us, let’s make some design modifications to this. I don’t want to bore you with this, but once I’m done, we can move on.

Okay, I’m done. It doesn’t look mind blowingly good, but it works. We can click on publish and we’re ready to go. Now, let’s go ahead and create our very first form. Now, keep in mind that the form we’re going to create is a form that helps us to update a post on the site. So let’s just click on add new form here and try to create a post update form.

Now, the purpose of creating a post update form here is just so that we can update a particular post without uploading a new media file. Now that makes sense. And let’s see how. Let’s create a post update form here and call it post update. Now we’re going to click on start from scratch. Now inside of post ID here, let’s say we want to fetch that post ID from a query variable.

We’re just going to come down here and select URL query variable. And inside of query variable key, let’s give it any key of our choice. Let’s say the key, for example, would be your ID. Something like that should be fine. And if you’re not familiar with query variables, it’s exactly what you’re seeing in the URL here.

Anything after a question mark or after this ampersand symbol. So query variable here on this particular page that we are is post. And another one is action. So usually a query variable will be separated by an equal to symbol and then the value for that particular query variable. Just like that. It’s quite simple.

So we’re creating a new one for ourselves here. We’re going to call it your ID. As simple as that. We’re going to pass the id of the post we want to edit into that query variable and then go ahead and edit that post. So let’s just copy that for now. That’s our query variable key. Next, we want to select the post title.

So in place of text, we’re going to type in here, post title. Let’s also ensure that the key for that particular field is also post title. Title. We’re going to type that right inside of there. I’m going to assume that you’re going to add all of the fields that matter to your own situation. But my main aim is to add a field that edits the featured image.

So let’s just add a new field here. We’re going to use a radio field. So let’s just select radio inside of Now, a reason for selecting a radio field is because of the fact that using a radio field affords you the opportunity to use only one item at a time. And if you know anything about posts inside of WordPress, you know that the featured image can only accommodate one single image at a time.

So this makes complete sense. Now, let’s add an input label for that. We’re going to call that featuredImage. Or maybe we call it selectFeaturedImage, that’s fine. Now, inside of here, you see selectFeaturedImage is what’s specified here, and that’s okay. Next, instead of manual input here, you want to come down here and say, it should generate this dynamically.

Now inside of generator function, we want to fetch our query. So we’re going to select the generator function here as getValuesListFromJetEngineQuery. Now, we created a query before, and the query was meant to return all of the media library items. And that’s excellent. So we’re going to make use of that right now.

Look inside of the URL here, and you see that the query ID stored in the query variable called ID is 104. The query variable key doesn’t really matter here. What really matters to us is the actual ID. So let’s just copy that and bring that back inside of the form. Now inside of the form, you see that inside of field name, you can specify the ID.

It’s not written anywhere here. It’s somewhere in the documentation on Crokoblock, but I’m going to show you just how to make use of it. So once you specify the ID, that’s fine. Now you want to separate it with a pipe character just like this. You also want to specify what should be the value of that field.

The value in this case for the media library and exactly what WordPress stores as the featured image whenever you create a featured image. So we’re going to look inside of the database structure here. Let’s select ID here. We’re just going to select ID and bring that inside of the form right here. And we’re going to paste that inside of there.

That’s, that’s our ID. Now after specifying the ID, what next do we want to specify? Let’s say the post title. So we’re going to separate that again with the pipe character. We’re going to come back inside of the query here. Let’s just drag that inside of here. So it’s very easy to look at, and we’re going to select here the post title.

So whatever is the post title or the name of that particular image, we want that to show inside of the form. So once we select that here, We have post title selected here, and that’s mostly done. Let’s see how far we’ve gone. We’re just going to click on publish. We’re going to come inside of the front end here, maybe to the editor first and drop that form field inside of here.

Now that we’re here, let’s add the JetFormBuilder form right here. Let’s just drag that inside of the page here, and we want to select the form post update form right here. Now if we click on publish and come to the front end, now you have your form here, the post title and all of the featured images listed as a simple text right here, inside of a radio field.

And that sometimes makes very little sense because you’re not expecting me to remember all of the names of all of the images I uploaded, are you? So let’s just make this a little more visual. Let’s come back inside of the form here. And inside of the featured image here, we want to specify custom template.

Now inside of choose custom template, we want to specify the listing that we previously created. Listing of media library items. Now that was the reason for adding the checkmark here. This checkmark is going to specify whether or not a particular image has been selected. Now that I have that saved, let’s come to the front end and refresh this.

What we have now is a list of all of our featured images. Excellent. Now if you select any of them, you see it just changes to that bold check mark right there. That makes good sense. Now let’s make use of this to update a particular post on the site. To do that, let’s do a few things. Let’s come inside of the JetForms settings here and we want to remove this post submit action right here.

We want to add a new one. The new action would be this. We want to select insert or update post. We want to select that. And inside of here, we want to say the post type is post, because that’s a post on the site. And we want to select the post status. Let’s just leave it as it is. So we’re just going to select here, keep current status.

So whether it’s published or drafts or whatever, let it remain as is. That’s okay. Now inside of field map, we want to specify that the post ID should be mapped to the post ID that we’re retrieving from here. We also want to specify that the post title should be mapped to the post title. And most importantly, we want to specify that the select featured image field should be matched to the post title.

To the post thumbnail, which you can see right here. Now you see here that it accepts attachment ID. That is excellent because now we know for sure that because, in fact, let’s click on update and check this again, we have the value set to ID here. This would work absolutely beautifully for updating our featured images.

This makes complete sense. But this is all about how we want the stuff to act after we click on submit. How about before we click on submit, we want to preload this with all of the details for that particular post we’re about to update. Right? So let’s just click on update. We want to come down here to where we have our post.

We’re just going to come down here to preset and we want to click on enable. So inside of source here, we’re going to select that. We want to fetch this from posts and we want to get the post ID from a URL query variable. The query variable will, of course, be the same query variable as I showed you before.

Let’s just select that. Your ID. Right there. Good. Now we’re going to come down here and say that the post ID that it should update should be the post ID right here, which is the post ID inside of the form, we’re going to say that down here inside of post title, that one should also be fetched from post title, whatever it fetches from the URL query variable as the ID, it should get the post title and update that post title for us.

We also want to say that it should get the featured image and update that too. We have all of these things preset on page load. We’re good to go, right? Let’s click and save and continue. Now let’s just go to the back end and find any post that’s going to be our culprit for this particular demonstration.

Any post of our choice is fine. We just want to grab any post. Let’s say this one. And we just want to click on edit here and see what we currently have as a featured image. Um, nothing sets as the featured image and that’s okay. It doesn’t really matter to us. But what we need here is the post ID for this.

So we’re just going to grab that post ID from the query variable here. You can see in the URL for post, we’re going to grab that post ID right there. Once we select that, that’s 235, we want to come to the front end now. And let’s refresh this again to see what happens here. Absolutely nothing because there is nothing inside of our query variable in the URL here.

Let’s just add that query variable here. We’re just going to type it in manually. We’re going to select here your ID. Of course, that’s what it is. We’re going to use the question mark, which is how we specify our query variables, right? And inside of here, we’re going to pass that ID for ourselves. The ID we copied just now is 235.

So if we click and enter again, we see what happens now. We see that it fetches the post title and also attempts to fetch a featured image. But we see. that inside of the post there is no featured image. Let’s try to update this post by selecting any featured image of our choice. Let’s say this one. This one is selected.

It’s okay. We want to come down here and click on submit. Now let’s see if that actually does work. If we come back inside of the post and click on refresh here. That’s it. Right there. It makes complete sense to believe that now you can select any image from your media library and use that to attach to any post on the site.

Using JetFormBuilder, this is a breeze. But what if you wanted to instead delete images from your media library? How would you do that? This is part 2. The process to do this is somewhat simple. Let’s see. If we come back inside of the form here, let’s change this. Instead of it saying postUpdateForm, we want it to say instead, deletes postUpdateForm.

library items. Now in this case, the preset doesn’t matter to us because we don’t care whether or not anything is fetched from the database on page load, right? So we’re just going to toggle that off next. We want to remove this too, because it really doesn’t matter to us either. We also want to remove the post title because that doesn’t matter to us either.

In this particular situation, we want to fetch. all of the items inside of our media library and then proceed to delete anyone we select. Let’s change the submit action then to say a different thing such as delete files. Let’s also change the input label of this to something like remove selected images.

Now inside of the form key here, we want to specify remove. Images, something like that should be okay. We’re also going to come back inside of the jet form and take off that post submit action. We just want this form to delete images, right? Any other form actions you want to add here or any other form fields you want to add here is your choice.

But I just want to show you how I can do this. If this is the only use for this form and we’re going to click on save and come to the front end and refresh this and see what we have now. We just have remove selected images and we have the ability to select any of these images and come down here and click on remove or delete files.

But it’s not gonna work, is it? Because of the fact that we’ve not yet set it to work. So let’s get that to work. But before we do that, let me show you what happens when you upload any media file to the media library. Let’s come back to the media library. Now you see here that you have a list of all of these files.

I also showed you that you have it listed inside of the database when each of them are uploaded. of the post type of attachment. That’s what I showed you. And that is true. But there’s one more thing I needed to show you. And that’s the fact that each of these images are also showing inside of the file structure.

Let’s go inside of Bitfile Manager, for example, and take a look at it. Now, using any file manager plugin of your choice, I choose to use Bitfile Manager, you can look at the file structure of the files inside of your media library. All you need to do is come inside of WP content. You also want to come inside here to uploads because that’s where they’re actually uploaded to.

And you see it’s categorized by year. For my own, it’s the year 2024. I’m going to select that. And inside of that, it’s also categorized by year. Months. This is December. I’m going to select that too. And you see all of the images I uploaded here. Let’s try to upload a brand new image and see what happens now.

Let’s come back inside of the media library. Let’s just drag things out so they look very good. Want to come here and click on add new media file. Let’s select a media file and upload it. So I have three files uploading here, which I just uploaded, and take note of the names of these files. And we’re going to refresh that file structure here and see if we can identify these files and see exactly what happens to them when we upload them.

If we look again to see if they’re complete, they are. Let’s select, for example, JetEngineNotificationSystem and see if we can find that inside of the file structure here. Let’s refresh. That’s it, right here. As you can see, if we scroll down, you also have it right here, and here, and here, and here. That’s, that’s surprising, right?

But look at the file name. We can deduce something from it. You see here that it shows JetEngine Notification System. That’s the correct file. That’s the original one. The one we uploaded. But if we select the one just beside it, you also notice that it’s the same file, but with a different dimension. You see 1024 pixels by 576 pixels.

If we select another one here, you see this one is 768 pixels by 432 pixels. If we select this one here, you see this is 300 pixels by 169 pixels. So by default, WordPress breaks your files down into smaller image sizes, thereby multiplying these image files and filling up your file storage. You would know, because if you come inside of this, for example, and select any image file of your choice, let’s say this one, you see here that you have different image resolutions to choose from.

Is it by magic that they came there? This is exactly what WordPress does. Breaks it down to all of this and lets you select from any image resolution of your choice. And that specifies and select a particular image from your media inside of your file structure. Now, it’s okay. I mean, that’s not so bad, but what if you needed to delete all of this?

First of all, let’s come to the front end and see if those files that we just uploaded currently show. We’re just going to come here to refresh the page and scroll down and see whether they show now. As you can see, those are they. This is JetEngine Notification System right there. It shows just once. The original file shows just once.

You see here that it points to an original image file, the one you uploaded, not the one WordPress broke down into multiple dimensions. All right? Why do all of this matter? Because sometimes you want to initiate a deletion of that particular file. Now I have a small code snippet that I have included in the description.

You want to grab that and include that inside of your WordPress site. So this is the code snippet right here. You can see this is where it starts. You can just copy everything just as is. And put it on your site. You can make use of fluent snippet plugin or any other snippet plugin of your choice. You just want to make sure to activate it once the snippet is uploaded to your site.

Now, once you put that snippet on the website, you don’t need to make any changes to it. I made it in such a way that it’s very easy to use. Now, if you come under your media menu item here, you see media deletion, JFB. Right here, which means media deletion, JetFoneViewer, right? This is a place you need to make a few changes.

I’m going to link to this particular tutorial that you’re currently watching. You can click on this link here and come to this particular tutorial you’re currently watching. In case you come back many years in the future and you’re not sure what this does, you’re just going to click on this link and come back to this tutorial and watch it again.

You have three things to edit here. The custom hook name, The media field key and the success message. Let’s do that. If you come back inside of the form here, you want to specify all three. You want to come inside of new action. And inside of new action here, you want to click on call hook. You can see inside of here that you have the custom hook name.

This is your choice. Add anything of your choice here. So let’s just call the hook deletes my media. Something like that should be fine. You want to copy that exactly as you specified it inside of here. Let’s just save changes. You want to come to the form. And you want to specify that as the hook name right here.

Now, what this is going to do is to initiate a deletion of whatever file you have selected inside of your form field here. So select that first and click on update. Now, this form field has the form field key here called remove image. You want to copy that and bring that back inside here for media deletion.

And we want to select that and put that inside of media field key. That’s okay. Now, whatever you want to be the success message is your choice. I can say media successfully. And that’s okay. It’s your choice. And you want to click on save changes. You’ve specified the media field key, just as you have it inside of the form.

You’ve also specified the hook name, just as you have it inside of the form. This is okay. This is marvelous. You can come now and click on save changes. Save changes. Now, if you come to the front end and click on refresh, you have the ability now to delete any file that you select. Let’s say I want to delete this one, the JetEngineNotificationSystem file right here.

I’m just going to click on delete files. Now, after the page reloads, we want to scroll down and you see the file is gone. It’s gone from the database, but is it also gone from the file structure? Let’s check that. If you come back inside of the file structure here, you see you still have JetEngineNotificationSystem here, but that’s because we’ve not refreshed the page.

Let’s refresh. We’re just going to refresh and then scroll down again, see if we have it there. It’s all gone. Can you find it? Nope, because it’s all gone. Not only is that one gone, that single one file gone, all of the file variations that WordPress created is also gone just along with it. That’s good.

Let’s try to delete something else, but this time, we want to come back inside of the form and assume that we want to select multiple items at once. So, instead of using a radio field, we’re going to change this to a checkbox field. So now we’re going to have the ability to select multiple items and delete all of them at once.

So let’s just click on save again. We want to come to the front end now, see if we have our page ready to use. There it is. We want to select all of these three items. As you can see, I can now select three items because it’s a checkbox and not a radio field. Now I want to click on delete files. Let’s see if we have these three items off after I click on delete.

Let’s scroll down. It’s gone. Let’s see if it shows inside of the file structure. Let’s check. I’m going to come back inside of the file structure here and click on refresh. Once we click on refresh and scroll down, we see it’s all gone. This makes complete sense. And I know it’s going to empower you to do a lot more with your forms.

I hope that sometime in the future that the Crocoblog team will add a new action here for us to manage our media library items. For now, this hook works. You can get the custom code snippet in the description below and I hope this helps you a ton. That’s it. My name is Tobi Salami and until next time my people, I need you to subscribe to this YouTube channel and stay dynamic.