Pinterest posts not using description, etc.

Hi @mimetic,

I’ll take a look into adding the ‘caption’ option as the image description. If everything goes as expected, it’ll be available in the next version of the plugin. I’ll get back to you in this topic.

Hi @mimetic,

the newest (0.34) version of the plugin allows you to use the caption as the description. Please test it out and let me know!

No joy. I’m showing the pictures in a ‘mosaic’ using the JetPack gallery; perhaps that where the problem lies?

The pop-up window does work, but it still shows the picture’s title, not caption.

The javascript refers to the picture’s caption, so that’s the right script (not an older, cached script).

However, the caption info is in the HTML code —?that worked.

<img data-attachment-id="342" data-orig-file="https://f3d2f3313d45b3a6cec5-9cccc87e0594dcb7d2bd367a3d3ec10d.r41.cf1.rackcdn.com/wp-content/uploads/2014/02/131217-dg-174703.jpg" data-orig-size="768,1024" data-comments-opened="1" data-image-meta="{"aperture":"3.5","credit":"David I. Gross","camera":"E-M5","caption":"Syrian refugee child at a the Free Syria school.","created_timestamp":"1387253196","copyright":"Copyright \u00a9 David I. Gross","focal_length":"45","iso":"200","shutter_speed":"0.005","title":"Syrian Refugee Child"}" data-image-title="Ghaidaa’" data-image-description="<p>Syrian refugee child at a the Free Syria school.</p> " data-medium-file="https://f3d2f3313d45b3a6cec5-9cccc87e0594dcb7d2bd367a3d3ec10d.r41.cf1.rackcdn.com/wp-content/uploads/2014/02/131217-dg-174703-225x300.jpg" data-large-file="https://f3d2f3313d45b3a6cec5-9cccc87e0594dcb7d2bd367a3d3ec10d.r41.cf1.rackcdn.com/wp-content/uploads/2014/02/131217-dg-174703.jpg" src="https://i2.wp.com/insideoutsideproject.org/wp-content/uploads/2014/02/131217-dg-174703.jpg?resize=326%2C435" data-original-width="326" data-original-height="435" title="Ghaidaa'" alt="" style="width: 319px; height: 426px;" data-recalc-dims="1">

Here’s the short codes from my page (not post!).

[gallery link="none" type="rectangular" ids="618,617,616,348,347,346,345,344,343,342,341" orderby="rand"]

Here’s the offending page:
https://insideoutsideproject.org/mosaic

I can confirm that a picture which is inserted into a page works fine. That is, a picture NOT in a gallery, but directly inserted into the page text area works.

The attribute “data-frizzlyimagecaption” does appear in the image inserted into the page.

“data-frizzlyimagecaption” does NOT appear as an attribute of an image in a tiled gallery, using Jetpack gallery. So, I figure Frizzly isn’t correctly marking images coming out of the Jetpack gallery.

However, rather than worry about that (a slower method anyway), it turns out the data is there, ready to to use!

Regarding getting values:
If Frizzly were to use the “data-image-meta”, the ‘caption’ info from the original, imported image is there. Not good, since I can’t change it in WordPress.

If Frizzly were to use the “data-image-description” attribute,?it could get the description from that, as simple HTML (i.e. strong, italic, etc). This seems the best way to go.

There is also the div just following the image, of class=”tiled-gallery-caption”. That contains the WordPress caption. However, not sure that’s a reliable source, might disappear or move?

Here is a fix to the javascript at line 413 of frizzly.js. Note, I had to use frizzly.min.js, and unpack, so your line number may vary.

I have changed where “frizzly.attr.imageDescription” gets its data to include “data-image-description”.

Not elegant at all, esp. the removal of the HTML from the description.

return h.url = f(e), h.imageAttributes.src = l(e), h.imageAttributes.alt = e.attr("alt"), h.imageAttributes.title = e.attr("title"), h.imageAttributes.description = ( e.attr(frizzly.attr.imageDescription) ? e.attr(frizzly.attr.imageDescription) : e.attr("data-image-description").replace('<p>', '').replace('</p>', '').replace('<br />', '\n')), h.imageAttributes.caption = e.attr(frizzly.attr.imageCaption), h.articleAttributes.title = g(e), frizzly.buttons.handleClick(c, h);

I guess Frizzly doesn’t pick add the caption to the images from the gallery because the gallery shortcode is turned into html after Frizzly adds attributes to images. Not that great.

I will try to figure out a good way to allow you to use the attribute you already have without modifying the plugin itself. I guess it’ll be another setting in the custom JS settings.

Perhaps one could use a short Javascript loop, basically the JS code I modified, entered in the custom JS area? Not sure how that works.

I can see a benefit to being able to handle the “standard” Jetpack galleries. As a coder, I can also understand how damned annoying it is to have to do something special like that.

This works:
In assets/frizzly.js:

function q() {
            var b = a(this),
                c = b.attr(frizzly.attr.type),
                d = b.parent(String.format("div.{0}", frizzly.cssClass.container)).attr(t.index),
                e = a(String.format('[{0}="{1}"]', t.index, d)),
                h = new frizzly.baseClasses.ClickHandlerArg;

            return h.url = f(e), h.imageAttributes.src = l(e), h.imageAttributes.alt = e.attr("alt"), h.imageAttributes.title = e.attr("title"), h.imageAttributes.description = ( e.attr(frizzly.attr.imageDescription) ? e.attr(frizzly.attr.imageDescription) : e.attr("data-image-description").replace('<p>', '').replace('</p>', '').replace('<br />', '\n')), h.imageAttributes.caption = e.attr(frizzly.attr.imageCaption), h.articleAttributes.title = g(e), frizzly.buttons.handleClick(c, h);
/*
            return h.url = f(e), h.imageAttributes.src = l(e), h.imageAttributes.alt = e.attr("alt"), h.imageAttributes.title = e.attr("title"), h.imageAttributes.description = e.attr(frizzly.attr.imageDescription), h.imageAttributes.caption = e.attr(frizzly.attr.imageCaption), h.articleAttributes.title = g(e), frizzly.buttons.handleClick(c, h)
*/
        }