JOIN OUR MAILING LIST |
We are now going to:
Part A.) Upload an image to the website without it being displayed anywhere
Part B.) We are going to create a thumbnail of this image
Part C.) We are going to insert a Hyperlink which causes the image we have uploaded to pop up full screen
When this exercise is done you should be able to insert a popup like the one below:
(Click on it and a popup window with large image will display)
Part A Upload an image to your website without it being displayed anywhere
Step 1 - Refer to image below:
Select the division Website Content
Step 2 - Refer to image below
Select Upload Images (It is currently second last from the bottom in the Website Content Section)
Step 3
Click on choose file to select the image from your PC
Step 4
Search for the image which you want to upload (the image you would like to be the target / to pop up when someone clicks on the thumbnail we will create in Part B of this exercise.
Step 5
Click on submit. (The blue button)
Step 6
If done correctly you will receive a message which reads "the file which you have chosen have been uploaded correctly".
Step 7
You now need to publish all changes (Red button top left). Then click on delete / vie image url. You will now view the URL (Unirform Resource Locator) of this image.
We have now completed the first part of the exercise
Part B.) Create a Thumbnail of this image
Step 1
Click on the icon which says insert image when hovering over it. See image below.
Step 2
Click on browse server
Step 3
A new popup window will appear. Select the image you want to use to create a thumbnail.
Step 4
You can now resise the image (say 100px ) to be small / a thumbnail and even decide if you want this image / thumbnail to have a border.
Step 5
Click on Ok
Step 6
If previous steps were done correctly you would be able to view the image in the content editor where you wanted it to be. (Where your cursor was when you started this section)
Part C.) Insert a Hyperlink to create a popup of this Image which opens full screen
Step 1
Go back to website content / upload images as per step 1 and 2 of part A. Select view url and then copy the url of the image you uploaded as per part A.
Step 2
Go back to the page where you have inserted the thumbnail as per part B and click on the image. You will see the image highlighted.
Step 3
Click on the Icon Link (the little chain which says link when you hover over it with your cursor)
Step 4
Paste the Url which you copied in step 1 by clicking (Control + V) .
Step 4
a.) Click on the popup which appears on target
b.) Select popup
Step 5
Click ok
Step 6
You will now have a new popup where you could play around with more more variables for the popup window. (Try different options with the variables to see how it works)
Step 7
You should be taken back to the highligted thumbnail. Click on update page.
Step 8
Dont for get to publish all changes!
You should be able to view the thumbnail , which is linked to the popup image when you refresh your website.