删除图像和标题的尺寸属性


9

这个问题是关于从图像中删除尺寸属性的讨论的分支。该线程上提供的解决方案代码工作得很好,除了它有一个不幸的副作用,即任何[caption]短代码都从图像中剥离。

经过几个小时的核心代码挖掘,我找到了造成这种情况的原因。wpeditimage TinyMCE插件,负责添加[caption]简码,以检查简码和img标记中的宽度属性。如果找不到它们,则只需删除标题。由于这是使用TinyMCE编辑器中的javascript“即时”完成的,所以我想不出任何类型的WordPress过滤器都可以解决此问题。但是,我很高兴被证明是错误的。:)

最后一点,我的临时解决方案是使用以下jQuery剥离客户端所有有害标签。结合使用过滤器img_caption_shortcode以防止在此处使用宽度样式,似乎可以完成这项工作。这不漂亮,但现在是创可贴。有人有更好的主意吗?

// Strip width and height attributes from img, video, and object in the main article so we can have fluid images
var $fluid_items = $('.main-article-wrapper').find('img,video,object');
$fluid_items.removeAttr('width');
$fluid_items.removeAttr('height');

嗯...能够使用可视编辑器吗?如果仅使用HTML编辑器,则img_caption_shortcode上的过滤器可以正常工作……
goldenapples

@goldenapples,是的,我不想失去视觉编辑器,因为我将让非技术人员来编辑该站点。(还是)感谢你的建议。还有其他想法吗?
Dominic P

Dominic,您可以提供“在img_caption_shortcode上使用过滤器以防止在其中使用宽度样式”的代码吗?这正是我所需要的,但是我不知道如何编写该过滤器。

@Wendy,嗯,我无法在评论中粘贴整个内容。如果您想问另一个问题并给我链接,我将其发布为答案。
Dominic P

如果您不想经历所有这些,我基本上只是修改了Codex示例
Dominic P

Answers:


18

这可能不是您想要的确切答案,但是我认为我刚刚找到了一个很好的解决方法。

Iv从二十一个主题CSS(灵敏的imho)中获取了以下代码:

/* Images */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width >attributes are scaled correctly */
}
img.size-full {
    max-width: 97.5%;
    width: auto; /* Prevent stretching of full-size images with height and >>width attributes in IE8 */
}

这足以使所有图像都具有响应性(至少是嵌入在内容中的图像...)现在我具有响应性图像,但是当使用标题时,我仍然遇到相同的问题,这是因为tinyMCE向带有图像宽度的标题容器。要解决此问题,我需要将其添加到CSS中:

            .wp-caption { max-width: 100%; }

做完了!对我来说效果很好,尽管它可能不适用于精选图片。

我希望这可以帮助别人 :-)


我还没有时间进行充分的测试,但是已经证明它在其他领域很有用。谢谢您的帮助。
Dominic P'2

我的荣幸:-)
塔尔巴兹(Talbatz)2012年

在IE9中对其进行了测试,似乎无法正常工作!
Kuldeep Daftary

这与旧的IE浏览器冲突
Tosh 2014年

真的很棒的解决方案!thx
emjay
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.