If you’re looking to display a file, e.g. a PDF through the website, then for the sake of keeping the website’s limited amount of storage under control, the files should be stored in the club’s Dropbox storage and linked to from there. This is covered in a separate FAQ, titled “How do I link to a file in Dropbox from our website?“.


Important notice

Over the years we have been accused of using photos / images that we do not have the rights to, on occasion having to pay significant sums to the rightful owners. It is the responsibility of the person uploading photos / images to the website to ensure that the club has the rights to use them.

Choosing and preparing your images

For the sake of the environment and performance of the website, we ask that you include no more than 3 images in your post. Additionally, they should be stored in the website’s Media Library. This helps to achieve optimal performance, as the files needed to present a page on the screen are all held locally.

You will need to identify one image to be the “featured image” for the post. This is the image that will appear on pages where a list of blog posts are displayed. You can include the same image within the post content, or add up to two other images.

Before uploading your images, we ask that you optimise them, such that they use up the smallest amount of storage, whilst retaining their quality. Reducing size cuts the carbon footprint of storing the image, and makes them faster to load, ensuring the loading speed of the website is optimal.

To optimise your images, run them through the approriate tool listed below:

If you have further images associated with the post, they must be stored in the club’s Dropbox space, and linked to from your post.

There are articles in the Members help area of the website, that explain how to access the Dropbox space, upload your files to it and link to them. For images, we require that you create them in a new folder, that is named following this convention, enabling them to be sorted in chronological order: YYYYMMDDxxxxxxxxxx

Where:

  • YYYY is the year, e.g. 2024.
  • MM is the month, i.e. 01 through 12. Remember the leading “0” for the first 9 months of the year.
  • DD is the day of the month, i.e. 01 through 31. Again remember the leading “0” for the first 9 days of the month.
  • xxxxxxxxxxx is a meaningful description of what the images relate to, e.g. PancakeRace, ClubDinner, etc. Ther should be no spaces.

The new folder must be created in the “Photo Files” folder, and within that the sub-folder that is in place for the relevant Rotary year, e.g: “2023-2024 photo files”.


Uploading and including your images

There are primarily two instances where you will be looking to associate a photo or image with a post, either:

  • As the featured image – The photo / image appears in the blog list of all posts.
  • As a photo / image embedded within a post.

Featured image

In the right hand navigator, you will find a section titled “Featured image”.

If you wish the photo / image you’re going to use to appear both in the log view and the post itself when users click on the post and open it in full, then check the box shown.

When you’re ready, click on the “Set featured image” box.

You will be taken into the Media Library view, showing all of the photos / images that have been uploaded to date.

If the photo / image you wish to use is already there, click on it. A tick should appear against it.

If you need to upload the photo / image you want to use, select the “Upload files” tab, then:

  1. Before you drop or select any files, please set the folder you want the photo / image to go in using the “Upload file to:” field. This will help us to manage the photos / images we keep on the website more effectively.
  2. Please select the folder that best reflects the content of the post, e.g. if the post is about the environment team’s work, then select “Environment”.
  3. When ready, either drop the photo / image file you want to use on the page, or click on “Select files” and using the standard file manager on your system, locate and select the file you wish to use.

Finally, click on the “Set featured image” button at bottom right.



Embedded image

In the main block editor, to primary way to embed a photo / image in a post is as follows.

Add a block to the post – By default this will be a Paragraph.

Click on the “+” sign at the right-hand end of the block and you’ll be presented with a list of options for the type of block you want. Find the “Image” block and click on that.

A pop-up will offer you 3 options:

  1. Upload – To upload brand new images, not currently in our media library.
  2. Media Library – To view what images we already have and select one of those. Alternatively, if you cannot find one there, you can switch to the “Upload files” tab, as described in the “Featured image” section above. This is probably the best option to choose anyway, as it gives you most flexibility.
  3. Insert from URL – This will allow you to use images from other websites, by providing a direct link to the image you want. Please note: Just because an image is on somebody else’s website, that does not necessarily mean we have the right to use it.

Whichever method you follow, you will when ready select the image you want, or enter the URL and once you click on the relevant button to confirm that selection, the image will appear in your post, within the block you have created.

When the image is inserted, you may wish to do some formatting on it. By default, it will likely be left aligned, have no border, etc.

If you select the image block that you have created, somewhere, typically at the top, you’ll see a set of formatting icons, similar to that shown on the right. These can be used to align the image, crop it, associate a link to the image, etc.

In addition, in the right-hand navigator, you’ll also see some more formatting options, e.g. to include a border around your image, make the corners rounded, etc.

Experiment with these formatting options until you have the image positioned and looking the way you want it to.



Ensuring your image is assigned to a folder

By deafult, images uploaded to the website are put in what is referred to as the “Root Folder”. This is fine when we have just a few images, but as time is progressing, we have hundreds and therefore need to organise them to make our management of them easier.

Although instructions have been provided for assigning a folder when images are uploaded, it doesn’t appear to work consistently, so this section explains how to check which folder an image has been assigned to, and how to correct it, if it is in the Root Folder.

Having logged in, click on “Winchester Rotary” in the black banner, top-left to bring up the dashboard view, where you’ll see a navigator like this on the left-hand side.

Click on “Media” to bring up the gallery of all images uploaded to the website.


In the gallery or “Library” view, you’ll see what are called the image “thumbnails”. Small square versions of the images that have been uploaded on the right-hand side.

On the left-hand side, you’ll see the folder structure that has been put in place, with the number of images in each shown in parentheses. As you’ll see in the example shown, there are two images in the Root Folder, instead of being assigned to an appropriate folder.

Identify your image from the gallery and select it, which will bring up a pop-up window showing your image on the left and the details of the image on the right.

As you’ll see in the instance shown here, the “Media Folders” field is set to “Root Folder”, which we don’t want.

Click on “Edit more details”, one of the options listed at the bottom.

You’ll now see the Edit Media view for your image, which in this case just happens to be a screenshot of the media gallery, as used in the creation of this page.

In the right-hand navigator, you’ll find the “Media Folders” widget, where you can specify the folder your image should be assigned to, following which, you click on the “Update” button and your change is made.

Scroll to Top