EverWeb Codebox

Inserting Images Using the <img> Tag

A basic img tag looks like this...


<img src="file path to the image" width="640" height="480" alt="alt text for SEO goes here" />


Drag the image into the Assets column of EverWeb, control click it to "Copy Relative File Path" and paste this into the above code where marked in red.

Enter the image width, height and some alt text for SEO.


This code can also be used for inserting Animated GIFs.


There are quite a few advantages to using the <img> tag in an HTML Snippet rather than just dragging the image onto the page and letting EasyWeb do the heavy lifting.


Create frames, borders and radiused borders without adding more images.

Add CSS box shadow - again no extra images

Add an image alt attribute for the search engines

Add a title attribute that appears in the tooltip and can be read by both humans and the SEO spiders


If you have a lot of images that need to be styled the same, you can create a class in the styles so that the HTML is minimal and would go like this...


<img src="{!-ASSETSPATH-!}Images/image-name.jpg" class="my-image-class" alt="alt text" title="title text" />


Your web pages will load a lot faster in the browsers and the spiders will love you!


The individual image dimensions can be set in the HTML...


<img class="rounded-frame" src="{!-ASSETSPATH-!}Images/image-name.jpg" alt="Alt Text" title="Tooltip Text Goes Here" style="width: 600px; height: 400px" />

These are the styles pasted into the page or site wide head code box...


<style type="text/css">

.rounded-frame {

padding: 20px;

border: 2px solid#444;

background: #FFFFFF;

border-radius: 10px;

-webkit-border-radius: 10px;

}

</style>


Note that the border radius attribute is expressed with various vendor prefixes for different web browsers. Obviously, any changes need to be applied to all three!

Sundog

After applying the code to the Snippet, remember to adjust the snippet size accurately using the Metrics inspector. The above image is 600px wide by 400px high. It has 20px of padding all around and a 2px thick border. So the snippet size is...


Width: 600 + (2 x 20) + (2 x 2) = 644px


Height: 400 + (2 x 20) + (2x2) = 444px

If you want to take the easy way out, click the Easy Button to find out about several widgets that will do it for you.

easy