Working with images

In our time it is very difficult to imagine a site without any pictures. Usually they are used as banners, slides, background images, inserted into various texts, articles, etc.

Today we will look at how to embed images.

Method #1 - upload a new image.

In order to insert an image that you have never uploaded to your site, you need to click the "Image" button in the toolbar of the text editor.

In the opened window, you need to do a couple of steps:

1. Select the "Upload" tab
2. Click the "Choose file" button, then you need to select the image that you want to upload to your site.
3. Click "Send it to the server" and you will see a downloadable image with dimensions, etc. It is very important, before adding a picture, read the instructions to the end, because below describes how to process the image so that in the mobile version everything is correctly displayed.
4. The last step to save is click "ОК"

Method #2 - the use of an already loaded image.

We already have a downloaded picture on the site, but it should be used again. In order not to create duplicate images with a new download, we can take it from the server.

To do this, you must also click on the "Image" button in the toolbar of the text editor,

In the opened window, you need to do a couple of steps:

   1. Select the "Image Info" tab

   2. Click "Browse Server" and in the opened window find the previously downloaded image. 

It is very important, before adding a picture, read the instructions to the end, because below describes how to process the image so that in the mobile version everything is correctly displayed.

   3. To save, press "ОК"

---

Mobile version.

In the mobile version of the site, images that are not properly processed are displayed incorrectly.

When the picture is loaded, it has its own sizes, therefore, you must first prepare the image of the required sizes (tip: the width of the picture should not exceed 900px).

Of course, we want the pictures to be large enough, attract the attention of the visitors to the site and they did not have to take a magnifying glass to see what is on this image drawn or written.

But in a mobile phone, the screen sizes are small and if you do not process the image, it will look like this:

• The picture will go beyond the width of the text, and this is wrong and looks ugly.

What can I do to make the image look right?

Step #1

When we upload images to the site, in the download window we need to delete the width and height of the image.

Those. there nothing should be written (this is important).

To save, click "OK"

Step #2

In the article where the image was placed, in the text editing line, click "Source", before us opens the HTML code, find where our picture is and paste this code here: class = "img-responsive"

Once again press "Source" and save.

Now our picture in the mobile version will be displayed correctly.

 

---

Sometimes it is necessary that when you click on the image (banner, text, slide etc.), you go to another page of the site or to some other external source.

To do this, you need to do a couple of steps:

step # 1. Open the article and select the picture to which you need to assign a link
step # 2. Click on the "Link" icon

step # 3. Enter the required URL in the window that opens, save everything.

Now when you click on the image you will go to the installed link.