Articles in this section

See more

A Guide to Including Full Screen Images in Tool Descriptions

Avatar
Joe Kresling
  • Updated
Follow

This is quite a specific use case, but might be just what you are looking for.

If you want to include an image of a plan or a proposed design into the introduction of any of your tools, you might find the space is limited. That means because the image is restricted in size, to fit into the tool description, it might be too small to really see without zooming in. Wouldn't it be great if participants could open the image in full screen? They can! Here is how:

  1. Navigate to your project
  2. Go into Information and upload the image in the best quality available into the document library.
  3. Once uploaded, make a right click on the file and press "Copy link address" (or similar. The exact wording depends on your browser).
  4. The link you have copied now should start with "https://s3-ap-southeast-2.amazonaws.com....". This is the server on which the documents are located.
  5. Go into the tool where you want the image to appear.
  6. In the tool description, upload a smaller version of the same image. Make sure that the overall size does not exceed 2MB!
  7. Once uploaded, left click on the image. A popup will appear that allows you to insert a link. By inserting a link here, you make the image 'clickable'. Paste the link you have copied in step three here.
  8. In the final step, adjust the text in the introduction to read something along the lines of "To view the image in full screen, please click on the image"
  9. Go on and preview your work. You should now be able to click on the image for it to appear in its own tab and close to full screen (the actual size depends on the image you have uploaded in step two)

OPTIONAL: At this point, the image will open in the same tab. If you want to, you can control this and make the image appear in a new tab. To do this, you will need to make a slight adjustment to the HTML. It is important to do this AFTER you have completed the above steps and here is how:

  1. Open the HTML view
  2. Find the link in the code. Hint: Click control+f to in your browser to find the tag which begins with <a href  This is where the link is located. 
  3. Insert target="_blank" just before ><img
  4. Click 'Update' and you are done. Now the image should open in a new tab.

Can't quite make it work? Get in touch with us!