Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Craig

    (@catholicservant)

    UPDATE: Looks like everything works fine except when an image caption exists.

    Any suggestions?

    Thanks!

    Thread Starter Craig

    (@catholicservant)

    UPDATE #2: Getting closer, I think the issue is mostly CSS related at this point. Possibly related to the img tag being replaced by the figure tag.

    I added this CSS my @media to make my img captions responsive:

    ?	.wp-caption {
    	max-width: 96% !important;
    	width: auto !important;
    	margin-bottom: 25px !important;
    	}
    Thread Starter Craig

    (@catholicservant)

    UPDATE #3: From what I can tell, CSS may not be able to solve this correctly.

    The reason the image is getting centered in the screenshot (https://www.dropbox.com/s/dx6gomo006sw21b/Screenshot%202014-06-04%2010.25.49.png) is because the caption text area isn’t ‘sized’ to the image any more. My guess is that the caption shortcode is looking to an img tag to determine how wide it should be and how to wrap lines. Since the figure replaces the img tag, the caption text just goes as wide as possible.

    To test my theory, I changed my .wp-caption p.wp-caption-text width to 50% and the width was reduced and the image retained its alignright properties.

    Problem is that the image size varies considerably in client’s content, so I cannot set a specific width (e.g. 300px or 75%) on my caption text.

    At this point, I’m stumped. Any suggestions are welcome!

    same problem occurs on my blog
    Images with Hammy cannot be centred.

    Plugin Author Noel Tock

    (@noel_tock)

    Hey there, live example somewhere? Cheers!

    Eaxmple:

    https://tangrufus.com/wordpress-plugin-boilerplate-tutorial-getting-started/

    See the image with cation WordPress Plugin Boilerplate with Default Menu Text

    Thanks Noel!

    Hi, the image captions are not being centered is due to the width on .wp-caption being removed in hammy.js. Without the width style, the margin-left: auto; margin-right: auto; from the .aligncenter class no longer work.

    What you could do to work around this is add:

    .aligncenter .hammy-responsive, .wp-caption-text {
    	text-align: center;
    };

    However, you can no longer add a background color to surround the image and caption. Otherwise you will get the same result as Craig’s screenshot where the entire row has a bg color.

    A suggestion to make the caption bg color and centering to work is, instead of removing the width on .wp-caption, perhaps set it to a max-width value?

    Image caption with aligncenter class without Hammy (scroll down to “Look at 580×300 getting some caption love.”):
    https://wpthemetestdata.wordpress.com/2013/01/10/markup-image-alignment/

    Image caption with aligncenter class with Hammy:
    https://testingwpe.wpengine.com/image-alignment/

    Any news on this? I’m having the same issue

    +1

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Images losing alignment’ is closed to new replies.