WordPress Tutorial Featured

WordPress Tutorial for Beginners Adding Media Images, Photo Gallery

Views: 289

How about a website or a blog without a single piece of image or graphics? How about a music brand site without any media in it? It will soon fade out because it will not be an eye catching website. Images and Media speaks a lot about any website and is equivalent to the text to any web page, in this WordPress tutorial we will learn about adding images or documents and media to our pages and posts and building WordPress photo gallery. So let us start.

If you have missed the previous tutorials then here are the links below:

How to Install WordPress Step by Step Tutorial

How to Create $1500 WordPress Website from Sketch

Adding Photo Gallery Media and Images in WordPress Pages and Posts

While creating or modifying a post or page you will find an “Add Media” button, once you click that button a new box will pop up with media options, on the left hand side of that box there will be few options like “Add Media”, “Create Gallery”, “Featured Image” Let us discuss them.

WordPress Insert Media

Adding Media in WordPress Page

Once you are on to the WordPress add media box, select “Insert Media” on the left hand side, there you will find a tabbed box having two options “Upload Files” and “Media Library”.

Upload Files: This allows us to upload our media files for adding them to our post or pages.

Media Library: This allows us to select available media files in our WordPress media library and use in our post and pages.

Uploading Media Files to WordPress

Once you are into “Upload Files” section there are two ways of uploading files.

  1. Drag and Drop: You can drag and drop any media file you want to upload.
  2. Select Files: You can use the select files button to browse through your computer and select files that you want to upload.

Once you have selected your file and uploaded, WordPress will take you to the media library tab and there you can add different options to your media file, some are though exclusive to type of media uploaded. You can select the media file now and modify different details before adding to your WordPress post or page.

  • URL: Web location of the media file.
  • Title: The title for media file selected.
  • Caption: The caption for the media file which will be displayed below that file in post or page.
  • Alt Text: One of the most important field, this text is displayed when the media is not loaded and breaks, the alt text is important because search engines use them to learn about the content as they cannot see images or media files to decide, they read alt texts to determine the element.
  • Description: This is the description about the media file.

Attachment Display Settings

Once you have filled out details about your media file in WordPress media library, now you can set different alignment and display settings according to the file type being selected. i.e. the options will differ for image type or document or other media types.

  • Alignment: Here you can select how the image will be aligned with your content none, left, right or center.
  • Link To: Here you can select HREF for the media file i.e. what action will happen when the media file is clicked, you can choose any option

None: it will do nothing when media file is clicked

Media File: this will load the media file URL on browser when clicked.

Attachment Page: This will load a new page exclusively for that media when clicked, i.e. the attachment page.

Custom URL: You can put any URL here, that URL will be loaded when this media file is clicked.

Attachment Details  

When you select any media on the WordPress add media popup box, you will find an “Attachment Details” section there, and this provides many options depending on media file type.

Delete Permanently: This allows us to delete the media file permanently from server.

Edit Image: This allows us to use WordPress advance options for editing images.

WordPress Edit Image

Editing Images In WordPress

Edit Image: This allows us to manipulate and modify image according to our needs, here you can find lot of options for modifying and editing the image:

  • Crop: This allows us to crop out a portion of the image as per our need.
  • Rotate left: This allows us to rotate the image to left.
  • Rotate Right: This allows us to rotate the image to right.
  • Flip vertical: This allows us to flip image vertically.
  • Flip horizontal: This allows us to flip the image horizontally.
  • Undo and Redo Button: These buttons allows us to undo or redo the changes we made to our image.
  • New dimensions: This allows us to set dimensions for our image, i.e. pixel width and height.
  • Crop Aspect Ratio: The aspect ratio is relationship between width and height. It can be preserved by holding down the shift key while resizing the selection of crop area. Use the input box to specify the aspect ratio, i.e. 1:1, 4:3, 16:9, etc.
  • Crop Selection: This displays the selected area for cropping as well as it allows us to manually determine the area we want to crop of an image, you can input the X and Y axis pixels you want to crop from the starting point and it will select that area.
  • Apply changes to: Here you can select on which format of images these changes will be applied.

Once you are done doing all changes, do not forget to save the changes by clicking the save button.  Then you can click the insert to post button and media file will be added to your WordPress post or page.

Adding Gallery to WordPress Page or Posts

Adding Photo Gallery to WordPress Pages and Posts

Now as we know how to add media files to our WordPress pages and posts, we may also need to create an image gallery sometimes so let us create one. Click the “Add Media” button again and now select “Create Gallery”. Once done, you can now select or upload media files, same as before you can add details and modify the media files as needed. Now select the images you want to add in the photo gallery, click “Create new gallery” this will take you to a new popup. Here you can configure different options for the photo gallery and its contents.

WordPress Create Gallery Options

WordPress Gallery Options

  • Link To: Select what action will happen when image of the gallery is clicked.
  • Columns: Numbers of column in the image gallery, i.e. number of images per row.
  • Random order: Will the images be in a random order, you can check this checkbox for enabling random order.
  • Size: Display size of each image in the gallery.

It is also possible to drag and drop and organize the images in order they will be displayed, rearrange the images you want them to be displayed, edit captions for images if needed and click “Insert Gallery” button to add the gallery in your page or post.

 

Allowed Media Types in WordPress

WordPress allows lot of extension for uploading to media library such as.

Images

  • .jpg
  • .jpeg
  • .png
  • .gif
  • .ico

Documents

  • .pdf (Portable Document Format; Adobe Acrobat)
  • .doc, .docx (Microsoft Word Document)
  • .ppt, .pptx, .pps, .ppsx (Microsoft PowerPoint Presentation)
  • .odt (OpenDocument Text Document)
  • .xls, .xlsx (Microsoft Excel Document)
  • .psd (Adobe Photoshop Document)

Audio

  • .mp3
  • .m4a
  • .ogg
  • .wav

Video

  • .mp4, .m4v (MPEG-4)
  • .mov (QuickTime)
  • .wmv (Windows Media Video)
  • .avi
  • .mpg
  • .ogv (Ogg)
  • .3gp (3GPP)
  • .3g2 (3GPP2)

 

You can know more about allowed extensions in WordPress at the link below:

WordPress supported extension types

Now we have learned adding media files like images, documents  to our WordPress website in next tutorial we will see how we can make our WordPress website SEO friendly with WordPress SEO plugins. Meanwhile is you have any questions or suggestions write in the comments below, if you found this tutorial helpful then share with your friends and in social media.

Comments: 0

Your email address will not be published. Required fields are marked with *