In this article
- Video Tutorial
- Adding an image to a row
- Changing the style of the image
- Adding a link to the image
- Moving the widget to another location on the page
- Image Resource Library
This article explains how you can add an image to your website and add a link to the image. By doing this, it allows a patient to be diverted to another web page or website when they click on the image/banner.
This is useful if you have an online consultation service that you'd like to highlight. For instance webgp/eConsult, NHS App, accurx, patient access or in general anything that you'd like to highlight via an image.
If you have signed up for online consultations. Your provider should have provided you with 2 pieces of information:
- A banner/image (Banners are below if your provider hasn't provided them)
- A link (for the service for patients to use)
Video Tutorial
Adding an image to a row
To add an image to a row click the 'Add widget' + icon to the left of the row.
The editor menu will open on the left of the screen. Select 'Image'.
The new image widget will now be in the row. Hover over the widget and click 'Edit'.
Choose 'Select image' to add the image to the widget.
You will then see there are three ways to add an image:
Upload - This allows you to upload a new picture that is saved on your device. Please ensure you have permission to upload the image to avoid any copyright issues.
Select 'Choose Image...' to open a file explorer window where you can choose the image to upload from your device.
Once the image has been uploaded it will be shown on the tab with a new bar that says 'Use Recommended Size' and once clicked on it will change to 'Use custom size'. On a banner, we recommend changing to 'Use Custom Size' so you can fit the full banner. You can then drag the edges to resize how much of the image is used. Use Recommended sizing uses a restricted size box and is often unable to fit the entire image.
Then add a description of the image within the alternative tags section so it will be accessible to patients who are using screen readers. E.g. Accurx banner with text 'NHS Contact us online. Submit a new request'. Picture of a mobile on the accurx website to the right of the text.
Lastly you will need to choose 'Save' for this image to be added to the image widget.
My Library - These are you existing photos that are already in use on the website.
If you are using an image that is already located on your website you can choose it from the 'My Library' section. The alternative tag will already be present from when the image was previously used. Click 'Save' once you have selected the image you'd like to use and it will be added to the image widget.
Online Library - This is our library of copyright free images.
If you do not have an image to use you can find a copyright free image via the Online Library. You will need to type in a search term in the search box and once you click 'search' it will show images matching your search term.
Once you have selected the image you then need to add a description of the image within the alternative tags section so it will be accessible to patients who are using screen readers. E.g. Red and white tulips with a clear blue sky in the background.
Lastly you will need to choose 'Save' for this image to be added to the image widget.
Changing the style of the image
Once your image has been added to the image widget you will need to adjust the Style to correct fit the image to the page. If you select the Style drop down menu you will see 6 options. Each option will effect how much of the image is visible.
Default
The default setting will fit the image into the space that is available or the standard spacing meant for the image widget. The image for this option will stretch and squash to fit the space.
For example:
"true"
Image on Top
This style will move the image to the top of the bar so text can be entered beneath it.
For example:
Image on the left, and image on the right
These styles will move the image to the left or right of the box so that the other half can be used for text
For example:
Circular image
This crops the image into a circle and the text will appear centralised below the image.
For example:
Full image
Full image will show the full native sizing of the image within the confines of the website. No text can be displayed once full image is selected. This is the standard setting when applying a banner to a website.
For example:
Adding a link to the image
To add a link to an image widget click the 'Add a link to this widget' button below the newly added image.
This will open up a menu with 4 options for adding a link. These are:
Pages
You can link an existing page on the website to the banner. E.g. if you have an NHS App page on the website you can link this to the NHS App banner.
Select the page you would like the image to link to and then click 'Save'.
Url
Link a specific URL for patients to be directed to.
Enter the URL in the 'Link Url' box and click 'Save'.
Files
Add a file for patients to download e.g. PDF or word document
Choose 'Upload' to open a file explorer window to choose the file that you would like to link from the image. Once it has finished uploading click 'Save'.
Online Providers
This is a list of pre-generated URLs. If the website practice code does not align with the code used Accurx this option will not work.
The current options are: EMIS - Patient Access, SystmOnline and Accurx.
Once you have selected the third party service choose 'Save'.
Once you have chosen the linking method the add a link button will be replaced with the link you have added and the 'Remove link' button.
Once you have added the image and the link to the image widget tick the 'Make this widget visible box?', then click 'Save' and the new image will now be showing publicly on the website.
Moving the widget to another location on the page
The image widgets can be moved on the page that it has been added to.
Click the 'Reorganise widgets' button at the top of the page to open up the widget moving menu
To move the image widget within it's row
Click the widget you would like to move from the list and then hover over the widget you would like to swap it with and click 'Swap'
To move the image widget to a new row
Click the 3 lines to the left of the row you would like to move and then drag it to the location you would like the row to go
Once you have moved the widget to the correct location choose 'Save Changes'
Image Resource Library
If your provider hasn't sent you the banner/image, please see below:
To use one of the banners - Right-click on an image using your mouse, and select "Save Image as", to save the image to your computer. You can then follow the steps in the video above to upload it to your website.
NHS App
Accurx
eConsult
SystmOnline
Patches
Egton Online Consult
Engage Consult