Photos Alignment Problem After Changing Theme

  • Unknown's avatar
    qingmoments · Member ·

    Hello WordPress, anyone there?
    I have changed the theme of my blog to the new Twenty Sixteen last week but I realised that after the change, all the photos inserted in my previous postings are now out of alignment (i.e. different from what I original posted ie centrally aligned). How can I get back to the original alignment? It would be impossible for me to adjust them one by one. Thanks and hope to have a solution to it.

    The blog I need help with is: (visible only to logged in users)

  • kathrynwp · Staff ·

    Could you please link to a few example posts and explain specifically what the problem is with the image alignment? I’ll have a look.

  • Unknown's avatar
    qingmoments · Member ·

    Hi Kathryn,

    Thanks for responding. Just take this posting below for example. All the photos inserted in this posting were centrally aligned as I always do so. However, while the first photo was not obvious, you can see that the second photo is now aligned to the left.

    HAZE HAZE GO AWAY!

    I have another question, is there a limit to the width for the photos inserted. It seems that the alignment of photos of smaller width size in my much older postings were not affected.

    Thanks.

  • kathrynwp · Staff ·

    It looks like you’re not using the image alignment tool on the image itself, which is the correct way to center images reliably. After inserting the image, click it again until the formatting toolbar appears. Then select the “align center” icon.

    Screenshot: https://cloudup.com/cJArx2JwOFb

    If you flip to HTML, the code should look something like this:

    <img class=" size-full wp-image-3179 aligncenter" src="https://xxxxx.files.wordpress.com/2015/11/my-image.png" alt="my alt text" width="250" height="250" />

    The aligncenter class is needed on images in order to center them reliably in every theme. Your images are missing that class and are instead wrapped in a paragraph tag, as in the example image you pointed out:

    <p style="text-align:center;">
<a href="https://qingmoments.files.wordpress.com/2015/09/haze2.jpg">
<img class="alignnone size-full wp-image-9582" alt="" src="https://qingmoments.files.wordpress.com/2015/09/haze2.jpg?w=840">
</a>
</p>

    If you change alignnone to aligncenter in HTML view your image will pop back to the centre. Right now “alignnone” overrides “text-align:center;” because it’s closer to the image within the code, which is how “CSS specificity” works – the closer the CSS to the HTML element, the more it overrides any other CSS applying to that element.

    You do have some posts where “aligncenter” was used on the images – and you can see the images centered correctly, like this one:

    TENDON GINZA ITSUKI

    I have another question, is there a limit to the width for the photos inserted. It seems that the alignment of photos of smaller width size in my much older postings were not affected.

    The width of the main column is 840px. Larger images will be automatically made smaller fit this size.

  • Unknown's avatar
    qingmoments · Member ·

    Hi Kathryn,

    Thanks for you detailed explanation.

    As I have already mentioned in my previous note, I aligned on my photos to centre, for every posting from the first one many years ago.

    So, what I do not understand is why photos in more recent postings were all automatically aligned to the left after I changed the theme. Another example here.

    https://qingmoments.wordpress.com/2015/08/

    However, for older postings, my photos’ positioning is intact, i.e. remain in centre. See this posting below.

    BAKER’S APPRENTICE @ WORK

    The only difference I could see is that in old posting, the width size of my photos were smaller than those in newer postings. Does this make a difference?

    So, I don’t think I have got the answer to my question.

    Appreciate further clarifications. Thanks and have a nice day.

  • kathrynwp · Staff ·

    However, for older postings, my photos’ positioning is intact, i.e. remain in centre. See this posting below.

    BAKER’S APPRENTICE @ WORK

    The reason that post’s images are centered is that they have the aligncenter class on each image:

    <img class="aligncenter size-full wp-image-270" alt="" src="https://qingmoments.files.wordpress.com/2008/05/raisins-buns.jpg?w=840">

    <img class="aligncenter size-full wp-image-271" alt="" src="https://qingmoments.files.wordpress.com/2008/05/sesameandpumpkinseeds.jpg?w=840">

    That class is what reliably centres the image everywhere.

  • The topic ‘Photos Alignment Problem After Changing Theme’ is closed to new replies.