Adding Images – Pens Around The World

Adding Images and Working with the Media Library

This page contains instructions about:
Images | Adding Images to the Media Library | Adding images to a Forum post |
Adding images to a Blog post

There are three places you may want to share images on the Pens website:

in the Forum posts,
in Blog posts (Bi-weekly Wisdom, Pensives, Author posts),
in your Profile.

Forum and Blog posts draw on images in the Media Library. This document explains how to add images to the Media Library and then how to use Media Library images in Forum posts and Blog posts.

For Profile images please see How do I add or change my user profile? In the FAQs.

Some words about images

Types of image file

Image files for use on the Internet come in several varieties. The most common are files with the suffix JPG or JPEG. These are used for photographs and images with lots of grades of tone.

The next most common nowadays are GIF files. These are used for short animations. GIF files can also have transparent sections.

PNG files are used for graphics, logos and other images that are usually small and have a limited number of distinct colours. PNGs may also have transparent sections.

There are other image files. WordPress is pretty good at showing many different file formats, but it can’t cope with some. For example, please don’t try to upload files with a TIF or TIFF suffix. These are very large files intended for professional lossless photo-editing and often for printing.

How big?

For illustrations, I recommend using images that are between 100 kb and 300 kb (kb=kilobytes).

Photos in your camera can be 3 Mb – 15 Mb or larger (Mb = Megabytes). These are too large for the Internet.

Pictures that are much smaller (10 kb – 30 Kb) are going to be ugly on a computer screen unless they are very small, PNG files. (The JPG of the cactus flower above is 81 kb and 900 px wide; the animated GIF of the UN Flag is 5 kb and 250 px wide – you can probably see it’s a bit blocky ; our logo PNG is 9 kb and 150 px wide. Click on each to see them “actual size”.)

If your photo editing software measures in pixels (px), aim for JPG pictures that are between 600 px and 900 px wide at a definition of 72 px. No smaller than 320 px wide. No larger than 1024 px wide. If your photo editing software presents you with different options, choose an option that is described as “good for the Internet” or “good for sharing on-line” or similar.

Why 320 px /1024 px? Because no smartphone screen is narrower than 320 px, smaller pictures will be more difficult to see. Because the 1024 px width is a widely used standard for computer screens of all sorts, it isn’t necessary to have images that are larger. (This last may change in the future, with 4D and ‘retina’ screens, but for now it’s a good rule of thumb.)

Adding images to the Media Library

How to add images to the website’s media library before you use them in blog posts or forum posts.

Make sure you are logged in to the website.
In the black bar at the top of the browser page – above the Pens logo – find the +New button. Hover your cursor over it to see the options Post and Media. Click on Media.
The Upload New Media page opens. You can drag-and-drop the picture you want to use to the dotted grey box. Or you can click on the Select Files button which lets you search your hard disc for the picture. Click on the file and then click Open. (Note: You can upload several pictures at the same time, but these instructions deal with one picture at a time.)
The picture will upload. How quickly will depend on how large they are and on how fast your internet connection is. (See above How big?)
Once the picture has uploaded, it will appear in a separate strip below the Upload box. To the left, a thumbnail of your picture and the name of the file; to the right a button that says “Copy URL to clipboard” and an Edit button.
If you are uploading in advance, you don’t need to do anything else. A copy of the picture is now in the media library.

To see one of these images more clearly, click on it to open it in a full-size window

Upload in advance — To see one of these images more clearly, click on it to open it in a full-size window

Adding images to a Forum post

How to add an image to a Forum post (Topics and Replies).

Follow the first five steps above. (Adding images to the Media Library).
When you get to step 5, click on Copy URL to clipboard
Go to the forum and topic where you want to add the image.
Start writing your post. When you get to where you want to put your picture, click on the image icon in the toolbar above the input field and below the Subject line. This will open the Insert/edit image box.
In the Source field, paste the URL from your clipboard.
Click OK
Congratulations! You have added your image to your forum post.
To edit e.g. the size of the image, click on the pencil icon to return to the Insert/edit image box. Now the size of the picture should be defined in pixels. Change the pixels number to change the sized of the displayed image. (If the picture isn’t defined, try writing e.g. 400 in the first box, click OK and see what the picture looks like.)

Notes

It is also possible to add an image from elsewhere on the Internet if you have the exact URL to the image you want. Instead of putting the image into our Media Library, simply paste the exact URL into the input field. It’s better not to do this, for a number of reasons, and we don’t recommend it, but it is possible.
You can use the same procedure to add other media to the Media Library. For example, you might add a PDF. Treat this file in the same way you treat an image file.

Adding images to a Blog post

How to add images to blog posts (Bi-weekly Wisdom, Pensives, Author posts).

Start to write your blog post.
When you want to insert an image, click on the + symbol under the paragraph you just typed. A series of options will come up. Usually the image icon is available, click on it. If it isn’t available, use the input field to start typing “image”, the icon will appear. Click on it.
The Image block appears with three alternatives to choose from. Upload, Media Library, Insert from URL. Upload is marked in blue.
IF you have followed all the steps in Adding images to the Media Library above …
CLICK ON Media Library. The Media Library opens and you can choose the picture you want to use here visually.
IF you have not already added your image to the Media Library, you can do that now.
Click on the blue Upload button. A link to your computer’s hard disc appears and you can navigate to the appropriate file and select the picture you want to use. Click Open and it will upload.
Now you can make a number of changes to your picture. Make sure the picture is selected and the Block tab showing in the right-hand white sidebar. You can change the size of the picture on the page. You can add an ALT text (to help the partially sighted, for example). And you can position the image within the column of text. For example, a medium sized image set to float left will appear to the left of the next paragraph of text.

There are more elaborate ways of using images in your blog post. For example, you can have the images in a gallery (like the illustrations on this page). But probably this is enough for now.