Blog

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.

A simple dialog provides detailed controls for any image embedded in the Mura text editor content.

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.

A convenient toolbar button starts the image placement process.

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.

The CKfinder file manager system allows for easy file operations and uploads.

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. 

Images can be easily edited once inserted including click-and-drag height and width selection.

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.

Images can be moved or changed by clicking the image or selecting the handle icon.

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.

Images are also easily inserted and managed via Mura's front end editing tools.

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
http://docs.getmura.com/v6/content-managers/about-us/adding-images-to-content 

Further documentation for Mura CMS developers and content managers is available at docs.getmura.com
Learn more about Mura's powerful features and flexible options at www.getmura.com.  

Examples used in this article are based on the Down to Business theme bundle for Mura CMS, available at themeforest.net.

Comments

Post a Comment

Required Field