Insert images and video in Sitevision

Publish Images and Videos in Sitevision

Inside Sitevision, click the module button and select Image and Media to insert images and videos from the Mediaflow module. Once you have inserted a file, the module will be accessible in the list under Recently Added Modules.

The folders in Mediaflow that you have chosen to share with Sitevision are now displayed in a clear folder structure. You can easily find the files by searching or browsing through the folders. Metadata such as photographer, photo date, colour marking, and other important information is shown in the right-hand panel. You can also see where an image or video has been previously used, both in Sitevision and Mediaflow, and the number of uses is displayed as a number on the thumbnail. This makes it easy to unpublish content if needed, for example, due to licensing rights or if consent is withdrawn.

Metadata Fields in the Sitevision Integration

You can enter information into the following fields in Mediaflow to facilitate your workflows in Sitevision:

• Description
• Alt text
• Colour marking
• Photographer
• Instructions

Insert Images

When you insert an image, you can add alt text. If an alt text is already stored in Mediaflow, you can use, modify, or replace it. You can change the file name and decide how it should be inserted: in its original size, freely cropped, or using a preset format. The most common and convenient method is to set up preset formats in Mediaflow, so-called download presets, to get the correct pixel count, compression, and colour profile, which you can then crop directly on the website. This saves valuable time for your editors, who won't need other programs to get the correct image settings. When the image is published, information about where it has been used is saved both in the integration and in Mediaflow.

Good to Know!

For maximum performance and stability, mounted images are physically copied to your Sitevision server. This means that your website is not dependent on Mediaflow to function. The integration does not affect the performance of the website.

Insert Video

When inserting a video, you can select your preferred embedding method. We recommend using JavaScript for optimal accessibility and functionality. You also have the option to determine whether the video player should start automatically and how. If you have the video player theme add-on in Mediaflow you can choose from the themes you have created.

Accessibility Adaptation of Videos

To assist you, Sitevision performs an accessibility check when you publish your videos, providing tips on how to improve accessibility. Don't miss Mediaflow's Video Manager add-on, where you can both make your video communication accessible and customise it to align with your brand.

Turn an image into a navigational link

Sometimes you may want an image on a webpage to be clickable and link to another page on the website or elsewhere on the internet. To enable this functionality in the Mediaflow image module, you first need to adjust a setting.

1. Click on the top menu navigation and select Add-ons.

    

   

2. Find Mediaflow in the list and click on the name.

3. Locate the version of the Mediaflow module that is active and click on Mediaflow.

4. Click on Global settings.

5. Scroll down to Image settings.

6. Tick the box Use navigational link (if it’s not already checked).

7. Click OK and return to editing your website content.

With the linking option enabled, a new field will now appear when inserting an image into a Mediaflow module.

Adding a link (URL) to an image

1. Select to insert an image.

2. Before clicking Use this image, enter a link in the Link (URL) field.

3. Choose whether you want the link to open in a new browser tab.

4. Click Use this image, followed by OK.

5. Once the content is published, the link will now be clickable.

Removing a link (URL) from an image

1. Double-click the image.
2. Click Use this image.
3. Delete the link in the Link (URL) field.
4. Click Use this image.
5. Click OK.

Set an image from Mediaflow as the Open Graph image

An Open Graph image (sometimes called an OG image) is the image that appears when a link is shared on social media. It makes the shared post look better, encourages more clicks, and allows you to control how the page is presented.

To set an image from Mediaflow on a page, you’ll first need to do some preparatory configuration by creating the field that will hold the image. After that, you can proceed by selecting images to be displayed when pages from your website are shared on social media.

Creating the field for Open Graph

1. Click on the “house” icon and select Properties.

2. Select Metadata.

3. Click Add metadata field…

4. Give the field a name, e.g. Open Graph, Open Graph-bild, or Image for Social Media.
5. Select Link under Metadatatype.

6. Click the Advanced tab.

7. Enter og:image in the Identifier field.

8. Tick Show the field in the page’s source code.

9. Select Use property to define metadata specific for social media and other platforms supporting the Open Graph protocol.

10. Select Do not inherit value automatically.

11. Click OK, and then click OK again

Selecting an image from Mediaflow as the Open Graph image

1. Right-click on the page in the tree where you want to add an image as the Open Graph image and select Properties.

2. Select Metadata and then click the link icon for your Open Graph field.

3. Select Link type: Image.

4. Select Page images.

5. Select the image you want to use as the social media sharing image.

6. Click OK, and then click OK again

Using an image from Mediaflow as the displayed image in listings

As an editor, you may sometimes want to display a number of pages or news items in a list, a matrix, or a similar format, where an image from each individual page is shown as an illustration of the content being listed. Follow these steps to make it possible to display images that have been inserted on the website through Mediaflow’s image module.

Set up the structure using Sitevision’s template system

Typically, these steps don’t need to be repeated time and time again. The person building the website structure can and should use the template system to put this in place. With Mediaflow’s image module inserted into the template, the identifier will automatically be added to Mediaflow’s image module, and the images will automatically appear in the listings you have set up.

In this example, we’re creating a news archive where the landing page displays a matrix of news and shows the images in Mediaflow’s module that are marked with an identifier in the content.

1. Click Create new.
2. Depending on how your Sitevision is structured, you may have different names for your building blocks. In our example, we have a page type called Landing page, so we will use that. Select Landing page from the dropdown menu and click OK.
3. To create the news archive, click Create new again.
4. Then click the downward arrow next to Create new page and select Archive.

5. Select a suitable name for the archive. We’ve chosen to simply call it News archive.
6. Right-click on the archive you’ve created and select Properties.

7. Click on Metadata and then Add metadata field….
8. Enter a descriptive name, such as Mediaflow image, in the Name field (point 1 on the image).
9. Click on Metadata type: Text and select Module instead (item 2 on the image).

10. In the Value field, enter a name for the identifier that you will need to assign to the images you want to appear in the content listing. You can choose any name, but in this example, we’ll use ListImage.

11. Click on the Advanced tab and enter the name you’ve chosen in the field under Identifier.
12. Under Technical information and the Identifier field, enter the value SV.Image.
    This value ensures that Sitevision, as a system, can find the information in Mediaflow’s image module.
13. Click OK.
14. Finally, we need to remove the field that comes pre-shipped with an archive, which is called Article image.
15. Locate it among the metadata fields and click on the gear icon to the right.
16. Select Delete followed by Yes in the dialogue box that appears.

17. Click OK to finalise the settings.

To add a news list and decide what content the news archive should display,  follow these steps:

1. Select to add the News list module.

2. Right-click on the news archive module and select Settings.

3. Expand Selection.

4. Delete the listings you don’t want to appear in this particular list, and add the ones you want to display. In this case, it’s the listing under our landing page that appears in the list.
5. Click OK when you’re satisfied with the selection.

Finally, it’s time to ensure that Mediaflow's images are displayed in the listing.

The content will be visible after publishing and indexing

Unpublished content will not appear in listings, so don’t forget to publish it. Once you’ve published, for example, a news item, it needs to be indexed by Sitevision before it appears in listings. Sometimes this takes a few seconds, other times a bit longer, so if the news doesn’t appear right away, just wait a moment before refreshing the page with the listing switched on.

1. Choose between editing an existing news item or creating a new one. In this example, we choose to create a new one.
2. Insert an image from Mediaflow by clicking the Modules menu, and then Mediaflow.
3. Once you’ve selected and inserted an image, right-click on the image and click Properties.

4. Select Settings from the top menu navigation. In the field at the bottom, Technical information, enter the name of the identifier you’ve chosen. In our case, we had set the news archive to display images with the identifier ListImage.

5. Click OK to close the Settings dialogue. If the content is published, it should be indexed by Sitevision shortly, and the image you selected will appear in the news listing on the landing page.

Multiple images on the same page

Only the image with the correct identifier in the Technical information field will appear in the listing. If you have two images with the same identifier, it’s the one at the top of the content on the page that will be displayed in the listing.