The Image Component enables you to control your image with a high degree of functionality. MOBLE CMS considers responsive design, how your images behave across all devises, it is therefore well worth becoming familiar with the tools that are at your finger tips.
You can upload new images to your website from your computer. Once uploaded the image will be stored in your 'Files' area.
You can browse images that already exist in your 'Files' area. Click 'Browse' and a popup will appear allowing you to search your image library.
Using the search bar at the top of the pop up, you can search images by:
Once you have selected an image, a preview of the image will appear. It will also show the image name, dimensions and tags.
The Background Image URL serves two functions:
You can use the 'Browse' and 'Upload' tools to choose an image that you have already uploaded. Or, you may upload a new image from your computer. Once you have selected the image, the image URL will display.
You may paste in an image address for an image that exists anywhere on the web (e.g. right mouse click any image and copy the image address). This might be from from your local company share drive, or other company cloud storage services, such as Google Drive, Dropbox or Box. It may also be from a free stock library website such as Pexels, Unsplash, or Negative Space.
If using images from an external website it important to remember two very important points:
Link List can be used to link an image to any page on your website.
Anchor List allows you to link an image to any frame on your page. This can be set up as follows:
DESTINATION (LINK TO) URL:
You may elect to link the image to an external page, i.e. a page outside of your website. Paste in the url that you are linking to here (including http://)
In the behaviour section below, ensure that your 'Open New Window' is highlighted.
You may decide if you what to display your image to actual pixel width or a percentage width of the frame.
You may decide if you what to display your image to actual pixel height or a percentage height of the frame.
'Max Width' provides additional functionality that can enhance the look of your images. You can set 'Max Width' if you wish to control the maximum width of an image, even if on a particular device (e.g. desktop) the frame is wider than the image.
Imagine that you have an image that is 900px wide and you do not wish it to stretch beyond 900px (otherwise it will become pixellated or blurry).You set the (normal) Width (%) to 100% as default on MOBLE CMS.On a Laptop the screen width is 1440px wide, therefore by setting the Max Width to 900px the image will not expand further than 900px.However, on a mobile, that is say, 320px wide, the image will render to 100% of the screen width and shrink with the size of the device.(This is why MOBLE CMS has 'Max Width' not 'Min Width').
'Max Width' can be set to an exact pixel width, like in the example above, or as a percentage of the frame (e.g. only ever display the image to a max of 90% of the frame).
'Max Height' Can be used to make your image a either a maximum % height of the frame, or a maximum pixel height.
Imagine that you have an image that is 700px high and you do not wish it to stretch beyond 700px (otherwise it will become pixellated or blurry).You set the (normal) Width (%) to 100% as default on MOBLE CMS.On a Laptop the screen width is say, 900px high, therefore by setting the Max Width to 700px the image will not expand further than 700px.However, on a mobile, that is say, 568px high, the image will render to 100% of the screen width and shrink with the size of the device.(This is why MOBLE CMS has 'Max Width' not 'Min Width').
Given the nature of of vertical scrolling 'Max Height' is infrequently used. Leave this field blank unless for a very specific purpose (e.g. thin portfolio images).
The title attribute displays when you hover over an image, this appears in a tooltip. The image title is often referred to as the 'Title Tag' even though it is not actually a tag.
Ensure your images titles are succinct and descriptive. This will benefit your visitors, though it will also assist your CMS users to quickly locate the image when browsing images within the CMS.
In considering SEO, try not to be spammy. Aim for under 50 characters, though absolutely no more than 70 characters.
The Alternative Text is often referred to as the 'Alt Tag', even though it is not actually a tag. The Alternative Text is used to describe the image when the image is not displayed, e.g. in slow internet connections, to visually impaired using screen readers and also by search engines to understand the image.
Therefore, it is important to be succinct and descriptive. In considering Search Engine Optimisation do not try to keyword stuff your Alt Text. The search engines understand semantics, therefore they will value similar words to your main keyword that you are optimising for. Be as natural as possible and do not repeat your Alt Text for different images.
While there is no limit to the length of your Alt Text, it is recommended that you aim for 125 characters or fewer. This is less because of the search engines, but more because of restrictions within the popular JAWS screen reader. Many versions of JAWS will break up text into blocks of 125 characters.
You may set an alignment for your images. By default your image will be left aligned. Please note that you may also align your content (e.g. text, images and buttons) within the frame of which it sits.
Hover Effect offers amazing functionality to your visitors. You may add a hover effect to an image and an effect will appear when a website visitor hovers over the image.
Often your image 'Title' will appear on hover, often on top of a transparent overlay that rolls over the image. Therefore, consider the length of the image Title and keep it succinct and descriptive.
You may view your hover effect options in the Themes area of your website.
To add new effects outside of the set MOBLE CMS styles, you will need to be on the Pro package, or have your website designed by a registered MOBLE CMS design partner. Please note that new styles are added to MOBLE CMS frequently, therefore you will always have the latest effects at your finger tips.
Class List is a tool for advanced users to browse through available CSS classes and then apply them to an image.
Class displays the classes that have been applied to the image.
Did you know? A class is used in code to hook a particular style to an object. There is only ever one instance of a particular Class, therefore if the Class is updated, all objects that have been assigned with this Class will automatically be updated.
There are situations when you may wish to give your image an ID. The most frequent use case is when you wish to anchor a link, a button, or other image to your image.
This can be set up as follows:
WEBSITES WITH MOBLE | Design Studio: 202, 56 Bowman Street Pyrmont NSW 2009 | © Copyright 2018 MOBLE Pty Ltd | Terms | Privacy