Images

⚠️ Since the Summernote Editor creates only inline elements, you'll probably create the paragraph first and then put the image in it.

Below you see an example of code of an image placed to the paragraph. Image has the Materialize CSS Grid classes. Below the code example you can see the same image as example. The image has the name "example.jpg". The image is 1024x768 pixels - this info is shown directly in the image file.

⚠️ If you want to see how the grid reacts, grab the right edge of the browser window with your mouse and make the window narrower or wider to simulate a change in screen resolution.

<p><img class="col s12 m6 l4 xl3" src="http(s)://your-wonder-cms-website-address/data/files/example.jpg"></p>

example.jpg

 

Image file

To use images, you must first upload an JPG or PNG image file to your Wonder CMS website:

  1. Click "Settings" and then click the "Files" tab.
  2. Click the "Select File" button and select the file you want to upload
  3. Click "Upload".
  4. Click "Settings" again, and then click the "Files" tab.
  5. In the list of files you should find the file you uploaded.
  6. Copy the link of the uploaded file and paste it to the Summernote Editor's "Insert Image" dialog modal and click "Insert Image".
  7. To use image CSS Classes you have to click the image, than the "Original Size" and the "Remove Float" options.
  8. Now you can use the image CSS Classes

 

Image CSS Classes

Images can be given CSS classes:

  • Grid classes: (as in the code example above)
  • ⚠️ OR responsive-img - WHEN the parent element has grid classes - for example - a PARAGRAPH or SPAN:

<p class="col s12 m6 l4 xl3"><img src="http(s)://your-wonder-cms-website-address/data/files/example.jpg" class="responsive-img"></p>

<span class="col s12 m6 l4 xl3"><img src="http(s)://your-wonder-cms-website-address/data/files/example.jpg" class="responsive-img"></span>

 

Horizontal Images - Aspect Ratio classes

Below you see the images placed in the grid exactly as in the first example, but an additional CSS class is added - Aspect Ratio class for horizontal images as follows:

class="aspect-ratio-1to1"

class="aspect-ratio-4to3"

class="aspect-ratio-16to9"

class="aspect-ratio-2to1"

class="aspect-ratio-2-76to1"


⚠️ Aspect Ratio classes display images by hiding parts of them that overlfows (object-fit: cover). These classes do not work when the image also has a "responsive-img" class.

 

Vertical images - Aspect Ratio classes

Below you see the images placed in the grid exactly as in the first example, but an additional CSS class is added - Aspect Ratio class for vertical images as follows:

class="aspect-ratio-1to2-76"

class="aspect-ratio-1to2"

class="aspect-ratio-9to16"

class="aspect-ratio-3to4"


⚠️ Aspect Ratio classes display images by hiding parts of them that overlfows (object-fit: cover). These classes do not work when the image also has the responsive-img class.

 

Image - Inline Icons

There is also a special class for icons with links to online social networks and the every kind of the inline icons inside the content.

class="inline-icons"

Since the editor creates only inline elements, you'll probably create the paragraph first and then put the images one by one in it:

<p class="col s12"><img src="http(s)://your-wonder-cms-website-address/data/files/facebook-icon.png" class="inline-icons"><img src="http(s)://your-wonder-cms-website-address/data/files/instagram-icon.png" class="inline-icons"></p>

⚠️ This class adds spacing for images to the right and above the image.

 

Summernote Editor (also Lite version)

The editor allows you to add pictures using the standard "Picture" tool or using drag&drop. More relevant information about this in Tips & Tricks.