Adding Image Button to ckeditor

[gnsimoes]

Hi,

I have trying to add the image button in the ckeditor toolbar. I tried to add it by changing the ckeditor config file and by javascript, but without success.

Do you have any solution for that? Could you help me?

Thanks!

[gnsimoes]

Hello, could you give some feedback?

Thanks

[danrot]

Until now we don't have this button in the ckeditor, although we might add it somewhen in the future. However, we would recommend to use the content type for images instead, so that the template developer has full control over the appearance of these images.

[afroewis]

I am also in need to insert images within the editor but I can't get it to run. The problem with the media_selection content type is that you can only add images to one single position in the page. I think that using images within an article is a pretty standard content management use case...

A perfect solution would be for sulu to provide a custom filebrowser for ckeditor that comes from the SuluMediaBundle.

For now, we'll use the media_selection content type, but unfortunately it's a huge limitation :-(

[alexander-schranz]

Free image placement is in case of a full responsive website hard without breaking the design. So I would recommend mostly to use multiple block with a text_editor and media_selection. The media_selection have displayOptions to position the image. The displayOptions has 9 positions (topLeft, top, ....). With this options the theme developer have 100% of control how the images are shown and the design will not break. In 99% of the cases for the content manager its enough to position a image right left top or bottom a text. Also the content manager will find his paragraphs and sections faster when they are in multiple blocks instead of one big texteditor.

How to configured the displayOptions http://docs.sulu.io/en/latest/reference/content-types/media_selection.html

e.g.:

        <section name="test">
            <meta>
                <title lang="de">Test</title>
                <title lang="en">Test</title>

                <info_text lang="de">Bereich für den Inhalt</info_text>
                <info_text lang="en">Content Section</info_text>
            </meta>
            <properties>
                <block name="block"
                       default-type="block_image"
                       minOccurs="1"
                       maxOccurs="10">
                    <meta>
                        <title lang="de">Block</title>
                        <title lang="en">Block</title>
                    </meta>

                    <types>
                        <type name="block_image">
                            <meta>
                                <title lang="de">Text mit Bild</title>
                                <title lang="en">Text with Image</title>
                            </meta>

                            <properties>
                                <property name="images" type="media_selection" colspan="3">
                                    <meta>
                                        <title lang="en">Images</title>
                                    </meta>

                                    <params>
                                        <param name="types" value="image"/>
                                        <param name="displayOptions" type="collection">
                                            <param name="leftTop" value="true"/>
                                            <param name="top" value="true"/>
                                            <param name="rightTop" value="true"/>
                                            <param name="left" value="true"/>
                                            <param name="middle" value="false"/>
                                            <param name="right" value="true"/>
                                            <param name="leftBottom" value="true"/>
                                            <param name="bottom" value="true"/>
                                            <param name="rightBottom" value="true"/>
                                        </param>
                                        <param name="defaultDisplayOption" value="left"/>
                                    </params>
                                </property>
                                <property name="article" type="text_editor" colspan="9">
                                    <meta>
                                        <title lang="de">Artikel</title>
                                        <title lang="en">Article</title>
                                    </meta>
                                </property>
                            </properties>
                        </type>
                    </types>
                </block>
            </properties>
        </section>

So you get a multiple block where you can position the image.

[danrot]

@afroewis Consider that with the solution of @alexander-schranz you can also multiply these blocks, so that you can attach the image to the right paragraph. It might be a limitation, but IMO it has a lot more advantages (like the responsive stuff already mentioned).

[afroewis]

This is exactly what I need. Perfect ;-)

I did not know the concept of blocks. I know you use them in some examples in the page templates but maybe you should point out this feature in the docs as it's really powerful.

[danrot]

Yeah, you are right... That's something we forgot, when we were improving the documentation...

[gnsimoes]

Hi,

I want to say that I full agree what you say about using blocks to add media content along the texts. We must have a way to control the layout! But I still think we should have an alternative too, using the image button in the content editor, to put media in the content. Sometimes we have projects where the end users don't understand the procedure using blocks, it might be very confusing for them, for people are used to use other CMSs.

[danrot]

@gnsimoes You are right, that's why we didn't close this issue. But we are not concentrating on implementing this feature, since even when it is implemented, it is not the recommended way to handle this.

[iBasit]

+1