Welcome to another Mura movie!
Today's movie will cover how to work with images inside of the Mura CMS.
Mura supports the basic web page image file formats (.gif, .jpg, .png) and as you might expect Mura makes it really easy to add, upload and place your images onto your web pages.
In your Mura account, select a page to edit from the Site Manager (we'll use the About Us page from the last movie). To place an image into your web page simply place your mouse cursor where you'd like your image to appear and then click the image icon in the toolbar. This will bring up the Image Properties box within Mura and there are 4 tabs that appear. The most important one is the first tab, the Image Info tab. In it you'll select the actual image file to use on your web page (via the URL field). By clicking on the Browse Server button you'll see all previously uploaded images on your web server.
Use the Alternative Text field to add SEO friendly, keyword-rich text for users who may be surfing with their images turned off in their browsers.
As soon as you select an image to use the height and width fields are automatically populated using the correct values for the selected image.
The alignment drop down list can be used to flow text around the right or left side of the image as needed.
If you need to upload a new image file you can do so by clicking on the Upload tab and walk through the screens to select an image file from your local computer and post it to your server, making it available to you to use.
On the Link tab you can specify a url to be used so that when a user clicks on your image it will serve as a link to the URL you specified. You can also determine if you'd like the link to be opened in the same page or in a new web page.
The Advanced tab is used to set more technical features such as style specifications and formatting. In the example I show you how to enter CSS code to add padding around the image that you're placing into your web page so that the text isn't placed directly up against the sides of the image.
At minimum you should have most of the fields in the Image Info tab filled in, and upon completion click the OK button at the bottom of the Image Properties box.
Back in your editor screen you'll see your placed image file. If this appears to your liking click the Publish button at the bottom of the Edit Content screen for your web page and by refreshing your existing view for your edited web page you'll see the image now appears.