Mura 10: Basic Content

Advanced Content Tabs

When editing content via the back-end administration area of Mura, or using the "Full Edit" feature from the front-end public-facing view of your site, the various fields that are available for content items are grouped together within tabs. You can think of the Edit Content screen as simply one, giant form, because that's essentially all it is.

The "Basic Tab" is covered under the "Basic Content" section. In this section, we'll cover the other tabs available to you when editing content.

If you see a down arrow on the far right of the listing of tabs, simply click the arrow to view the additional tabs. This occurs when the browser is too narrow to display them all within the browser's viewport.

Note: If you don't see one of the tabs specified in this section, the group(s) you belong to may not have been granted access to those tabs.

Your site may also include tabs not identified in this section of the site. If so, your instance of Mura CMS is most likely using a custom plugin used specifically to create custom tabs and fields unique to your organization's needs.

Content Types

In Mura CMS, it's important to understand that there are different types of content. For example, sometimes you may want to create a traditional "page" of content, where there's a body area of text and images. Other times, you may want to add a "file" such as a PDF document, image file, or a link to another website. 

One very important distinction here is that each content type has several attributes and features such as the ability to use categories, tags, and control whether or not the item will display or not, or even restrict access to the information to specific group(s). Please take a moment and review each of the basic content types listed below.

Admin Content View

There are many things you can do on the back-end administration view of Mura CMS that you cannot do on the front-end public view. Here, we'll explore the "Content" area of the "Admin View" and learn how to find content we might be looking for to edit.

Content Editor

The format of the Editing window in the latest version of Mura has been updated to simply the process and maximize the space dedicated to the most-used portion of the content manager, the content editor itself (CKEditor). All of the tools and fields that were formerly hidden behind separate tabs (and that would take you away from the editor) are now placed to the side of the editor so that all readily accessible.

The tab you are mostly likely to edit is the Basic tab. 

File Manager

Within the content editor and elsewhere, Mura provides a File Manager for managing both images and files. We call these type of files "loose" assets in that they are not formally attached to content, such as with Associated Images or images and files you have uploaded through the Content Manager. Instead, these are the sorts of files and images included in inline content, such as when you click the Image icon in the content editor to insert an image into your content.

To see an example of the File Manager, click on the Add Image icon in the Content Manager's editor, then Browse Server.

Adding Files

At the top of this window you will see a "drop target" where you can drag one or more images and/or files from your local computer and "drop" them onto this space. These will then be uploaded one at a time and placed in the current folder. Alternatively, you can click on this region and a familiar "select files" window will open on your computer.

Note: Keep track of your file sizes! Photos, especially those taken with cameras or your phone, can be very (VERY) large. It is best to upload photos only once you have reduced the size and/or image depth (aka 72dpi resolution) via a program like Photoshop or using an online service.

File Toolbar

Below the upload area is a toolbar where you can perform a few actions. First, you can switch between Grid View and List View, the former being a thumbnail grid of the files (and image thumbnails where appropriate), the latter being a list of the files with some associated information.

You can also add new folders by clicking on the Folder icon, and then naming the folder. As these folders are used when generating the web link to the image, ideally these folder names should not contain spaces.

Finally, there is a "filter" box where you can add all or part of a filename to quickly find the file you are looking for.

Navigating Your Files

The main area of the File Manager is the file browsing area. As per above, these can be listed either as a Grid or List. Both provide the same information and functionality, while the Grid view will additionally provide thumbnail versions of image files.

Standard File Menu

All files have a standard action menu, which can be displayed by clicking the    vertical-dot icon.

Folders

Folders and navigation always appear as the first items listed. The first item in the list may be a box with a left-pointing arrow in it. This means you are currently looking at a sub-folder in the current folder area. You can navigate to higher levels either by a) clicking on this left-facing arrow, or b) using the breadcrumb list at the top of the File Manager to navigate directly to any higher-level folder.

Folders appear as folder icons with the folder name displayed. To navigated into this folder, click on the icon.

Images

Images and files appear after the above navigation items. Images will include a thumbnail of the image, along with the file size (if available) as well as the date it was last modified.

If you click on the thumbnail itself, a larger-scale version of the image will appear within an image gallery. The gallery itself has its own navigation (appearing as left-right arrows to the left and right of the image). Below the larger-scale image is a toolbar that provides various functionality.

Editing Images

If you have chosen Edit Image, then a new image will appear, and the view will alter.

When you enter this mode (by clicking Edit Image, as described above), a Grid Box will appear over the image, which can be moved and resized. This grid box will allow you to crop the image to a new dimension. Below the Grid Box is a menu, and to the right are a series of constraints that can be applied to the box. The first are a series of fixed dimensions (i.e. 4:3) that will resize the box to commonly found dimensions, as well as Fixed (which fixes the dimensions of the box so that the aspect ratio of the existing image is maintained) and Free (which allows freeform resizing of the box). You can move this box by clicking and dragging the box around the image, and resize the box by clicking and dragging the corners. Note that, for very large images, you can also click and drag the image around as well.

There are also a variety of actions that can be applied:

Files

Files appear as default icons along with the file size (where available) and date last modified. Clicking on the icon or menu will open the standard file menu (see above).

Content Formatting

When editing the "Content" or "Summary" fields in Mura CMS, you're actually using a web text editor. The editor comes with a number of very powerful features. First of all, if you click the question mark found on the far right of the last row of tools, a dialog window will appear informing you that the web text editor was created by CKEditor. While we'll cover some basics, you may find the CKEditor User's Guide a much more thorough resource.

The Toolbar

The first thing you'll notice when editing content with the web text editor is the toolbar that appears at the top of the editor window. A similar toolbar appears when you using "inline edit" mode on the front-end public view of your site as well. It contains menu buttons that give you access to various functions of the editor. All buttons are grouped according to their function and include both simple operations (like basic text styling or formatting) and more advanced features (like inserting media via a dialog window).

The CKEditor toolbar buttons are illustrated with meaningful icons. If, however, you are not sure what functions they perform, hover the mouse cursor over the buttons to see a tooltip with the name of the function.

Using the Toolbar

In order to perform an operation assigned to a button, click the button once. In most cases it will either immediately perform some predefined action or open a dialog window with further configuration options for a feature.

Remember that the toolbar can also be used with your keyboard. To enter the toolbar, use the Alt+F10 keyboard shortcut. To move to the next or previous button group, use the Tab and Shift+Tab keys, respectively. Within a button group, use the Left Arrow and Right Arrow keys to move between buttons of this group. To activate a selected toolbar button, press Enter or Space.

Some of the buttons serve as placeholders giving you access to further options placed in a drop-down list. They are easily recognizable thanks to a small icon on their right. Clicking the name or the arrow icon of such button expands the list and lets you choose one of its options via the left mouse button. To select a drop-down list option you can also use the Tab or the Down Arrow key and then accept your choice by pressing Enter or Space on your keyboard. To hide the list, use the Esc key or click anywhere in the browser window.

Uploading Images and Files

Mura CMS has its own integrated File Manager for managing your site assets such as images and files. To upload new files and/or images or to access existing ones, click on the CKEditor Toolbar "Image" icon and select Browse Server. Here you can drag/drop new files from your local computer, or use filters to navigate through the existing files to find the one you are looking for.

How to Create a Photo Gallery

As previously mentioned in the  Folder Content Types section, Folders allow you to aggregate related content into a defined group. While they are typically used to keep content such as "news" or "blog" posts together, they may also be used to create photo galleries. In fact, there's nothing stopping you from creating a "folder of galleries" or "galleries of galleries". 

To create a custom photo gallery, follow the steps outlined below.

1. Navigate to the section of your site where you wish to add a photo gallery (or gallery of galleries, etc.), then add a Folder content item.
2. In the "Title" field, enter the name of your gallery. For example, "My Photo Gallery".
3. When finished, select your desired publishing option.
4. Now that you've created a new Folder, you can add your images in a few different ways. First, keep in mind, this is just a Folder. So, you can add multiple "Pages", and just make sure you use the "Assign Associated Image" field to add your desired image for each page (this is essentially how "news" or "blog" posts are created. You could also add a "File" content type, and select an image as your file to upload. Or, you could use the Quick Upload feature to upload multiple images at the same time. Finally, you could select the "Folder" content type, and use the "Assign Associated Image" field for your image. In fact, using a specified image for the nested Folder is a great way to create "galleries of galleries". 
5. The example below is using the Quick Upload feature to upload multiple images at the same time. When using this feature, keep in mind that you're able to modify the "Title" of the image before it's uploaded.
6. After you've completed uploading all of your images as content items, whether it's Pages, Folders, Files, or you used the Quick Upload feature, you're ready to customize your Folder to make it function more like a traditional photo gallery, because your gallery will display just like any other Folder does by default.
7. From the front-end view of your site, hover over the pencil icon, then select "Inline Edit".
8. Hover your mouse over the list of images in the body area, and click the pencil icon which should appear in the top-left corner of the region.
9. The display object panel should now reveal the "Folder" configuration panel.
10. From the "Folder" configuration panel, you may select your Layout, List Image Size, which Selected Fields you wish to display, Items Per Page, and more. For example, for the Layout, select "Grid", then select your desired "Grid Style" option and "List Image Size". You'll see the display automatically update as you make each selection, so you'll know what the gallery will look like for your site visitors.
11. If you don't want the Title of each image to appear, select the "Edit" button beneath the "Selected Fields" label.
12. The "Select Fields" dialog window should open. From here, you may click, drag and drop the field(s) you wish to display, or not display by moving them from one column, to the other.
13. When finished selecting your desired fields, click Update.
14. The body area will update to reflect your updates.
15. In addition, on the "Folder" configuration panel, make sure you set "View Images as Gallery" to "True" if you want a modal window to open when a user clicks on an image.
16. You may also select the number of "Items Per Page", and if your Folder contains more images than the number selected, Mura will auto-generate pagination for you.
17. When finished, be sure to "Save" your changes by hovering over the "Save" button, and selecting your desired publishing option.
18. Your new gallery should now be ready for viewing.
19. If you set "View Images as Gallery" to "True", clicking an image will open the image in a modal window.
20. If/when you wish to reorder the images, you will need to do so via the back-end administration area, just as you would any other kind of content.

Summary

In this section, we reviewed Mura's content types and got to know the basics of creating/managing content.

In the next section, we'll look at structuring and organizing your content using built-in tools such as navigation menus, categories, tags, and more.