EverWeb Codebox

Images

Scottish Sunset

Sunset Over A Scottish Beach.
This is an image tooltip using pure CSS.
The tooltip has been given a transparent black background, a border with radius and a box shadow.

Images are used a lot on websites so it makes sense to learn some basics about preparing and displaying them. The image above was inserted using the HTML <img> tag so that an alt text description could be added for SEO. This is described on the NEXT page along with instructions to add a title attribute for tooltip text on mouseover.

This photo of a sunset was taken from the West Coast of Scotland and has a more sophisticated tooltip which has been styled using CSS. Slide the cursor over it to see the effect.

See THIS PAGE for more info about image tooltips.

Go to THIS PAGE to see a couple of widgets to create mouseover captions and tooltips which can be hyperlinks if required. 

Image Formats

The premier format for website use is JPEG (.jpg). The exceptions being PNGs (.png) and the .ico format which is used for favicons.

PNGs should be used when transparency needs to be preserved or applied.

Image Size

The image width (in pixels) should be no wider than the web page. The exception being Retina images which are double the normal width.

If an image is only going to take up half the width of a 980px wide web page, there's no point inserting one with a width greater than 480px.

Image File Names

IMPORTANT! Make sure that image file names have no spaces and/or special characters in them. This is one of the biggest rookie mistakes. Like all media, the image file name forms part of a URL and screwing them up can cause problems with FTP and downloading in the browser.

Favicons

Favicons are usually uploaded in the .ico format and are named - favicon.ico

To create a favicon that will appear to the left of the URL in the browser address bar, make it 64px square and use the Icon Converter website to make the conversion to the .ico format.

Drag the favicon.ico into the Assets section of EverWeb and control click it  to "Copy Relative File Path". Paste this into the code below - marked in red.

<link rel="icon"  type="image/ico" href="{!-ASSETSPATH-!}External%20Files/favicon.ico">

Paste this code into the Head Code box in the Site Publishing Settins page above any other code.

Apple Touch Icon - Web Clip

A web clip is a icon with a link to a webpage which visitors can add to their home screen on touch devices such as the iPad/iPhone.

Adding this is simply a question of uploading a suitable icon with the filename "apple-touch-icon.png" to the root folder on the server.

When publishing to the EverWeb server, drag the icon into Assets and control click it to "Copy Relative File Path". Paste this into the code below - marked in red.

<link rel="apple-touch-icon" href="{!-ASSETSPATH-!}External%20Files/apple-touch-icon.png">

Paste this code into the site wide Head Code box on the Site Publishing Settings page.

Get more info about these icons and the recommended size from the Apple Developer website.

There's really no need to create the touch icons in all the different sizes - one at 152px square is quite sufficient.

If you are publishing to a server other than the EverWeb one, forget about the head code as well. Drag both the favicon.ico and the apple-touch-icon.png into the root folder and you're done. No code required.

If you have created an icon and you don't want iOS to add gloss to it, name it like this...

apple-touch-icon-precomposed.png

Favicon & Touch Icon The Easy Way