如何让古腾堡的形象浮出水面

时间:2019-01-25 作者:Muskie

我正试图在古腾堡发表我的第一篇文章,我发现在编辑器中,将图像围绕块对齐是可行的,但当我预览时,图像并没有向右浮动。

之前,我为img提供了css。alignright现在alignright类应用于地物标记,因此我更新了我的样式。css和它仍然不起作用。我甚至插入了自定义html,如下所示:

<img class="alignright" src="http://blah.com/image.jpg" />
但当我在预览中查看源代码时,这并没有起作用,它应该像古腾堡之前一样。我需要添加一些主题支持吗?我也在搜索时拍下了屏幕截图,其他人也有类似的问题,但我听从了他们的建议,没有任何帮助。我还发现你不能从古腾堡的相对URL插入图像。我无法直接链接到预览,所以我不得不publish a post 在一个显然还没有为古腾堡做好准备的主题中,但显然我20多年的HTML编码不足以解决这个问题,因为很明显,我最近一直在做编码以外的其他事情。Image in Gutenberg

Image previewed in Safari

CSS rules for the image as custom HTML block

1 个回复
最合适的回答,由SO网友:Frank P. Walentynowicz 整理而成

可以使用两种方法:

方法1添加Classic 块,并将右对齐的图像作为唯一元素插入到该块中。在Classic

方法2添加Image 阻止,然后添加alignright 类,在该块的高级设置中。遵循这个原则Image 被其他块阻挡。

我还发现你不能从古腾堡的相对URL插入图像。

媒体库始终提供图像的完整URL。插入图像后,从视觉编辑器切换到代码编辑器,然后编辑src 的属性img 元素使用相对URL。