Image centering using class not working

  • Haldan

    (@hblecher)


    3 years ago

    I think Tove is falling victim to this known problem that seems to occur with some FSE themes:

    https://github.com/Automattic/wp-calypso/issues/28756

    In order to center an image in a post, I can’t just use the standard method of image centering (ie., using simple class tags autopopulated by the wordpress classic editor). The only way I can get an image to center is by using the gutenberg post editor, which is much slower than using the classic editor for most purposes, and cumbersome when you don’t need it. It inserts the following code instead of the standard html that the classic editor generates:

    <!-- wp:image {"align":"center","id":947,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><img src="URL" alt="" class="wp-image-947"/></figure></div>
<!-- /wp:image -->

    The other problem with using this code (which I can just keep handy and insert directly into the classic editor), is that then I am forced to use additional html throughout the post, such as manually inserting <p> tags, otherwise the rest of the content goes all wonky, and ends up not respecting Tove’s margins.

    This isn’t a problem if the image is big enough to fill the whole container, but for smaller images, it can be annoying.

    Is this something that can be corrected in Tove? The folks at the gutenberg repository seem to think this problem occurs because of theme problems, not gutenberg problems (though I can’t speak to the veracity of that conclusion).

    • This topic was modified 3 years ago by Haldan.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @hblecher,

    I’m not sure I understand your question – are you using Tove with the Classic Editor? Because Tove is built entirely around Full Site Editing (which uses the block editor), that will cause some issues. The GitHub issue you link to doesn’t seem to be about FSE themes specifically (it was created before FSE was included in Gutenberg, and the themes mentioned in the comments are classic themes).

    — Anders

    Thread Starter Haldan

    (@hblecher)

    Hi @anlino —

    I of course am using the block editor to design and edit the site itself, and to create templates, pages, etc. But for standard blog posts, I often use the classic editor, since it’s much faster for simple things.

    You’re right, I misunderstood the context of that github thread, but the issue remains: when using standard image centering in the classic editor, Tove does not seem to respect the request to aligncenter — is there anything I can do to get Tove to do so, short of using the code above? Basically, most things function just fine in the classic editor, but for some reason images wont center unless I use the above code generated by the block editor.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image centering using class not working’ is closed to new replies.