Caption alignment images

  • Chris

    (@christianmuellerdhv)


    2 years, 4 months ago

    Hi,

    in TT3 the alignment of image-caption is not working, when images are inside design-blocks, please look the example here:

    https://spielwiese6.hanfverband-dev.de/align-image-description

    Both images should align center, but the caption from the image inside a row or group is not behaving the same way, as long as you try to define the alignment inside the row. When I copy the image to another level of this page without a designblock around, I can change the alignment und paste the image back to the row, than it’s working. So this is the workarround.

    But it general: image and caption should align the same way.

    Best regards

    Chris

Viewing 9 replies - 1 through 9 (of 9 total)
  • Felipe Velzani

    (@felipevelzani)

    2 years, 4 months ago

    Hi @christianmuellerdhv,

    I couldn’t reproduce it. That’s how it shows from my end:

    https://d.pr/i/EYmvwG
    Full Size: https://d.pr/i/EYmvwG

    Could you please copy/paste the code here, so I can try to reproduce?

    Thread Starter Chris

    (@christianmuellerdhv)

    2 years, 4 months ago

    Hi Felipe,

    in your Screen I cannot see the alignment of the image, because it seem’s to be full wide. For reproducing my problem please make the second image inside the row smaller and check, that the alignment of the row is “center”, like in my code below:

    <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:image {"id":49,"width":"279px","height":"auto","aspectRatio":"2.8764044943820224","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://spielwiese6.hanfverband-dev.de/wp-content/uploads/2023/10/Canada-flag-header-1-80p-1024x356.jpg" alt="" class="wp-image-49" style="aspect-ratio:2.8764044943820224;width:279px;height:auto"/><figcaption class="wp-element-caption">Caption B</figcaption></figure>

    Hope this helps to reproduce…

    Regards

    Chris

    Felipe Velzani

    (@felipevelzani)

    2 years, 4 months ago

    Hi @christianmuellerdhv,

    It still shows in the same way for me. I believe this is the default design with Twenty Twenty-Three — this would only show differently if you are using a child theme or something like that.

    https://d.pr/i/nWtihy
    Full Size: https://d.pr/i/nWtihy

    If you want, you can try to see how it works from this code that I generated here:

    <!-- wp:image {"id":171,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wptest-multisite.mystagingwebsite.com/base-site/wp-content/uploads/sites/8/2023/08/4919c4c9-9033-342f-909f-a75a11685610-1024x682.jpg" alt="" class="wp-image-171"/><figcaption class="wp-element-caption">This is my caption.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":171,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wptest-multisite.mystagingwebsite.com/base-site/wp-content/uploads/sites/8/2023/08/4919c4c9-9033-342f-909f-a75a11685610-1024x682.jpg" alt="" class="wp-image-171"/><figcaption class="wp-element-caption">This is my caption.</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":170,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wptest-multisite.mystagingwebsite.com/base-site/wp-content/uploads/sites/8/2023/08/bedb708b-aff6-32e1-85a0-d32d3bf0636b-1024x682.jpg" alt="" class="wp-image-170"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

    If even that doesn’t work, can you try to reproduce the same issue with a brand-new installation (without other plugins/themes) and using Twenty Twenty-Three?

    Thread Starter Chris

    (@christianmuellerdhv)

    2 years, 4 months ago

    Hi Felipe,

    we are coming clother, please check the same again in a row, inside columns it is also working for me. Please check again

    https://spielwiese6.hanfverband-dev.de/align-image-description

    wich is a clean install with no plugins and tt3 as a parent….

    Best regards

    Chris

    Felipe Velzani

    (@felipevelzani)

    2 years, 4 months ago

    Hi @christianmuellerdhv,

    Just got to check this now.

    I’m not sure if you already have a solution, but as you’re saying that TT3 is the parent theme, it makes me wonder how it goes if you activate it without the child theme. Can you try that?

    Oddly, I can’t really reproduce your issue.

    All of these show in the left for me.

    Thread Starter Chris

    (@christianmuellerdhv)

    2 years, 3 months ago

    Hi Felipe,

    no solution, just the workaround described above. What do you mean by “activating it without the child theme”, deleting the child-theme? No change. All my problems happens in a child theme, but before I write something here in the Forum I test it on a DEV-instance which is clean, no Plugins, no custom CSS and using TT3 only.

    I just upgraded to WP 6.4 and tried the same with the new TT4 – same problem with image-description of images in rows…

    Best regards

    Chris

    Felipe Velzani

    (@felipevelzani)

    2 years, 3 months ago

    @christianmuellerdhv could you please write steps for reproducing in case I’m missing something here?

    For instance, something like that:

    1. I go Site Editor, then […]
    2. There I add the block […]
    3. Add caption and reproduce the issue.
    Thread Starter Chris

    (@christianmuellerdhv)

    2 years, 3 months ago

    Hi Felipe,

    1. Create a row
    2. Put an image in
    3. Create a caption for the image
    4. Align the image centered

    The same Image not inside a design-container or inside a column the caption get’s aligned the same way as the image. But inside a row the caption is allways aligned “left”…

    best regards

    Chris

    Felipe Velzani

    (@felipevelzani)

    2 years, 3 months ago

    Hi there,

    Yes, I see your point now.

    That’s actually expected — I asked for more details because I saw that it was aligned for you in some cases.

    There are discussions about this here, so you can follow/comment for more details: https://github.com/WordPress/gutenberg/issues/19975

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Caption alignment images’ is closed to new replies.

Tags