TinyMCE Image Description

61 Posts

leemchildress Reply #1, 14 years, 4 months ago

I figured this would have been asked already, but I do not see a posting in the forum. I am using Revo 2.2 with TinyMCE editor installed. When a user includes an image in their document using the image button in TinyMCE and includes an image description, is there a way to include that description as the caption underneath the image?

☆ A M B ☆
326 Posts

aladage Reply #2, 14 years, 4 months ago

Although I'm thinking of a way this could be done in MODx, I've done something similar using nothing but JQuery. If your HTML looks something like this...

<div id="contentArea">
    <img path="path/to/image.jpg" alt="This is the image description." />
</div>

...your JQuery could be something like this (untested, but it should be close):

$(document).ready(function() {
    var imgDesc = $('#contentArea img').attr('alt');
    $('#contentArea img').wrap('<div class="imgContainer" />');
    $('.imgContainer').append('<p>' + imgDesc + '</p>');
});

If you decide you want something MODx-based, I'd follow the same basic premise as the JQuery method (iterating through the content, IDing each description as a variable and wrapping the images in containers), but use a plugin tied to the "onDocFormSave" event to do essentially the same find-and-replace technique. Let me know if you want to try it this way; I think I'd enjoy trying to figure out how to code it.

[ed. note: aladage last edited this post 14 years, 4 months ago.]

61 Posts

leemchildress Reply #3, 14 years, 4 months ago

I'm not concerned about the formatting of the content ... I just can't figure out how to get the content. I just need a tag that provides the image description. I suppose I could just find where it is stored in the db and write a query if nothing is readily available.

I like the jquery idea, but my problem is TinyMCE does not surround the image with a block tag. When a user places an image within the content using TinyMCE they can choose to float the image left or right. By tacking on a <p>caption</p> to the end of the image, that line will not follow the float since it will end at the image tag. It would be easier to write a script if the image was ALWAYS in the same location and there was always an image included, but neither is true. [ed. note: leemchildress last edited this post 14 years, 4 months ago.]

61 Posts

leemchildress Reply #4, 14 years, 4 months ago

I guess I could write a plugin which replaces each image tag with a wrap and includes the alt as a caption. Hmmm, may give that a shot.

5,888 Posts

Bruno17 Reply #5, 14 years, 4 months ago

Another way to add formated html-blocks to richtext-fields or textareas:

http://rtfm.modx.com/display/ADDON/MIGX.Fancybox-images+with+seperate+placeholders+in+Richtext-Content

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

☆ A M B ☆
326 Posts

aladage Reply #6, 14 years, 4 months ago

Sorry for the slow response; I didn't realize email notifications were down. What I was suggesting with JQuery does basically that, but a plugin could do it, too.

On a somewhat related note, I submitted an extra last week called ContentVampire (still waiting for approval) that does sort of what you're wanting. On resource save, it parses through the content field, finds all image and link tags, and saves them to a JSON string in a template variable. That way, you can work with richtext-added content just like you would if it had been added directly to the TV.

433 Posts

michelle84 Reply #7, 13 years ago

I have updated aladage's code. My code loops through all the images in the content container (in my case innerContainer) and shows an image caption only when there is one. Also it copies any inline CSS added to the image to the class of that image.

So, what you get is the following:

Will look like this on your site:

Code:

<script type="text/javascript">
$(document).ready(function() {
    $('.innerContent img').each(

    function() {
        if ($(this).attr('title')) {
            var imgDesc = $(this).attr('title');
            $(this).wrap('<div class="imgContainer" />');
            $(this).parent().append('<p>' + imgDesc + '</p>');

        var imgStyle = $(this).attr('style');
        $(this).removeAttr('style');
        $(this).parent().attr({
            style: imgStyle
        });
        var imgClass = $(this).attr('class');
        $(this).removeAttr('class');
        $(this).parent().addClass(imgClass);
		}
    });
});
</script>

Additionally CSS:

.imgContainer {
    display: inline-block;
    margin: 1em;
}

.imgContainer p {
    font-style: italic;
    font-size: 0.8em;
    margin-top: 1em;
    padding: 0.5em;
    background-color: #F1EADC;
}

img.justifyright, div.justifyright {
    float: right;
    margin: 0 0 1em 1em;
}
img.justifyleft, div.justifyleft {
    float: left;
    margin: 0 1em 1em 0;
}
img.justifycenter, div.justifycenter {
    float: none;
    margin: 1em;
}

[ed. note: michelle84 last edited this post 13 years ago.]

http://www.vierkante-meter.nl