Images

You can upload image files to your site for use as backgrounds, in galleries or embedded within text on your site. Click Images in your Admin Toolbar to do so.

Image Copyright

You can't just download an image from the internet and then upload it to your site. If you do you will eventually receive substantial invoices from companies acting for people whose copyright you have infringed. Any images you use on your site must have been created by you, or you must have permission from the copyright holder to use them.

You can purchase stock images from various websites, but these can be expensive and you have to ensure you comply with the license terms.

We recommend the following two sites which have a large selection of free to use images. Pexels and Unsplash. You can often find other sources - on this website we've used artworks from the US National Gallery.

We also recommend you create a 'Credits' page which you can add to the footer menu of your site. You can use this to give credit to the photographers whose work you're using, and also to record where images came from in case you're ever challenged about them.

You can see our Credits page here.

Organising Your Images

Your images are stored in folders under the Images tab on your control bar. When your site is new it's well worth thinking about how you want the folder structure to work. It doesn't really matter from your visitor's point of view, but it will make your life easier in future.

You can have up to 4 levels of folder, so for instance you might have a folder called Shop, inside it a folder called Footwear and inside that a folder called Wellington-Boots. We don't allow spaces in folder (or file) names - if you try to add any they'll be replaced with hyphens.

Once you have one or more folders set up you can upload images to them. There's a simple form which allows you to browse and upload a single image at a time, or a more complex 'multi-upload' widget which allows you to upload large numbers at once*.

You can upload images in JPG or PNG format. You should try to give the images useful file names - change P00001034.jpg to View-of-the-Bay.jpg etc. You can either change the filename before you upload the file (on your device) or by using the Rename facility in your Admin system.

* Please only use your Spanglefish site to store the images you need for the website, not as a backup for your whole camera roll. We reserve the right to delete image folders where we feel they are being abused.

Image Tools

Once you've uploaded an image you can of course use it for various purposes throughout your website. But there are also a couple of tools you can use to manipulate the image.

In your Images tab, beside each image you'll see a spanner icon.

Rotate Image

If your image is a JPEG you can rotate or flip it. This does slightly degrade the quality of the image, so don't do this lots of times on a single image - get it right the first time.

Optical Character Recognition

You may upload an image of a poster for example to use in a news story. But just adding it as the story is a bad idea in terms of accessibility - screen readers won't be able to read the content for your users with vision problems.

You can use this tool to extract the text from the image so that you can paste it into your page or news story accessibly without having to type it all out. Do double-check the text though - the OCR system is good but not 100% perfect.

Techy Stuff

There is quite a lot of complicated stuff going on in the background in terms of your images. You don't necessarily need to know, but we'll outline some of it here in case.

Every image has its own unique URL. However, once you've uploaded an image to your site you'll find it's not actually coming from your domain. For example the URL of the Van Gogh image above has the address https://web-cdn.org/s/10/image/Artworks/Van-Gogh-Self-Portrait.jpg. This isn't unusual in web systems - it allows us to deliver your images (and files like PDFs) using a CDN (Content Delivery Network) which takes the load off our server and speeds up your site for users no matter where they are in the world.
Images are dynamically resized as required. Open this link and you'll see a much smaller version of Van Gogh. In the address bar, replace the number 321 as the maxWidth with another number and click refresh. You should get a version at the size you requested. The Spanglefish system tries to request images at a reasonable size for whatever you're using them to keep your site as fast as possible, but you can tweak that if you wish. If you are sure you only need a specific logo at a maximum of 100 pixels wide, then feel free to add ?maxWidth=100 to the end of it in your code.
You can do some other cool stuff by adding to the query string. See this example.
If you wish to reorganise your images at some point in the future you can rename images, delete images and move images to a different folder. However, renaming or moving an image changes its URL, so if you've used the image on your site or sent someone a link to it, that link won't work any more. The Spanglefish system will warn you about this before you make the change, and it will also try to tell you where you've used the image on your site, and will automatically update some (but not all) of those uses.
We say the old URL "won't work any more", but in fact, because we're using a CDN the old link probably will work for a day or so because a cached version of the image is being supplied by the CDN rather than the file being drawn directly from your website.