Images and the media library

The media library

The Media screen gathers all your site’s files: images, videos, sounds and documents. The All, Images, Videos, Audio and Documents filters help you find your way.

Importing files

1. Open Media.
2. Click Import, or drag and drop your files into the window.

Files are copied into your site’s folder: they remain available offline and go with it when you publish.

A rejected file is named, with the reason: a video larger than 100 MB, for example, needs compressing before import.

An imported document (PDF, Word, Excel…) is published at a readable address taken from its name, for example /media/annual-report.pdf: easier to share.

Placing an image in a page

Add an Image or Gallery block (type /), then click the image area. The picker offers:

• Library: your media, with an Import button to add one without leaving the page;
• Stock photos: royalty-free photos you can use for free (see below);
• Icons: an icon library, with a search that understands words in your language, with or without accents;
• depending on where you are, External URL: an image hosted elsewhere.

Stock photos

The Stock photos tab offers royalty-free photos, provided by Pexels, that you can use for free on your site. Describe what you are looking for, in the site’s language: one click on a photo adds it to your media and places it. In a gallery, you can pick several at once. The photographer’s name appears on hover.

Stock photos need an internet connection and a paid edition of TOWeb. Once added, the photos are part of your site, like the ones you import.

Finding an image

In the Library, the search finds an image by its name or its alt text, ignoring capitals and accents. Images can be sorted from newest to oldest or by name, and the Unused filter shows the ones that are not placed anywhere on the site. The search field is ready as soon as the window opens, and ⌘F (Ctrl+F on Windows) brings you back to it. In a gallery, images you have already chosen stay chosen when the search changes.

Videos and slideshows

For a video, add a Media block (type /): the video is shown with its controls, and the same block accepts a YouTube or Vimeo video. A video can also be used as a section background: muted and looping, behind the text (see Sections). On a translated site, the Media block can show a different YouTube or Vimeo video for each language: turn on A different video for each language and paste the address for each language.

When you choose a video from the media library, in a Media block or as a section background, its Poster image is taken from the video itself: it is what visitors see until the video starts. To pick the exact moment, click Pick from the video, drag the slider to the frame you want, then click Use this frame. A poster you chose yourself is never replaced.

On a site that shows a cookie banner, a YouTube, Vimeo or Dailymotion video waits for the visitor’s consent, as the law requires: in its place, a message names the service and offers Show the video. A video imported into the media library always plays directly, and the TOWeb Preview shows everything.

Choose an MP4, WebM or MOV video. A video in a format browsers cannot play (AVI, WMV…) is flagged on import: convert it to MP4 (H.264), for example with the free HandBrake software, or publish it on YouTube or Vimeo.

The Media block also plays audio (MP3, M4A or AAC, a podcast for example) with a player.

For a slideshow, add a Gallery block, choose the Carousel layout, and turn on Autoplay if the images should scroll by themselves. Each carousel image can carry a Link: a page of the site, an address or a file.

Then choose the pace in Change image every: 3, 5 or 8 seconds (5 by default).

One version per language

On a translated site, a media item can have a version for each language: the PDF brochure in English, an image whose text is in German… Select the media item in the Media screen, then, under Versions by language, click Add next to the language and choose the file, of the same type as the original.

The pages in that language then show its version wherever the media item is used: images, galleries, files to download, share image. The other languages keep the original file. Republish the site to put the versions online.

Describing your images

Give each image some Alt text: a short description, read by screen readers and search engines. The optimiser on the Publish screen flags images that lack one.

TOWeb does not use the file name as alternative text: an imported image has none until you describe it.

Tidying up

Select a file to see its properties: type, dimensions, size and the pages that use it. A media file not used on any page is flagged: you can delete it safely. To delete several, select them and click Delete.

Keeping a site light

An image over 500 KB is flagged by the optimiser when you publish. Light images load faster, and count less towards the 50 MB limit of the Standard edition.

When publishing, TOWeb prepares each image for the web: it converts it to WebP format, in several sizes, up to 2,880 pixels wide for high-definition (Retina) screens. Each visitor receives the size that suits their screen: a phone does not download the image intended for a large screen. There is nothing for you to set, and your original files remain untouched in the media library.