How to Upload Images

How to Upload Images
and Insert them into Posts

This guide assumes you have an understanding of:


Background Information

When you upload images to Classic-Pirates.com, WordPress will automatically generate different size variants providing the original images are large enough to support the size variant.

The size variants are:

  • Thumbnail – 480px wide
  • Medium – 960px wide
  • Large – 1920px wide
  • Original – the actual size of the image uploaded

For this reason you should upload images at least 1080px wide (preferably 1920px) but use images 700px to 960px wide in the Post Content which then link to the Full-Size or Large version in the Light Box.

IMPORTANT!

Example: If you uploaded an image 500px wide, WordPress would only be able to generate a variant at the 480px wide Thumbnail size.

This is why you should use large images when available, however be mindful not to select excessively large images, like those greater than 2560px.


How to Upload Images

After you’ve created your blog post and entered some textual content, position the caret where you wish to insert the image and click the Add Media button.

Screenshot - WordPress - Post - Caret

The caret is the flashing vertical bar which indicates the proposed insertion in a text.

This will activate the Media Library.

To upload an image:

  • Drag the file from the desktop folder onto the Media Library.
  • Or click the Upload files tab then click the Select Files button and locate the files you wish to upload.
Screenshot - WordPress - Post - Add Media

In this example a photo of the box art of the set 6267 Lagoon Lockup is being uploaded.

Once your image has successfully uploaded, a smaller version of that image will appear as the first thumbnail in the left column.

The other thumbnails are images which have been previously uploaded to the Media Library.

The white check mark with the blue background indicates this is the image currently selected.

Selecting Multiple Images

Be aware that:

  • You can insert an image which has been previously uploaded.
  • You can insert more than one image at a time. To do so, hold down the CTRL button while clicking on the other image(s) you wish to insert.

Entering the Attachment Details

In the right column you will find the Attachment Details – this is where you set an image’s ALT and Title properties.

  • ALT Tags
    • Provide descriptive information to help Search Engines and Screen Readers to understand what each image contains.
    • Act as the image Description when the Light Box is active.
  • Title Tags
    • Are used for the Light Box image description
    • Appear when the mouse cursor is moved over an image.

By default, WordPress will make the Image Title will inherit the image’s file name.

For example:

LEGOPirates-6267-Lagoon_Lockup.jpg

Becomes…

LEGOPirates-6267-Lagoon_Lockup

However, this could be improved for the benefit of Search Engines and Screen Readers.

Screenshot - WordPress - Post - Add Media - Alt Text

Try to describe the the image in a short sentence of 3 to 10 words.

First, remove any unnecessary grammar, insert the correct spacing and add descriptive wording.

For example:

LEGOPirates-6267-Lagoon_Lockup

Could become…

Box Art of LEGO Pirates set 6267 Lagoon Lockup

The Image Title text can then be copied and pasted into the Alt Text.

Note that, you may need to scroll up to see the ALT Text Input Field.

IMPORTANT!
  • Do NOT start the ALT Text with words like “Image of” or “Photo of” because Search Engines and Screen Readers have already detected the content is an image.
  • Do NOT make the ALT Text the same as the Image Caption – these should be different!
  • Do NOT enter “Click here to enlarge image” in the Attachment Details.  This is ONLY entered into the Image Details in the Post Content when the Light Box is in use.

 


Image Captions

WordPress - Post - Add Media - Image Caption

You may also enter a brief caption to compliment your image. As Captions appear in your Blog Post they don’t need to be descriptive but can be used to provide brief (witty) commentary outside the narrative of your blog post.


Attachment Display Settings

These are settings which, aside from Link To, you won’t need to change.

WordPress - Post - Attachment Display Settings

Alignment

This only applies to small images.  Most of the images you upload will occupy the entire width of the Blog Post and won’t require aligning.

Link to

Most commonly you will need to link a larger version of the image in the Light Box.

While in certain instances, you may need to link the image to an external webpage, like a LEGO Ideas Project or topic in the LEGO Pirates forum.

This requires changing the Drop Down to Custom URL and entering the URL the user will be taken to after clicking the image.

Size

This is the dimensions of the image (width x height).

The images used in your post should be around 960 pixels wide so if you’ve uploaded a large image, select Medium to reduce download times.

Screenshot WordPress - Post - Image Details - Display Settings - Size

Smaller images are only permissible if the Full Size version is 960 pixels wide or Less.

But always use images around 960 pixels wide if available.

Medium is smaller than 960px

Because Portrait Images are taller than they are wider, sometimes their Medium variant width will be significantly less than 960px.

If the Full Size width is greater than 960px then you will need to set a Custom Size.

Screenshot of WordPress - Post - Image Details - Display Settings - Custom Size

  • Select Custom Size from the the Size Dropdown
  • Enter 700 into the Width Input Field (the height will update automatically).
  • Click the blue Update button in the bottom-right
IMPORTANT!

Size Variations are only available for images uploaded to Classic-Pirates.com manually.

If your Blog Post contains:

  • Images hosted Externally (on another website) you will need to upload them to Classic-Pirates.com to generate the Size Variants.
  • Images imported automatically you will need to download the Full Size Images and re-upload them to Classic-Pirates.com to generate the Size Variants.

Always be mindful of the Image Size and Filenames when downloading and re-uploading images!

 


Inserting the Image

The final step is to click the blue Insert into Post button.

WordPress - Post - Media Library - Insert Image Button

To the left you will find the thumbnail(s) of the image(s) selected for insertion.


Editing an Image Inserted into a Post

After you’ve inserted an image into a post you may need to edit the image’s settings, particularly if you want to add a Caption.

WordPress - Post - Edit Image

To Edit

  1. Click on the image you wish to edit and a Toolbar will appear.
  2. Click the Pencil Icon

This will open the Image details dialogue box.

Image Details Dialogue Box

Here you will be able to edit the Attachment Details and Attachment Display Settings.

Screenshot of Image Details

After you make changes, click the Update button and you will be returned to the Post Editor.


Advanced Options

Unless you have an understanding of web design you will not need to change these options.

WordPress - Post - Image_Details - Advanced Options

The one exception is the Open link in a new tab checkbox.

If you are linking to external webpages (I.e. webpages which are outside of Classic-Pirates.com) then select this checkbox.

 


Light Box

A Light Box is a window overlay which appears over top of webpage content. When the Light Box is active, the background is dimmed black so focus is placed directly on the image being viewed.

It works by using a smaller image (around 700px wide) as a thumbnail in the Post Content which then links to a larger version of the image.

All images wider than 700px should open in the Light Box as it allows them to be viewed at a larger size and free from the distraction of other webpage content.

Screenshot of WordPress - Post - Content - Lightbox

An image displayed in the Light Box

To apply the Light Box:

  1. Edit the image and locate the Display Settings.
  2. In the Link To dropdown select “Image URL” or “Media URL” (this varies depending upon the post)
  3. In the Advanced Options
    • Change the Image Title Attribute to:
      Click here to enlarge image
    • Check the Open link in a new tab checkbox.
  4. And click the blue Update button.

Screenshot of WordPress - Post - Content -Lightbox - Settings

IMPORTANT!

You will receive an error if:

  • The Open link in a new tab checkbox is not checked for images hosted externally (on another website).
  • The Image Title attribute is not identical to
    Click here to enlarge image
Example
Render of "Imperial Island Fort" by BrickHammer - Front

Click this image to activate the Light Box


Replacing an Image

Sometimes you may need to replace an image but want to keep the same settings.

For example: a higher quality version of the image becomes available.

WordPress - Post - Image Details - Replace Button

The quickest way to achieve this is to click the Replace button which will launch the Media Library.

IMPORTANT!

The Replace button may not always be available so you will need to remove the image from your Blog Post and upload the replacement image as you would a new image.


Visual Feedback

In addition to the written feedback above the Post Editor, images requiring attention will be visually represented by a coloured border.

Red Error IndicatorRed – Image is not hosted on Classic-Pirates.com

WordPress - Post - Content - Error Colour - CyanCyan – the image ALT Text has not been set.

WordPress - Post - Content - Error Colour - MagentaMagenta – the External Link on the image does not Open in a new tab.


What Next?