Widget: URL-dependent image

Function

By placing the Widget URL-dependent image in a layout, you can display a different image on the different pages that use this layout. This means fewer layouts have to be made if only an image changes. Tip: These image collections can also be used to make the background image of a theme dynamic.

Insert Widget

To make a widget visible on the website you must add it to a page or to a layout. In this document you can read how widgets are placed within the page or layout.

• Drag the new widget to the correct column or row within the page or layout.
• In the overview, select all available widgets for the URL-dependent image widget.

Settings URL-dependent image

After releasing the URL-depending widget, the settings screen opens.

Settings

• Collection*: select collection
• Default image*: select default image
• Image alignment: align Left / Center / Right
• Display image description in image: display image description in image Yes / No
• Add link: add link
• Open link in: open link in Same window / New windows
• Default padding bottom: Default whitespace between widgets
  
• Image effect: None / Rounded corners / Framed / img-cirle
• Visible: visible Yes / No

Create collection

A collection will first have to be created, this is done via the management center:

• Click on Management Centre in the main menu.
• Select the Site Management
• Click the Manage URL Independent Images item.

• Click the    icon to create a new collection.

• Give a name to the collection and save. 

How does it work?

After the URL-dependent image widget is placed in the layout of your webpage and the Collection has been created through the management center, you can enter the different images per layout. This makes it possible to use the same layout with a different image on a page. The following example shows a layout with a header THE ASSOCIATION:

When placing the URL-dependent image widget, you specify a Collection and also a Standard image. This is the image that you want to show on all pages in the standard layout.

• You may want to use a different image on another page. Preyou would have to make a new layout for this if the image were in the layout. Now you can add a new image to the collection and link it to another page that uses the same layout.
  • Click on Administration Center in the main menu.
  • Select the Web site management section 2.
  • Click the Manage URL Independent Images item.
  • Click on the icon behind the collection you want to use.viously,

• Click on the    icon to add a new image to the collection.

• Click the Search button to select the image.
• At URL, enter the path of the web page on which the image is to be displayed. We call this location a relative path. (The slash sign / + map or page)
• This is the address without the domain name: www.e-captain.nl/home (/ Home) or www.e-captain.nl/fotoboek (/ fotoboek) or www.e-captain.nl/mijn-captain/aanmelden (/ my-captain / sign up)

•  It is also possible to use a wildcard, with which you can provide all pages within a folder with a different image, for example www.e-captain.nl/my-captain/%. As a result, all pages that fall within the folder / my-captain are provided with a different image.
  • Click the Save button to apply the changes.
  • In the example below there are 5 images that are linked to the standard layout. Each page uses the same standard layout, but the image of the header is always different on these pages.

• The homepage has a standard header:

• Pages like  /my-captain/% get a  different image, as selected in the management Center.

• The widget pages have a different header in the layout: /widgets/%

the same goes for the activities lay-out /activiteitenlijst-%

Tip! If you use several different images on the same URL, they will be displayed randomly on the page.