Example CSS for the CKEditor Enhanced Image plugin

Jul 17, 2017

http://ckeditor.com/addon/image2
Dashboard > System & Settings > Basics > Rich Text Editor > Enhanced Image

Enhanced Image Features:

  • allows for adding image captions (that will not be separated from the image when its location changes)
  • has all advantages of widgets, i.e. you can treat the image and its caption as one entity and select, delete, or move it in the editor content area as a whole
  • supports drag and drop for changing image position
  • provides image alignment CSS classes
  • includes hassle-free "click and drag" resizing

The Enhanced Image Plugin Compared to the Image Plugin:

The Enhanced Image plugin assigns classes for alignment and captions and adds the HTML for the captions. It is up to the individual or theme maker to write the CSS for these classes.

Alignment Classes

Left - the img tag is assigned the class content-editor-image-left.
Center - the picture tag is wrapped in a p tag with the class content-editor-image-center.
Right - the img tag is assigned the class content-editor-image-right.

Image Captions

When enabling image captions, the picture tag is wrapped in a figure tag with the class content-editor-image-captioned and an alignment class if an alignment has been selected. A figcaption tag is added after the picture tag with the default text of "Caption".

Example: captioned image with right alignment

<figure class="content-editor-image-captioned content-editor-image-right">
    <picture>
        <!--[if IE 9]><video style='display: none;'><![endif]-->
        <source srcset="/my_site/application/files/thumbnails/large/6015/0024/5193/happy_cupcake.jpg" media="(min-width: 900px)">
        <source srcset="/my_site/application/files/thumbnails/medium/6015/0024/5193/happy_cupcake.jpg" media="(min-width: 768px)">
        <source srcset="/my_site/application/files/thumbnails/small/6015/0024/5193/happy_cupcake.jpg">
        <!--[if IE 9]></video><![endif]--><img src="/my_site/application/files/thumbnails/small/6015/0024/5193/happy_cupcake.jpg" alt="happy_cupcake.jpg">
    </picture>
    <figcaption>Caption</figcaption>
</figure>

Example Alignment CSS

Left

.content-editor-image-left {
    float: left;
    margin: 10px 20px 10px 0;
}

Center

.content-editor-image-center img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Center (preserve styling when editing content)

.cke_widget_image .content-editor-image-center {
    margin: 10px 0;
    text-align: center;
}

Right

.content-editor-image-right {
    float: right;
    margin: 10px 0 10px 20px;
}

Example Alignment and Caption CSS

Standard

.content-editor-image-captioned {
    display: table;
    margin-bottom: 10px;
    margin-top: 10px;
}

.content-editor-image-captioned.content-editor-image-left {
    float: left;
    margin-left: 0;
    margin-right: 20px;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-left {
    float: left;
    margin: 10px 20px 10px 0;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-left .content-editor-image-captioned {
    margin: 0;
}

div.content-editor-image-center .content-editor-image-captioned {
    margin: 20px auto;
}

.content-editor-image-captioned.content-editor-image-right {
    float: right;
    margin-left: 20px;
    margin-right: 0;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-right {
    float: right;
    margin: 10px 0 10px 20px;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-right .content-editor-image-captioned {
    margin: 0;
}

.content-editor-image-captioned figcaption {
    caption-side: bottom;
    display: table-caption;
    padding-top: 10px;
    padding-bottom: 10px;
}

Standard with Background Color

.content-editor-image-captioned {
    display: table;
    margin-bottom: 10px;
    margin-top: 10px;
}

.content-editor-image-captioned.content-editor-image-left {
    float: left;
    margin-left: 0;
    margin-right: 20px;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-left {
    float: left;
    margin: 10px 20px 10px 0;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-left .content-editor-image-captioned {
    margin: 0;
}

div.content-editor-image-center .content-editor-image-captioned {
    margin: 20px auto;
}

.content-editor-image-captioned.content-editor-image-right {
    float: right;
    margin-left: 20px;
    margin-right: 0;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-right {
    float: right;
    margin: 10px 0 10px 20px;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-right .content-editor-image-captioned {
    margin: 0;
}

.content-editor-image-captioned figcaption {
    background: #f5f5f5;
    border: 1px solid lightgray;
    caption-side: bottom;
    display: table-caption;
    padding: 10px;
}

Overlay with Semi-transparent Background Color

.content-editor-image-captioned {
    display: inline-block;
    margin-bottom: 10px;
    margin-top: 10px;
    position: relative;
}

.content-editor-image-captioned.content-editor-image-left {
    float: left;
    margin-left: 0;
    margin-right: 20px;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-left {
    float: left;
    margin: 10px 20px 10px 0;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-left .content-editor-image-captioned {
    margin: 0;
}

div.content-editor-image-center {
    text-align: center;
}

div.content-editor-image-center figcaption {
    text-align: left;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-center {
    text-align: center;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-center figcaption {
    text-align: left;
}

.content-editor-image-captioned.content-editor-image-right {
    float: right;
    margin-left: 20px;
    margin-right: 0;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-right {
    float: right;
    margin: 10px 0 10px 20px;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-right .content-editor-image-captioned {
    margin: 0;
}

.content-editor-image-captioned figcaption {
    background: rgba(0, 0, 0, 0.5);
    bottom: 0;
    color: #fff;
    padding: 10px;
    position: absolute;
    width: 100%;
}

Hover Overlay with Semi-transparent Background Color

.content-editor-image-captioned {
    display: inline-block;
    margin-bottom: 10px;
    margin-top: 10px;
    position: relative;
}

.content-editor-image-captioned.content-editor-image-left {
    float: left;
    margin-left: 0;
    margin-right: 20px;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-left {
    float: left;
    margin: 10px 20px 10px 0;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-left .content-editor-image-captioned {
    margin: 0;
}

div.content-editor-image-center {
    text-align: center;
}

div.content-editor-image-center figcaption {
    text-align: left;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-center {
    text-align: center;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-center figcaption {
    text-align: left;
}

.content-editor-image-captioned.content-editor-image-right {
    float: right;
    margin-left: 20px;
    margin-right: 0;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-right {
    float: right;
    margin: 10px 0 10px 20px;
}

/*preserve styling when editing content*/
.cke_widget_image.content-editor-image-right .content-editor-image-captioned {
    margin: 0;
}

.content-editor-image-captioned figcaption {
    background: rgba(0, 0, 0, 0.5);
    bottom: 0;
    color: #fff;
    display: block;
    opacity: 0;
    padding: 10px;
    position: absolute;
    transition: opacity 250ms;
    width: 100%;
}

.content-editor-image-captioned:hover figcaption {
    opacity: 1;
}

Tips:

  • There are situations where the text is not lined up horizontally with the top of the image. When that happens you can add vertical space by adding a br tag (Shift+Enter keys) or p tag (Enter key).
  • When using floated images with text on narrow screens, the available area for text is just big enough for a few words or less. This makes for a challenging reading experience. This can be prevented by adding a media query and removing the float on the image. The screen width for the media query will depend on the size of the text.
  • To make images responsive, add this CSS:

    div.ccm-page img {
        height: auto;
        max-width: 100%;
    }
    
Recent Tutorials
Generate a report with author information and form summaries in Concrete CMS.
May 9, 2022

In Concrete CMS, you can use a form to initiate contact between logged-in users and then create helpful reports. After form submissions are collected, they can be searched, sorted, and exported as a spreadsheet. This tutorial will detail how to add author information to a report using the advanced search.

How to clone and customize Atomik theme
Feb 14, 2022
By linuxoid.

How to clone and customize Atomik theme

Update jQuery to 3.5 on Concrete CMS version 8.5.x
Dec 1, 2021
By hissy.

If you have to take some time to fix your site to work with version 9 and want to update jQuery immediately, you can override it.

Add-On Developers: Get Your Add-Ons Ready for Concrete CMS 9.0
Aug 6, 2021
By andrew.

Concrete CMS 9.0 is coming! But there are some changes in version 9 that might affected your add-ons and themes. This document aims to answer questions about the most common ways that your add-ons might need to be changed, and common problems you'll run into.

Permissions for editors in a multilingual site
Jun 2, 2021
By myq.

How to set up a multilingual Concrete CMS site for groups of language-specific editors

Getting Started with Doctrine in Concrete CMS
Jan 20, 2021
By linuxoid.

Doctrine is a very flexible, simple (once you get to know it better) and powerful PHP library for database interactions primarily focused on the ORM = Object Relational Mapping and DBAL = DataBase Abstraction Layer.

Was this information useful?
Thank you for your feedback.