076 693 8020              Web Design Cape Town   info@gwebdesign.co.za              Web Design Cape Town   Web Design Cape Town

G Web Design Tutorials | Working with Media in WordPress

Working with media

Working with media

Welcome to another informative G Web Design tutorial. We touched on Media in our other tutorials, Add post and Add page however in this one we will be delving a little deeper. Any web design will look bare to say the least, if it does not have any pictures or other graphical elements to bring the words to life. WordPress makes it very easy to add media elements to your posts or pages.

We will again use the default Twenty Sixteen Theme and use WorPress version 4.6. This tutorial will cover types of media that can be inserted, how to align images, embedding videos and removing media elements.

So let's get into it, it is assumed that you have already signed into you WordPress backend where we will be starting.

Where to find all your web design media?

All the media related to your WordPress website is located in the “Media” menu item on the left of your screen.

web design

 

Once clicked it will opened up your media library and you have a view of all the items that are stored all over your website. There are some sorting and viewing features that you can play around with. These include list or grid view, media types like audio, video and images.

web design

Adding bulk media items

When clicking on “Add New” it will open up the “Select files” button. This will allow you to add any media files from your computer. You will also notice that files can be dropped directly into the “Drop files anywhere to upload” section. This is a great organisation tool of WordPress. Any web design needs media and this makes it very convenient.

web design

Inserting different types of media

Now lets create a new post, follow the wiki Add post to assist you. Once you go to the Add New Post screen you will notice the button “Add Media” below the post title. First let's add an image from the computer. After we click on “Add Media” the “Insert Media” pop up will appear. Click the “Upload Files” to select your image. After the image is uploaded the screen below will open up lets look at the 3 marked areas. On the left we have the inserted image selected as indicated by the blue tick. On the right are the image details, like size etc… On that point a very important element to always fill in the “Alt Text” section for SEO purposes. Finally to insert in the post click the blue “Insert into post” button.

web design

 

web design

 

web design

 

Images
After it is inserted it will appear in the post content area as per the screen below. Remember this is a normal image which will include .jpg , png, gif even svg files (if properly activated).

web design

We can align the image simply by clicking on it. This will bring up the alignment options, remove option and edit option to resize and other advanced options. Your will also notice that your image will have 4 tiny squares on the four size which is used for resizing also. When you are happy simply complete the other relevant details and publish and you are done.

web design

 

Documents
Now let's insert documents files like PDF, .doc, .xls, etc… For this tutorial let's add a PDF document. This is how documents will look in the “Insert Media” screen.

web design

Documents when clicked on your website become downloadable as can be seen below after publishing the post.
web design

Video & Audio
You could insert an actual video file from your computer but it is much better to link a video that is uploaded to a popular video sharing website like Youtube or Vimeo. This will save you server space and resources and will probably load much quicker. Below is a link inserted directly into a post, you will notice that WordPress automatically converts it to the Youtube window and once published visitors will have the same great experience.

For audio inserting links from websites like SoundCloud and ReverbNation will have the same effect as the Youtube video and will automatically display as expected.

web design

 

Guys, that is it for media, play around with it and you will be a pro in no time at all.

Graham (Web Designers Cape Town)

G Web Design (Web Design Cape Town Company)
Your partner on the web

Back to Table of Contents

Comments are closed.