Forums

Floating content and images with caption

Permalink
Hi folks,

i'm absolutely new to concrete 5 and I need to build a custom theme for a customer. At the moment I'm stuck at one point and I don't know what is the best way to solve my problem. Maybe the solution is obvious and simple but due to low experience in c5 and an uncomplete "big picture" of this great peace of software I can't see it.
This is what I want to achieve: The content has pictures in it and the text floats around the pictures. This is absolutely doable with the content block, no modifications required. But! The images need to have captions, and this is the point at which I'm stuck. There are several possible ways to achieve this but none of them feels like the c5-way to me.
1) Use a jQuery caption plugin likehttp://captionjs.com/. Will surely work but introduces a new dependecy and is ways too mighty for my needs.
2) Somehow extend redactor in order to render a caption element below the image. Not quite sure how to do this in the context of c5, might require some ugly core hacking which is absolutely not desired
3) ?

I can't believe that there is no simple solution for doing this but after a couple of hours of searching through the forums and the net I'm still where I'm started.

Regards,
Alfred
alfredbrose
 
MrKDilkington replied on at Permalink Reply 3 Attachments
MrKDilkington
Hi alfredbrose,

After personally doing a lot of digging around in Redactor. The ability to add captions is not straight forward. I say this because the <img> element you see in Redactor is replaced with a <picture> element when saved. This is done to support responsive images.

Example: image in Redactor
<p data-redactor-inserted-image="true">
    <img id="image-marker" src="http://localhost/concrete5/index.php/download_file/view_inline/105">
</p>

Example: image replaced with picture element after saving
<picture>
    <!--[if IE 9]><video style='display: none;'><![endif]-->
    <source srcset="http://localhost/concrete5/application/files/2314/4029/6819/ultimate-chocolate-cupcakes-38-600-FW.jpg" media="(min-width: 900px)">
    <source srcset="http://localhost/concrete5/application/files/2314/4029/6819/ultimate-chocolate-cupcakes-38-600-FW.jpg" media="(min-width: 768px)">
    <source srcset="http://localhost/concrete5/application/files/2314/4029/6819/ultimate-chocolate-cupcakes-38-600-FW.jpg">
    <!--[if IE 9]></video><![endif]-->
    <img src="http://localhost/concrete5/application/files/2314/4029/6819/ultimate-chocolate-cupcakes-38-600-FW.jpg" alt="#" width="600">
</picture>

By default you cannot use div tags in Redactor. They are automatically stripped. Which means you have to use other HTML elements, like figure and figcaption used in the caption.js example.

I believe a Redactor plugin can be made to create captions though. To do it you will need to know basic JavaScript and jQuery and be able to read through the Redactor API documentation.
Here is an outline of how the plugin could work:
1. select the <img>
2. click on the plugin toolbar button
3. load the plugin form modal
4. in the form modal
    - enter the text for the caption
    - optional link for the caption text
    - optional position setting
        - left (float left and margin)
        - right (float right and margin)
        - center (margin-left/margin-right auto)
        * a class is assigned to <figure>, like caption-left, caption-right, caption-center, and the CSS for the positions is in the theme
    - optional max-width for image (otherwise the default image width)
5. after saving the form, the selected <img> is "wrapped" in a figure element
    - the width of the image is set as an inline style for max-width (this contains the figcaption)
Viewing 15 lines of 17 lines. View entire code block.

Example: caption created by plugin
<figure class="redactor-caption caption-left" style="max-width: 600px;">
    <img id="image-marker" src="http://localhost/concrete5/index.php/download_file/view_inline/105">
    <figcaption>Brownie cupcake with buttercream fudge frosting</figcaption>
</figure>

Example: theme CSS for caption
/*position left style*/
figure.caption-left  {
    float: left; 
    margin: 0px 20px 10px 0px;
}
.redactor-caption figcaption {
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-top: none;
    background-color: #eee;
}

I have attached screenshots of this example working.

I can look into making this plugin, but it would not be ready in time to meet your customer deadline.
alfredbrose replied on at Permalink Reply
alfredbrose
Well, this looks like a lot of effort for a small feature :) Thank you a lot for the detailed answer, I'll dig into it a bit later.

Regards,
Alfred
Kurtopsy replied on at Permalink Reply
Kurtopsy
Hi MrKDilkington,

Thanks for this well thought out and detailed answer.
MrKDilkington replied on at Permalink Reply
MrKDilkington
I have started working on an image caption plugin for Redactor.
alfredbrose replied on at Permalink Reply
alfredbrose
Hi MrKDilkington,

I wanted to try out writing a custom plugin and now I'm stuck at selecting the image. A simple click on an image activates the editing overlay with the edit button but does not select the image. Thus in the plugin code the return value of 
this.selection.getCurrent()
is empty. Actually selecting the image is quite tricky you must click and select it from a side, left or right until it gets blue overlay. I studied the Redactor API for about an hour or so but could not find an easy and proper way to get the "active" image in the plugin code.
Do you have any idea how this can be solved elegantly?

Alfred
MrKDilkington replied on at Permalink Reply 1 Attachment
MrKDilkington
@alfredbrose

As far as I know, Redactor does not provide a way to select an image.

To address this, I came up with a homemade "image selection" method. When you click an image, the image gets a class that adds a colored border and provides a JavaScript hook.

A side note, Redactor II was released last month. The makers of Redactor, Imperavi, removed all the Redactor I documentation, examples, plugins, and API information. They provided a list of deprecated methods, but this becomes an issue if you are still using Redactor I, as all site information is for Redactor II.
https://imperavi.com/redactor/docs/upgrading-to-redactor-ii/...

I was working on multiple Redactor plugins when Redactor II was released, including one in the PRB, this has caused me to stop development.

I am attaching a Redactor I plugin that you can use to see how I added "image selection".


There is very good news though. A packaged version of CKEditor that replaces Redactor is being developed now. It includes a very flexible image caption plugin.
https://github.com/ExchangeCore/Concrete5-CKEditor...
kevin001 replied on at Permalink Reply
kevin001
Alfred,

There are several galleries that can do what you want, if I'm understanding what your needs are.

Galleria Image Gallery
Gallery Block
Flash Gallery

These are free in the marketplace or you can search for something else that fits better.
alfredbrose replied on at Permalink Reply
alfredbrose
Hi Kevin,

I don't need a gallery with caption I need captions for the images which are part of the content redactor/editor. I sticked to the simple solution to let a javascript inspect all images in the content block and use their alt-tag-content as figcaption. It's a bit odd for the content readactor since he only sees the captions after saving the changes but my client is happy with this solution.

Alfred