End User Guide

Written by Super User on 10 September 2021. Posted in End User Guide.

Working with Image Styles

Let’s take a look at some techniques, that you can use to style images. An image style is represented as a class style within your <img> tag and looks like this in your HTML code:

<img class="my_img_style" src="/images/sampledata/myimage.png" />

This works by calling to a CSS image style which is found within your websites templates and looks like this:

img.my_img_style

This is built up in 3 parts. The ' img ' part defines the object type as being an image, the ' . ' defines that it is a class while the last portion ' my_img_name ' is the name.

This is important because most editors come with the ability to filter ‘Styles’ by object types. For instance, if you select an image object with your mouse the editor will prioritise image objects and display image styles first.

We can do this by selecting the 'image' object as seen in the screenshot (below in point 1.) and next select a predefined image style from the list as see in point (2.) which can be used to add a style to your image.

Here are a few examples of image styles:

Style: fade_in

Style: img-rounded

Style: img-polaroid

Creating a Content Lightbox

1. Select some text or an image to apply the link to > click on the 'Link' icon.

2. Enter the relative path into the URL field (the path without your site address), either by hand or by using the Link browser, if the link is to a page on your site or the full url if it is an external link (to another site).

3. Click on the 'Target' tab and select the 'LightBox' from the Target field. You can adjust the height or the width of your modal if you wish.

4. Click on 'OK'.

5. Save and you can preview your 'Lightbox' on the front-end. This is what it will look like .

Creating an Image Lightbox

1. Select an image. To do this click on the 'Image' icon > navigate to the image you want to insert > click on the image > click on the 'Insert' button.

2. Turn 'Modal Lightbox' on and insert the image into your content.

3. Save.

4. Disable inline editing and right click on the image to view your 'Lightbox'. This is what it will look like.

Working with WYSIWYG images

Adding images to your pages, is one of the easiest and most effective things you can do, to grab and hold the attention of your readers. The saying by Frederick R "a picture is worth a thousand words", endorses the fact that an image tells a story, just as well as a large amount of descriptive text on your page.

In HTML an image is defined with the ‘<img>’ tag which is followed by the ‘src’ attribute which stands for ‘source’. The ‘src’ attribute, basically tells your web browser, where the image file is located on your server.

It looks something like this, in your HTML code:

<img src="/images/my_image_location.png" />

Adding images

Let’s start by adding an image. To do this, select the 'Image' button as seen in point (1.) below which will load up the Ark Media Manager.

Select an image as seen in point (2.) and then click on the 'Insert' button as seen in point (3.). This will take you to the image editing screen.

Here you can edit the image, if you wish.

Once you are happy with your image, click on the 'Insert Into Content' button, to insert the image in your article - job done!

Drag-n-drop Image upload

The other method you can do is to drag-and-drop your images straight from your computer to the editor. This particular editor does this by using HTML5 and will automatically store your images away, on your web server’s file directory.

To drag and drop an image into the editor, simply click on your choosen image and drag it into your content. You can insert multiple images, by holding down the 'Ctrl' key, clicking on each image and dragging them into your content.

You can also copy and paste your images into the editor by clicking on your image and pressing 'Ctrl' + 'C', then press 'Ctrl' + 'V' in the editor, to paste the image into your content.