Images
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.
| URL | The URL for the image MUST be supplied. It should be a complete URL of the form: https://c2.staticflickr.com/4/3679/33672351416_05dc0a0125_c.jpg 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. 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 |
| URL | The URL that the browser will go to if the image is clicked. | ||||||||||||
| Target | Target options specify how the link address is opened.
|
| 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. |
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.