Home > Workshop > Using Images

The Image Challenge - Using Images

Since most modern web pages are designed to be 'responsive' it would be a good idea to what this term means to you as a page editor and how to apply it to one of the web page elements you will frequently add... an image.

Basics of Responsive Web Design
Web Browser Responsive Design Mode
Making Page Elements Responsive
Images
Inserting an Image
Image Classes
Examples
The Class CSS Code

Basics of Responsive Web Design

The look of any website is defined by the HTML and CSS (Cascading Style Sheets) used to build it. Responsive web design, is a modern design approach utilising both HTML and CSS, that allows websites and pages to render, that is display, on all devices and screen sizes by automatically adapting them to the screen resolution, whether it's a desktop, laptop, tablet, or smartphone.

Cascading style sheets or CSS are used to format the layout of Web pages. They can be used to define colours, text and heading styles, table sizes, content placement, image/media sizes and placement along with many other aspects of the page.

A CSS 'class' is an attribute/label used to define a group of HTML elements in order to apply unique formatting to those elements in CSS.

Web Browser Responsive Design Mode

To check how you page looks on multiple devices, you can use responsive design mode in your web browser. To access this mode in FireFox use the following steps...
Open the 'Application Menu' (extreme RHS)
Select 'More Tools' near the bottom
Select 'Responsive Design Mode'

Making Page Elements Responsive

To make a page element responsive an appropriate CSS 'class' or 'style' is placed into the element's code while editing.

Often the easiest way to add a class is by editing the source code and adding the "class" directly into the element (image, media, etc ) tag.

For many people having to edit the source code is a real issue.

Images

Images are one of the key elements added to web pages, which need to be 'responsive'.

Note: The following instructions will not work on a standard CMSimple editor installation. It requires a modified editor CSS file and initialisation file to have been added to the editor.

View Editor CSS file... editor-stylesheet-css.html
View Editor Initialisation file... init_MODE-01-js.html
View Instructions... install-CMSimple-editor-mods.txt
Download the files... CMSimple-editor-mods.zip - 2.5k

Inserting an Image

Select the Insert/Edit image button
On the General tab you have...
Source - The location of the image.
Image Description - The 'alt' attribute of the image tag for accessibility by people with disabilities using screen readers.
Image Title - A title for the image that you see when you hover over it with your mouse.
Do not enter a title here if it is being linked to a 'lightbox'.
Dimensions - In a default installation 'Dimensions' would come next. Unfortunately the code in this part of the editor only deals with fixed sized images and does not take into account 'responsiveness' at all, so it has been removed.
Class - Choose a class for the image from a 'drop down' list. Added to the editor.
On the Advanced tab nothing needs to be entered.

Note: Classes can also be added by...

Select the image you want to add the class too, by clicking on it.
Select the 'Formats' menu
Click on the appropriate 'class' and it is automatically added to the selected image.

Note: Image's can have multiple classes assigned to them.

Image Classes

' img.noBorder ' - The .noBorder class removes any border around an image.

' img.autoBorder ' - The .autoBorder class adds a small border around images.

' img.autoSize ' - The .autoSize class is about as close as you can get to a 'standard' way to make your web page images responsive.

If the zGallery plugin is installed any link to an image on your website can have that linked image displayed in a lightbox. Any link can also have an enhanced title shown. For displaying a linked image in a lightbox add the class "lightbox" to the image link and to display an enhanced link title add the class "showInfo" to the link.

More... lightbox-images-readme.html

' a.noBorder ' - The noBorder class here removes any border and text decoration styles around links.

' a.lightbox ' - Enable an image 'lightbox'.

' a.showInfo ' - To display an enhanced link title add the class "showInfo" to the link.

Examples

Example #1 - Just the .autoSize class has been added.

Example #2 - The .autoSize and .autoBorder classes have been added. A basic 'title' has also been included in the image.

Example #3 - In this example the .autoSize, .autoBorder classes have been applied to the image and the lightbox, showInfo, and a.noBorder classes have been added to the link to display the linked larger image in a lightbox.

The Class CSS Code

The following classes must be in the CSS file of the page template you are using. If they aren't, place a copy there.

img.noBorder {
border:none;
}

img.autoBorder {
padding: 1.1%;
background: #fff;
border: 1px #d9d9d9 solid;
}

img.autoSize {
width: 100%;
max-width: 100%;
height: auto !important;}

a.noBorder {
border: none;
text-decoration: none;
}

a.lightbox {}

a.showInfo {}