Advanced Inline Image Options in Mura 6.2
May 26, 2015 by Michael Evangelista
Mura CMS provides a number of solutions for handling and displaying photos on any page. In addition to robust cropping and resizing options for associated images and dynamic photo galleries, version 6.2 provides an enhanced set of tools for images placed directly in the primary page content using CKeditor.
Effortless Image Handling
When working in the rich text editor for any Mura content, the tools for embedding images into the text or html markup are readily available via a simple toolbar button.
By default, Mura's body and summary content fields use this rich text or "wysiwyg" editor to generate, edit and store the contents as html. The rich text editor can also be applied to extended attributes, allowing for multiple instances of the editor and all of its available toolbar buttons for a variety of purposes.
Clicking the Image button displays a simple dialog with intuitive options for inserting and handling images. In Mura CMS version 6.2, the image properties dialog has been upgraded, allowing for custom sizing, alignment and automatic css captions on any photo.
Easy Uploading with CKfinder
Before any image can be inserted into the page, it must first be available on the server. Mura makes this easy via the simple CKfinder dialog available via the "Browse Server" option in the image dialog.
Much like the File Handler module in the Mura admin area, the finder allows for browsing of previously uploaded files, creation of new directories, and most importantly in this case, the uploading of new images. CKfinder's simple interface prompts the user to upload and add files, and allows for a number of operations on any existing file.
Flexible Placement and Alignment
To further simplify the design process, the Image Properties dialog allows for precise placement and sizing of the image. Once an image has been uploaded and selected for placement, the dimensions will be automatically displayed. These numbers can be altered directly, or the image can be resized visually after being placed on the page.
Unlike Mura's associated image handling, this process does not actually resize the image file, allowing for further edits or fine tuning of the original photo. (While these sizing options are convenient, and a great easy option for novice content editors, it is advisable to resample large images to the desired final size before uploading, to achieve the most efficient page loading time.)
Options for alignment include left or right (inserting an image which is floated and wrapped by text), centered (centering the image on the page) or "none" (wrapping the image in a block level element, not floated or centered).
Alternate "alt text" and a plain-text caption can be easily added, with automatic css styling applied to the appended caption. Options to edit an existing image or caption are also easily available by clicking the image itself, or selecting the icon at the top corner of the image preview area.
Save and Preview Just Like Text
When using the CKeditor and CKfinder tools for inserting images into a Mura page, no further handling or expertise is required. Simply insert the images along with the text content much like any word processing program, and save or publish the page. Since the sizing and alignment are controlled in the Image Properties dialog, no further design skills or coding are needed to apply perfect placement of images and captions.
As with any of the CKeditor options in the Mura CMS admin area, the options for managing inline images are also available via Mura's front end editing tools. The default Mura CMS theme and editor stylesheets include basic rules for the various image alignments which can be easily extended or overridden to create custom borders, font styles, padding or margin as needed to create a completely custom image display style.
While each of Mura's many image handling options has its preferred applications, the inline text editor provides an excellent way to quickly and easily add photos to the html contents of any site.
More About this Feature
Also see Mura CMS v6 Documentation: Adding Images to Content