image alignment not working as expected

[jturmelle]

How can this bug be reproduced?

1. Create a post. Insert an image, with a caption, and align center

What did you expect to happen?
I expected the figure and image to be centered and the caption to be the same width of the image, which is what happens in the preview.

What happened instead?
Image is left-aligned with caption spanning the whole line.

Please List the Following:

• OS & version: CentOS 7.3.1611
• Node version (node -v) [Node v4+ is required] : v6.9.4
• FoundationPress version (see line 3 in package.json): v2.10.4
• Foundation version (found in node_modules/foundation-sites/package.json) : 6.4.3

Sorry, I'm not sure how to do this properly within a codepen or jsfiddle, since it depends a lot on the combination of wordpress and foundationpress.

[JPOak]

This is sort of interesting. This looks like it has to do with the filter "img_caption_shortcode" in cleanup.php . On line 25 if you comment out this line your images will probably work as expected.

@colin-marshall @olefredrik Is this needed anymore? The function attached to it looks old.

[colin-marshall]

@JPOak the purpose of that filter is to:

// Remove inline width attribute from figure tag causing images wider than 100% of its container

Did you test this with the filter removed and images that are wider than the container?

[JPOak]

@colin-marshall I am not seeing any difference when I add an image of 2000px to the default FP template for a page. The _global for images is set to max-width: 100% . I'm just wondering if this stuff needs these function overrides now.

[colin-marshall]

If images larger than the container are staying 100% width of the container with that filter removed then I see no problem with removing the filter. It serves no other purpose that I can tell.

[JPOak]

@jturmelle if you get a chance just comment out the line I mention above. It won't destroy anything, but I think it will fix your problem. Let us know. I tested with theme testing data and it looks fine.

[jturmelle]

Thanks a lot, that did fix the caption, but the image still doesn’t center, or is that just me? This is the figure code generated: <figure id="attachment_19313" style="max-width: 300px" class="wp-caption aligncenter”> <a href="http://glacierhub.org/wp-content/uploads/2018/01/P1130817.jpg" target="_blank" rel="noopener”> <img class="wp-image-19313 size-medium" src="http://glacierhub.org/wp-content/uploads/2018/01/P1130817-300x200.jpg" alt="" width="300" height="200" srcset="http://glacierhub-dev.iri.columbia.edu/wp-content/uploads/2018/01/P1130817-300x200.jpg 300w, http://glacierhub-dev.iri.columbia.edu/wp-content/uploads/2018/01/P1130817-768x512.jpg 768w, http://glacierhub-dev.iri.columbia.edu/wp-content/uploads/2018/01/P1130817-638x425.jpg 638w, http://glacierhub-dev.iri.columbia.edu/wp-content/uploads/2018/01/P1130817-1116x744.jpg 1116w, http://glacierhub-dev.iri.columbia.edu/wp-content/uploads/2018/01/P1130817-806x537.jpg 806w, http://glacierhub-dev.iri.columbia.edu/wp-content/uploads/2018/01/P1130817-558x372.jpg 558w, http://glacierhub-dev.iri.columbia.edu/wp-content/uploads/2018/01/P1130817-655x437.jpg 655w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 300px”> </a> <figcaption class="wp-caption-text">The view out Diane Davis’ kitchen window on June 23, 2017 (Source: Diane Davis/<a href="https://www.facebook.com/groups/NewfoundlandIcebergReports/about/" target="_blank" rel="noopener">Newfoundland Iceberg Reports</a>).</figcaption> </figure> I have this site walled off, but I’m happy to open it or send you the login if you want to look at it in person.

[colin-marshall]

@jturmelle did you try to debug with the inspector?

[jturmelle]

Sorry, I screwed with the SCSS trying to fix it. I’m reverting my changes now. I’m pretty sure that’s the remaining problem. Jeff Turmelle International Research Institute for Climate and Society The Earth Institute at Columbia University

…

On Feb 26, 2018, at 9:21 PM, Colin Marshall ***@***.***> wrote: @jturmelle <https://github.com/jturmelle> did you try to debug with the inspector? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1237 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFMW0EQ1-oab4v84NWxYpfIRjHtYkwrYks5tY2aQgaJpZM4ST-v_>.

[jturmelle]

Looks like its working now. I checked out _wp_overrides.scss to overwrite my changes and it is working again. Thanks very much for your quick help with this! Jeff

…

On Feb 26, 2018, at 9:21 PM, Colin Marshall ***@***.***> wrote: @jturmelle <https://github.com/jturmelle> did you try to debug with the inspector? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1237 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFMW0EQ1-oab4v84NWxYpfIRjHtYkwrYks5tY2aQgaJpZM4ST-v_>.

[pyrodie18]

Is this closed out now @colin-marshall ?

[colin-marshall]

Yup. Thanks.