Basic insert

There are two editor buttons used to insert images.  These are buttons 2 and 4 as shown on the Page Editor page.


Button 2 inserts an image that has been uploaded to the Files area of PyroCMS.  (The Files area for PSM should not be used.  Hosting file space is limited, so all images should be stored on image hosting elsewhere, like Flickr etc.)  An image inserted from this source will automatically have the class "img-responsive" applied to it.  That can be changed after insertion using the "Edit" function in the context menu, see below.

Button 2 inserts images from any external source using the URL of where the image is stored.  The dialog for inserting the image allows complete control of the image appearance. The insert dialog consists of the following options.


Normally you will simply enter the URL for the image, Alternative Text and then possibly alter the class specification. The Alternative Text should be provided for every image.

Image properties tab
URL The URL for the image MUST be supplied.  It should be a complete URL of the form:

Once entered the Preview pane should show you a sample of what the image looks like associated with some sample text.
Alternative Text

The Alternative Text should be provided for every image. 

Alternative text is text associated with an image that serves the same purpose and conveys the same essential information as the image. In situations where the image is not available to the reader, perhaps because they have turned off images in their web browser or are using a screen reader due to a visual impairment, the alternative text ensures that no information or functionality is lost.

Simply, if for any reason the users browser doesn't display the image or they have visual impairment, this text will be displayed as an alternative to the image. See the Wiki explanation for more information.

Width The Width field will be filled with the actual width of the image.
Height The Height field will be filled with the actual height of the image.  If you have removed the class "img-responsive", then the image will be displayed with the fixed dimensions given.  If you alter the width or height, then make sure the ratio of the dimensions remain the same.
Border Sets a border around a picture.  Advice: don't use.
HSpace Horizontal spacing either side of the image.  Advice: don't use, depreciated in HTML5.
VSpace Vertical spacing above and below the image.  Advice: don't use, depreciated in HTML5.
Alignment Alignment of the image to other content.  Advice: don't use, depreciated in HTML5, use classes
Link tab
URL The URL that the browser will go to if the image is clicked.

Target options specify how the link address is opened.

Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in a named frame.  Forget about frames, never use them, frames are evil!
Advanced tab
Id Provides the id attribute to reference the image from other HTML or Javascript code.
Language Direction LTR or RTL language usage.
Language Code A language code for the image. Not used.
Long Description URL A link to a more detailed description of the image. Possible values are a URL or an element id.
Stylesheet Classes Classes that will modify the behaviour and positioning of the image
Advisory Title A title for the image - now depreciated, not used
Style An inline list of attributes for the image. Depreciated, use classes.
Common settings

After the Image Properties pop-up appears, you simply insert the URL for the image.  The image will have the Stylesheet Classes value "img-responsive" set by default.  Although the image Height/Width is shown, these will be ignored due to the presence of the Stylesheet Classes.  If you remove the Stylesheet Classes entry "img-responsive" then the values of Height/Width will become active for the image.

The addition or removal of the Stylesheet Classes value "img-responsive" is usually the only change necessary together with resizing the image for most entries.

If you want alignment etc for the image, then add other classes (separated by spaces) in the Stylesheet Classes field.  See Useful Classes for a list of these.