Image types

Images are used in different ways on the site, below are the most common and important types:

Main images

Almost all pages on Visitnorway should have a main image, which needs to be prepared in three different versions, for different uses:

Main header image

This is the image that displays at the top of the page, on desktop and tab views of the site. The H1 title of the header slide will be superimposed on top of this image in these views.

  • Place: Header slide
  • Size: At least 2000 pixels wide, if possible – the larger the better.
  • Category: Original
  • CMS-tag: landscape (format) or portrait (format) or square (format), depending on the image.
  • Internal Notes: Insert the locale tag here, for the page the image is used on. This will make it easier to search for and find the image. Locale tag must be in the following format in internal notes, including quotation marks and parentheses: «(Locale tag: /plan-your-trip/getting-here/)»

The CMS gives possibility for using 360 images as main header image, where it is suitable to do so. Please contact Art Director Chris Arnesen with regards to 360 images.

Mobile header image

This is the image that displays at the top of the page, on the mobile view of the site. The H1 title of the header slide will be superimposed on top of this image in these view.

  • Place: Header slide
  • Size: 640×1060 (WxH)
  • Category: Mobile-image
  • CMS-tag: mobile (format)
  • Internal Notes: Insert the locale tag here as well, for the page the image is used on. This will make it easier to search for and find the image. Locale tag must be in the following format in internal notes, including quotation marks and parentheses: «(Locale tag: /plan-your-trip/getting-here/)»

Preview image

This is the image that will display in internal previews that link to the page where this is used. This image will also be used for the «recently viewed pages» section, but will then be automatically cropped to a square format.

  • Place: Meta page
  • Size: 2000×1000 (WxH) if possible. If not, as large as possible with a 2:1 w:h ratio.
  • Category: Nav-item
  • CMS-tag: landscape (2:1).
  • Internal Notes: Insert the locale tag here, for the page the image is used on. This will make it easier to search for and find the image. Locale tag must be in the following format in internal notes, including quotation marks and parentheses: «(Locale tag: /plan-your-trip/getting-here/)»

Slideshows

Slideshows (that are not header slideshows) should always reside in a one column panel set to full width. Furthermore, they should always have a minimum of four images, and a maximum of 8 images.

The images used in a slideshow can in theory be any size, but normally the original full-size image should be used. The CMS will resize it when required.

Images as illustrations

Images can be inserted into pages for illustration purposes, either as a collection template widget inside a panel, or as a picture in a text box widget. Image boxes for use in a collection template are created the same way as other image boxes.

Images in image boxes

If you are using an image as illustration in a one column panel, remember to set the panel to collapse, as shown below:

(NB! This only applies when used in a one column panel)

1colimgbox-2

1colimgbox-1

Images in text boxes

imageinsert

To insert an image in a text box widget you need a two column panel. Resize the picture in Photoshop first (width 1160 px.). In the textbox widget, click the image button: imagebutton. Then, navigate to the image you want and fill in the other fields before clicking OK and inserting the image. If you leave it at that, the image will stretch instead of resize correctly on smaller screens, so you need to go back and edit the HTML code in the text box widget, after the image is inserted. To do that, replace this code (or equivalent):

style="width: 512px; height: 318px;"

with this code:

bad scalingstyle="width: 100% !important;"
and click save. Note that the code will change automatically once you save, but don’t worry – it will still work as it’s supposed to.

The image should not look any different on the desktop (or maybe even the tab) version of the site, but if you do not complete this step, this is how the image will look on smaller screens, such as smartphones and the like:

Infographics

There are various possibilities for implementing and using infographics in the CMS. Today, the site does not include many infographics due to the fact that it is very time consuming creating the infographics files. Please contact Art Director Chris Arnesen for more information regarding infographics.