The Image Challenge - Using Images

Since most modern web pages are designed to be 'responsive' it would be a good idea to know 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.

Note: Updated 24 July 2022.

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 the basic way is to define in CSS a minimum-width and a maximum-width for the page element then to define the actual width as a percentage. To keep the correct aspect ratio for the element it's height is set to automatic.

These parameters can be placed in an appropriate CSS 'class' or 'style' and be included into the element's code while editing.

Often the easiest way to add a class or style is by editing the source code and adding them directly into the element (image, video, audio, iframe, etc ) tag.

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

Responsive Quick Fix for Media

Is there a quick fix to make images and other media responsive? The CSS near the bottom of this page shows the simplest solution. It is not ideal but a good enough as a default.

See... CSS Code

Working with Images

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

Not all images may need to be made responsive. Smaller images for instance. What does 'smaller' mean here? It comes down to what you want to happen on mobile devices with minimal screen sizes and the smallest screen size you want to support. The first Apple iPhone had a screen 320 pixels wide for instance so you may not want to bother making images less than 320px wide responsive.

When you enter the width dimensions for an image into the editor they can either be an absolute size of fixed dimensions (example: 440px) or set as relative percentage (example: 88%) -  meaning 88% of the width of the area that contains the image not 88% of the image's size. If the width is set to a percentage the height must be set to 'auto'.

So to have an image made 'responsive' the width must be set as a percentage, with the height set to 'auto'.

Making images responsive is not the only thing you may want to do... Placing images to the left, right or full width, adding other features such as the lightboxing of larger images, and enhanced titling, will all require the addition of a unique 'class'.

These basic CSS 'classes' for images and image links have been included.

See... CSS Code

tinyMCE

TinyMCE is the default editor used by CMSimple. As I prefer an uncluttered, simple page editing environment with only the features I actually use enabled, the editor has been modified for this. A simplified editor CSS file and initialisation file have been added to the editor.

xhplugincall, a plugin for the tinyMCE editor itself, has also been modified to allow the plugin setup to be changed without having to go into 'source code' view to do it. The warning message display has been improved upon as well.

Note: The CSS classes referred to in this article must also be present in your template.

TinyMCE 4

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

TinyMCE 5

View Editor CSS file... editor-stylesheet-css.html
View tinyMCE5 Editor Initialisation file... init_MODE-01-json.html
View Instructions... install-CMSimple-tinyMCE5-editor-mods.html
Download the files... CMSimple-tinyMCE5-editor-mods.zip - 3.4k

How do I know if my CMSimple installation has these included? Begin editing a page and open the 'Formats' menu of the editor. A list of the following Image Classes and Link Classes should be  there.

Image Classes

' img.imgLeft ' - The .imgLeft class floats the image to the left hand side.

' img.imgRight ' - The .imgRight class floats the image to the to the right hand side.

' img.imgFull ' - The .imgFull class centers the image in a block that occupies the full width of the content container.

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

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

Link Classes

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

' a.lightbox ' - Enables a lightboxed image gallery within a page. All images on the page with this class form part of a gallery.

' a.lightboxIMG ' - Displays a single page image in a 'lightbox'.

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

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 about... Lightboxes

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 - Sets a size for the image.
Class - Choose a 'class' for the image from a 'drop down' list.

On the Advanced tab nothing needs to be entered.

Note: Only one class can be added using the method above, additional 'classes' can 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.

Examples

Example #1 - Responsive banner image with no added 'classes'. The width is set to 100%.

Example #2 - The .addBorder class has been added. A basic 'title' has also been included in the image seen as you hover over it. Note: The width of the image is set to 98% to take into account the width of the border.

Example #3 - In this example the .addBorder class has been applied to the image and the lightboxIMG, showInfo, and a.noBorder classes have been added to the link to show an enhanced 'title' for the image as well as display the linked larger image in a lightbox.

Left or Right

The following three images have been positioned using one of the following classes... .imgLeft, .imgRight, or .imgFull. All have had the .addBorder class added as well.

Note: The smaller .imgLeft .imgRight images have a fixed width. The larger .imgFull image is responsive and it's width is set to 80%.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aliquam erat volutpat. Nunc auctor. Mauris pretium quam et urna. Fusce nibh. Duis risus. Curabitur sagittis hendrerit ante. Aliquam erat volutpat. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Duis condimentum augue id magna semper rutrum.

Magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nullam eget nisl. Cum sociis natoque penatibus et magnis. Donec vitae arcu.Aenean placerat. In arcu. Aliquam erat volutpat. Suspendisse potenti. Morbi mattis felis at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet et magnis dis.

img-example-1.jpg

Nullam eget nisl. Cum sociis natoque penatibus et magnis. Donec vitae arcu. Aliquam erat volutpat. Suspendisse potenti.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aliquam erat volutpat. Nunc auctor. Mauris pretium quam et urna. Fusce nibh. Duis risus. Curabitur sagittis hendrerit ante. Aliquam erat volutpat. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. Duis condimentum augue id magna semper rutrum.

Magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nullam eget nisl. Cum sociis natoque penatibus et magnis. Donec vitae arcu. Aliquam erat volutpat. Suspendisse potenti. Morbi mattis felis at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet et magnis dis.

The Class CSS Code

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

/* Basic responsive embedded media */
img,
audio,
video {
max-width: 100%;
height: auto;
}

/* Image Classes */

img.imgLeft {
float: left;
margin: 0 15px 15px 0;
}

img.imgRight {
float: right;
margin: 0 0 15px 15px;}

img.imgFull {
display: block;
max-width: 100%;
margin-right: auto;
margin-left: auto;
height: auto !important;
}

img.noBorder {
border: none;
}

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

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

a.lightbox {}
a.lightboxIMG {}
a.showInfo {}