How Can We Help?

How to display my ‘Latest Image’ on a Website

Created On
Last Updated On
byMichael Poelzl
You are here:
< All Topics

Website

You probably already have a website but if not, you will need to go to a hosting provider and purchase a domain name and hosting plan to run your website. Once done you need to either build your own site or use one of the many website frameworks available.

Ftp Transfer

The first step in the process is to get your AllSkEye image to your website. You can use the ‘Latest Image’ function to achieve this (please see the user manual for details). Your website will have a control panel where you can create ftp accounts to allow you to login and transfer files via ftp. Usually it’s easiest and safest to make a separate ftp account just for the all sky image transfer where you set the root folder for this account to the folder the all sky image should be transferred to. This means that when you login with that account you will only have access to that one folder. This is good for two reasons, firstly if someone uses your password maliciously he/she will only be able to access that folder and secondly you will not need to set any ftp folders in the ftp settings as the image will go straight into the correct folder. Once you have the ftp login details, you can set them in the ftp transfer settings in the ‘Latest Image’ settings of AllSkEye and test the image transfer.

Usually it is easiest to initially use a standard FTP client (like the free FileZilla) to connect to and test ftp transfers from your computer to your website. This will save you a lot of time in troubleshooting should something not be correct in your settings as you will know straight away and it will tell you what the issue is.

Displaying the Image

Now to the harder part. Displaying an image on a website is easy but to refresh it a regular intervals is not so straightforward. There are probably many ways to achieve this but I use a small script to do it. So firstly you need some html code to display your image where you need to replace the {your url} part with the url that points to your all-sky image (and you must change the name of the image to the name you have chose in the AllSkEye app):

<img id=”image0″ src=”https://{your url}/AllSkEye_Latest.jpg“alt=”Please Wait…” name=”image0″ />

If you are building your own website then you will be fine with making these changes in any case. If you are using some kind of website builder or framework then you will usually be able to add a html page or block which allows you to add your own html code to a page of your website.

No we need a little java script which will refresh the image at regular intervals. Again you will need to add this code to the page you want to display the image on:

<script language=”JavaScript” type=”text/javascript”>
  interval = 30000;
  imageUrl = “https://{your url}/AllSkEye_Latest.jpg“;

  function Refresh() {
    var im = document.getElementById(‘image0’);

  LoadAndSetNewImageIfFound(im, imageUrl);

    setTimeout(“Refresh()”, interval);
  }

function LoadAndSetNewImageIfFound(image, url){
var newImg = new Image;
newImg.onload = function() {
image.src = this.src + “?” + new Date().getTime();
}
newImg.src = url;
}
 Refresh();
</script>

Again in this script you need to replace the {your url} part and image name with the url and name of your all sky image on your website. The refresh interval which is set in milli seconds can also be changed from the value of 30000 (which equates to 30s) to whatever you need.

Complete Html Page

Here is a sample of what a (very simple) complete html page could look like:

<html>
<head>
<title>AllSkEye</title>
</head>
<body bgcolor=”#0080FF” text=”#FFFFFF”>
<center>
<br />
<br />
<h2>AllSkEye Latest Image</h2>
<br />
<table>
<tr>
<td align=”center”>
<img id=”image0″ src=”https://{your url}/AllSkEye_Latest.jpg”alt=”Please Wait…” name=”image0″ />
</td>
</tr>
<tr>
<td>
<br />Latest Image
<br /></td>
</tr>
</table>

<script language=”JavaScript” type=”text/javascript”>
  interval = 30000;
  imageUrl = “https://{your url}/AllSkEye_Latest.jpg“;

  function Refresh() {
    var im = document.getElementById(‘image0’);

  LoadAndSetNewImageIfFound(im, imageUrl);

    setTimeout(“Refresh()”, interval);
  }

function LoadAndSetNewImageIfFound(image, url){
var newImg = new Image;
newImg.onload = function() {
image.src = this.src + “?” + new Date().getTime();
}
newImg.src = url;
}
 Refresh();

</script>

</center>
</body>
</html>

WordPress

To make this work with WordPress I needed to use a plugin that allows the java script to run. For this I have used the ‘Code Embed’ plugin, once you install this you can create a custom field on your page with the code snippet inside. Please read the plugin documentation which gives more info on how to do this.

In short you need to go to the custom fields section when you edit the page (if you can’t see this section then you have to make it visible in the ‘Screen Options’ drop down) and enter:

  • A new field name starting with ‘CODE’ e.g. I have chosen CODERefreshASImage
  • And the script as the value.

Once you have done this you need to add the custom field short code to the page text in double curly brackets (at the bottom):

Table of Contents