Plugins | Image position

Click on the image to see the Image Position icon on the toolbar.

<h2>Cosmic ocean invent the universe paroxysm</h2>
<p>Of brilliant syntheses emerged into consciousness preserve and cherish that pale blue dot not a sunrise but a galaxyrise something incredible is waiting to be known hydrogen atoms. Rich in heavy atoms Sea of Tranquility a mote of dust suspended in a sunbeam from which we spring vanquish the impossible a very small stage in a vast cosmic arena? Stirred by starlight descended from astronomers two ghostly white figures in coveralls and helmets are softly dancing courage of our questions rings of Uranus descended from astronomers.</p>
<figure>
    <img src="/assets/img/article/demo-image.jpg" alt="Snow mountain under starts" width="2000" height="1334" />
    <figcaption>Benjamin Voros <a href="https://unsplash.com/photos/phIFdC6lA4E">unsplash.com</a></figcaption>
</figure>
<h3>Cosmic fugue billions upon billion</h3>
<p>Rich in mystery corpus callosum light years at the edge of forever white dwarf cosmic fugue? Rich in heavy atoms permanence of the stars how far away the ash of stellar alchemy hundreds of thousands invent the universe. Star stuff harvesting star light bits of moving fluff two ghostly white figures in coveralls and helmets are softly dancing vastness is bearable only through love from which we spring hydrogen atoms and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Article Editor</title>
        <meta charset="utf-8">

        <!-- css -->
        <link rel="stylesheet" href="/your-article-dist-path/article-editor.css" />
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">...</textarea>

        <!-- js -->
        <script src="/your-article-dist-path/article-editor.js"></script>
        <script src="/your-article-dist-path/plugins/imageposition.js"></script>

        <!-- call -->
        <script>
        ArticleEditor('#entry', {
            plugins: ['imageposition'],
            css: '/your-article-dist-path/'
        });
        </script>
    </body>
</html>

Usage

By default, the editor sets these CSS classes for image position:

left: 'float-left',
center: 'align-center',
right: 'float-right'

This means that in the output code the image will have a class and will look like this:

<figure class="float-left">
    <img src="...">
</figure>

You can change it to your classes by specifying them in the settings when you start the editor.

ArticleEditor('#entry', {
    plugins: ['imageposition'],
    css: '/your-article-dist-path/'
    imageposition: {
        items: {
            left: 'my-float-left',
            center: 'my-align-center',
            right: 'my-float-right'
        }
    }
});

Now the class will be set into a block tag as specified in the settings.

<figure class="my-float-left">
    <img src="...">
</figure>

You can specify your own styles for image positioning in a separate CSS file using the custom.css setting, for example, as follows:

ArticleEditor('#entry', {
    plugins: ['imageposition'],
    css: '/your-article-dist-path/',
    custom: {
        css: ['/your-article-dist-path/your-image-styles.css']
    },
    imageposition: {
        items: {
            left: 'my-float-left',
            center: 'my-align-center',
            right: 'my-float-right'
        }
    }
});

As a result, your file your-image-styles.css can look like this:

.my-align-center {
    text-align: center;
}
.my-align-center img {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
}
.my-align-center figcaption {
    text-align: center;
}
.my-float-left {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
    max-width: 300px;
}
.my-float-right {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1.5em;
    max-width: 300px;
}

Using the settings, you can disable unnecessary image position items.

ArticleEditor('#entry', {
    plugins: ['imageposition'],
    css: '/your-article-dist-path/',
    imageposition: {
        items: {
            center: false
        }
    }
});