• Resolved Kaetrin

    (@kaetrin)


    Since the upgrade to 3.9 I can’t centre an image in a post. Before, I’d just choose centre and then add in a 10 pixel gap in the advanced editor and that worked but that option has gone since the upgrade.
    I’ve installed the Advanced Image Styles plugin but that doesn’t seem to be fixing the problem. No matter what it looks like in the editor, when I preview the post, the picture is left aligned. How do I centre a) one image and b) multiple images now?
    thx
    Kaetrin

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator Samuel Wood (Otto)

    (@otto42)

    www.ads-software.com Admin

    When you hover over an image in the editor, the edit icon should appear in the upper left. Click that and get the image modal like this:

    Cloudup 3tx1toeqwp0

    There’s an Center button there, next to Align. Click it then click Update.

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.ads-software.com Admin

    Additionally: Looking at your centered items on your page at https://www.kaetrinsmusings.com/

    It doesn’t appear that you actually need those 10px margins. The stylesheet already specifies 5 pixels of side margins on those centered images, but there’s nothing beside those images to require them to have margins anyway, as they’re simple page centered. The left/right margins here don’t matter since there’s nothing next to them for the margins to affect.

    Thread Starter Kaetrin

    (@kaetrin)

    You’d think that would work wouldn’t you? Just clicking on “center align” but it doesn’t.

    The items previously centred were using the previous iteration of WordPress. I can’t work out how to center align in the new version so that the picture shows correctly live. I don’t know why the old way worked, it just did. But that option isn’t open to me anymore.

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.ads-software.com Admin

    Well, it does work for me. And looking at your site that I posted above (assuming that’s the site you’re talking about), then it will work there too. The aligncenter class is properly set, and so on.

    Maybe if you describe the problem better, I’ll be able to give better answers? What about it is not working, exactly?

    Thread Starter Kaetrin

    (@kaetrin)

    I’m sorry, I’m trying to find images of what the advanced image editor looked like before so I can be exact about what I used to do. No luck so far.

    I just tried it again but this time I put an extra return in between the top paragraph and the picture. Why it should make a difference I don’t know.

    This is what shows in the html page

    <p style="text-align: justify;">I'm at Dear Author today reviewing <a href="https://wp.me/p1GTGj-fKB">Bad Influence by KA Mitchell</a>.  I had some trouble with the central relationship but YMMV.</p>
    <p style="text-align: center;"><a href="https://www.kaetrinsmusings.com/wp-content/uploads/2014/04/Bad-Influence.jpg"><img class="aligncenter size-medium wp-image-3700" src="https://www.kaetrinsmusings.com/wp-content/uploads/2014/04/Bad-Influence-200x300.jpg" alt="Bad Influence" width="200" height="300" /></a></p>

    Is there anything special I need to do if I have a series of images that I want to all be on one line but centred across the page?

    Thread Starter Kaetrin

    (@kaetrin)

    okay, have found an image of the way it looked before.
    https://mbrsolution.com/wordpress-2/latest-wordpress-changes-image-editing.php

    If you go to the link and scrooll down to step 3 that’s the picture I mean.

    I used to add in 10 in the “Image Properties” “Horizontal Space” and that used to fix all my dramas.

    That option has gone now.

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.ads-software.com Admin

    Well, it’s hard to say without more info here. Seeing a live post displaying the problem would help. Just giving HTML only gives a limited view of the situation, it’s the underlying theme’s CSS that does the actual centering.

    The image you have in that example there has the “aligncenter” class on it, so it should center on the page. However, you have it wrapped in a paragraph, so that might limit it in some way.

    Thread Starter Kaetrin

    (@kaetrin)

    Thx for your help. I know it sounds like a simple thing I’m not doing but I can’t make sense of it. I think it must have something to do with the paragraph break but I’m a little baffled as to why another one would make any difference.

    Thread Starter Kaetrin

    (@kaetrin)

    FYI I posted in the theme support forum and this is what the theme author said:

    “There are some things with the new WP 3.9 that is creating some issues for a lot of people (WP related) but this one is something I need to fix relating to images in general. There is CSS that is making the img tag display as a block but it looks like it needs to be done as:

    img (display: inline-block;)

    I will have to do an update for the theme.”

    So, that answers the question. Thank you for your help. I thought I’d post here to close the loop.

    I’m adding to this because I’ve been having the same problem when I try to center using the WordPress image module. I use a Genesis theme.

    The thing I found that helped was taking the style out of the image tag (which is what happens when you use the WP function) and manually add a centered paragraph tag around the image: <p style=”text-align: center;”>
    Fixed in this post: https://www.everintransit.com/round-the-world-dinner-party/ and NOT fixed in this one — see the vertical images are not centered, though the wordpress code says they should be: https://www.everintransit.com/sendai-date-busho-tai/

    It’s annoying that I have to go in and do this manually, I hope it is fixed soon!

    I just updated WordPress and now I can’t get one photo to center. Frustrating. Any idea when this bug will get fixed? I am at https://www.myislandbistrokitchen.com

    Thread Starter Kaetrin

    (@kaetrin)

    For me, the problem was a clash between the WP upgrade and my theme. I’m using a work around for the time being. Its only a little bit of a faff.
    Use the following code in the text editor:

    <p style=”text-align: center;”>
    and add a </p> after the HTML for the image

    If you have more than one image put the </p> after the final image.

    It’s been working for me. Hope that’s helpful to you. ??

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Centring images in blog posts’ is closed to new replies.