Upload Multiple Images into WordPress

Upload Multiple Images Into WordPress

Get a copy of the transcript of this guide (pdf)

upload-multiple-images-into-wordpress

Go to Media Library then Add New

Uploading multiple images is great if you’ve got a whole lot of images that you need to add in a hurry. Let’s try to add multiple images at once. To do that, go to your Media Library then click om Add New.

Add multiple images by dragging and dropping of images

There are two ways to add multiple images all at once in our media library. First, in your file browser, select all the images that you want to upload. Highlighted files mean that these are the selected files. Once done, drag those images to your WordPress Media Library. Don’t drop it yet, wait for the screen to turn into blue, it will say “Drop files to upload”, then drop the images.

Images are currently uploading

You have successfully uploaded many images all at once. The second way to upload many images at once is to go to your Upload Files tab.

Click on Select Files

Inside the Upload Files tab, click on Select Files. After clicking, your file explorer will pop-up.

Select all the files that you want to upload

Select all the files that you want to upload. Selected files are indicated in blue highlight. Once done, click Open. These are the ways that you can upload many images all at once in WordPress.

Replace Images with Visual Composer

Replace Images with Visual Composer

Get a copy of the transcript of this guide (pdf)

replacing-images-with-visual-composer

Edit a page by clicking on the Edit Page menu from the top toolbar

replacing-images-with-visual-composer-1

Changing a picture is a really common thing to do on a website. You might just want to freshen up the look of your website, you might have a new product, or you’ve taken a bit of photo.

So let’s edit a page. To edit a page, click on the Edit menu.

Backend editor of the Visual Composer

replacing-images-with-visual-composer-2

After clicking the Edit menu, this will drop us to the backend editor for the visual composer.

As you can see in the image above, we’ve got three image elements. Hover your mouse over the first one and click on the little pencil on the green bar.

Add an image

replacing-images-with-visual-composer-3

After clicking the pencil on the green bar, a pop-up box will appear wherein you can set the properties of your image.

Now, to add an image, click on the box with green ‘+’ sign. Clicking the plus sign will take us to the media gallery.

Upload an image

replacing-images-with-visual-composer-4

If the image you want to add was already uploaded in the gallery, you can select the image, but if it wasn’t, then you can click the Upload Files tab to add more images.

Upload Files tab

replacing-images-with-visual-composer-5

In the Upload Files tab, you have two ways in uploading your images. You can either drag and drop the files in your computer directly to WordPress or you can click Select Files and file selector will pop-up.

Select Files pop-up

replacing-images-with-visual-composer-6

Select the images that you want to upload. You can select one image or multiple images at the same time. After selecting the images, click Open.

Uploaded images in progress

replacing-images-with-visual-composer-7

After selecting the image that you want to upload, a progress bar will be seen. It means that the image is currently uploading.

Note: Don’t upload images that are really huge files. If you’ve taken a file photo on a phone, it’s probably okay just to upload it as it is. But if you use a high-resolution camera, I recommend to bring the size down to under one megabyte. You can bring down the image up to 1200 or 1600 pixels. It’s perfectly fine and it’s pretty big enough for a website. Uploading a huge file will take a time to upload them depending on your internet connection.

Edit title and set image

replacing-images-with-visual-composer-8

A thumbnail will be seen to your uploaded images. The image size we uploaded was reduced a little bit because we’ve got our Smush setup. For SEO purpose, applying the proper title to your images is a great plus. Select the image that you want to be set in our first image element then click Set Image.

Save changes

replacing-images-with-visual-composer-9

You can see now the thumbnail of your selected image. Click Save Changes.

Update page

replacing-images-with-visual-composer-10

In our first image element, we can see the thumbnail of our selected image. To update the page, click Update. Clicking Update will commit the changes in the database. To see the changes of the page you edited, click on the permalink.

Edit with Visual Composer

replacing-images-with-visual-composer-11

Great! There’s the new image we set.

The other way to edit this is with the front-end editor for Visual Composer. To edit the page using Visual Composer, click on the Edit the Visual Composer menu.

Front-end editor: Visual Composer

replacing-images-with-visual-composer-12

On the little pencil again on the green bar, same from the process before. After clicking the green pencil, click the green ‘+’ inside the box and choose the image that you want to set. If you have already selected the image that you want to set, click Save Changes. Repeat the process until you’ve completed all the three elements.

Update page and close

replacing-images-with-visual-composer-13

Now, we have our three images lined up beautifully. If you’re happy with it, click Update and that commits the changes. Now, to close the Visual Composer, click X.

Page successfully edited

replacing-images-with-visual-composer-14

After clicking X to close the Visual Composer, we will be seeing the normal view of the page. That’s how we edit the page using the Visual Composer.