Media Library in MakeStories 

Introduction to Media Library

Hello, guys Welcome to lesson number 10 of the MakeStories 101 course. In the last lesson, we saw what are layers and how you can use them to reposition your element and how you can group multiple elements, and then how you can create groups of groups.

Now, in this lecture, we are going to get into the fifth element on our left bar, which is called the media Library. As the name suggests, a media library is basically the library of all your media elements, namely images, gifs, and videos.

So, Whenever you will get into the media library, the first thing that you will see is called the free images. The second option is free Gifs, and the third option is free videos. You might have seen something similar in the background tab, too.

All the images that you'll see in the background tab, are the same images that are getting reflected in this area. So, both of these things are connected.

Difference between background images and Media Library

Suppose if you search for San Francisco and your media library over here, the same search will be applied to your background-type images.

The same thing will also be applied in the media library popup model.

So now you can see that we did search for San Francisco and we have so many different images.

The difference between using images from the media library and one from the background is very much like defining how you will create your stories.

Suppose you’re clicking on the particular image in the media library, it will be placed on the canvas. On the contrary, if you go into the background tab and click on the same image, it will be applied to the background.

This is the core difference between using the images from the background tab and using the images from the media library. We hope this is pretty clear to all of you.

When you apply any particular image over the canvas using the Media library. That image can be resized, freely floated, and can be controlled by all sides of the image.

The one most important thing to remember is that suppose if you resize your Image, more than this size of the canvas, then it will be automatically applied as the background.

How to Reposition Your Image, GIFs, and Videos?

What if you want to change a square image or a horizontal image to a vertical one, but still want to position it? Again You will have to double click the image so you can see the entire image and part, which will be highlighted, and the one that will be shown in the image element.

Now click outside of the image and you will see that the image has been repositioned. You can add your Gif images in a similar fashion. You can resize Gif images and again if you want to reposition it, double click it and then reposition the GIF image.

Now when you add an image element, you can go into the image settings, and here you will find the image alternative text. So you can write an image alternative text suitable for your image.

After GIFs, we will go into the free videos. We will add the video element. Try to resize the video, and double click the video to reposition it, and it will be positioned very well as per your liking.

All about Media Library of MakeStories

The Media Library has free stock images, gifs, and videos. Now let's go, come in, see what you have in your media library. All these three options of free images, gifs, and videos, will find them again when you hit the media library button.

You can find them under free media that includes images and videos, and gifs.

If you search for an image in your outer area, it will be again reflected in your inner area too, because these are the same components that are shared across all the areas like the media library, the media library model box, and the background.

So you can see that this is basically a house or you can say this is a place where you will see everything related to the media.

Let's say if you want to see all the images or videos that you have uploaded, you just have to click on my library. When you click on my library, it will show you all the images, videos that you have uploaded to my account data. The Media library allows you to filter your media with the latest and oldest.

You will also find the filters like if you want to have a portrait image, or if you want to have a landscape or square image.

It also gives you an option to choose media type in which you can select the type of media like image or video. If you only want to see images, you can click on the image and it will show you all the images that you have uploaded.

If you click on the video, it will show you all the videos that you have uploaded to your account till date.

Now, the most important and amazing thing about this media library is that you can organize them as per your wish.

Let's say you are a big agency having multiple clients, and now you want to organize all the assets that you upload on the MakeStories server.

To let you understand more in a precise manner, we will create a new folder in the Media library and will name it as lesson number 10 and click on create new.

Now let's say you want to move the particular video to this newly created lesson10 folder. We will click and drag-drop the media into that folder and It will be moved to that particular folder.

We will double-click on the folder to see that uploaded media file. Apparently, that media will appear in this particular folder. You can also create folders inside folders as we do in the Google documents.

What is External Media in the MakeStories editor?

Now, there is this other folder called us external media. Now suppose you have an image on your website. You don't want to upload it to the MakeStories server. You can also do that.

To do that You will have to click on add new media, and there is an option called to add an image by URL. Let's say we have a website called makestories.io, and we want to upload the particular image, but not by drag-dropping or by uploading it to MakeStories server but by just entering the URL from our own server.

Go to the website, find the image and copy the image URL and paste it and click on add media. Now, when you do this, all these Media will go into the external media folder. It will not be here because all these images are coming from an external server.

We will click the image from external media and click on add media to slide. Now you can see that this image is added to the canvas, but it is not coming from the MakeStories server, but it is coming from the external URL.

Similarly, you can also upload videos from an external URL by clicking on add videos by URL. Again, it will ask you for an MP4 file and you can upload it. This is all about the media manager.

How to assign properties and tags to image, video, or Gifs

Now, one thing that we have done is suppose this is an image. You think that you are going to use this image every time in all of your stories.

Suppose you have a logo. What you can do is assign some properties to this particular image. To do so when you hover over the image, you will get an option with three dots.

So you will click it and find an option that says edit. So you click on edit. The moment you do that, you will find a section in your right area, which says media details give you the file name.

Here it asks you to put the alternative text. Then you can add your tags and click on the Save button.

If you have applied a tag to the image, that image will show up when you keep the search for that particular tag.

This kind of tagging actually helps you do a search and organize your assets in a better way.

How to upload and organize all your assets?

Those three-dot options give you multiple options like you'll find trash. By clicking on thrash will move your image to the trash folder, which you can access from the left panel.

You can also retrieve an image from a trash folder. All you have to do is click these three dots and there is an option to restore your image.

Another option here is to copy the link. You can copy the image, and paste it wherever you want and by doing so you will see the image.

Now the third option is to move it to folders. You can either move these assets by dragging and dropping them. Another way to do this is by clicking move to and then selecting the folders.

Once it is moved successfully, it will show you a message that the media is moved successfully.

You can also share the assets with your colleagues. Let's say you want to share it with someone. To do so, click on the share button. The moment you do that, I will find the email address where you can put the email of that person to whom you want to share the asset.

You can also give them an access level. Like you can give them an edit option so they can share it further and they can even edit the details of this particular asset. And then you can invite them too.

So when they log into the account, they will see all the images that are shared with them under the shared with me option.

This is how you will upload and organize all your assets.

This media library is something that you are going to use very frequently. Again, you have free media, if you want quick access to free stock assets, you can do it through the particular media section, or you can also go and you can get into the free media section and use them.

You have your own library and the shared library that the other people have shared with you.

You can even share your folders. Let's say you want to share a particular folder. Click right on the folder then click on share and then enter the email address of a person you want to share with.

Here we are done with the media library, which is a pretty big module, and the more you will use it the more clear you will be.

In the next lecture. We will see what are the elements and how to use those elements.