如何在 Tumblr 的文字帖子中使用高分辨率照片？

Question

我正在尝试在 Tumblr 文本帖子中使用高分辨率。 当我将照片上传到文本帖子中时，Tumblr 会将其大小调整为 500 像素

显示的图像：

<img src="http://41.media.tumblr.com/d8ceea903cb5cd667e416877bf4a8a70/tumblr_inline_nxihvl2VdX1r5y5rv_500.jpg" alt="image" data-orig-width="2640" data-orig-height="3960" width="500" height="750">

如果我将 500 更改为 data-orig-width 值不会给我原始图像，但我只想要一个 1280 图像。如果我将 500 更改为 1280，它会给我一个 1280 的图像

500px：http://41.media.tumblr.com/d8ceea903cb5cd667e416877bf4a8a70/tumblr_inline_nxihvl2VdX1r5y5rv_500.jpg

1280px：http://41.media.tumblr.com/d8ceea903cb5cd667e416877bf4a8a70/tumblr_inline_nxihvl2VdX1r5y5rv_1280.jpg

我尝试将图像的属性从 500 更改为 1280 并且它有效，但只有当帖子包含一个上传的图像时，它才不会更改使用 html 编辑器发布的图像。如果帖子中包含从编辑器上传的 2 张图片，则 jQuery 代码将显示两次 1280 中的第一张图片，但不会显示第二张图片。

jQuery 代码：

//Retrieve image src path
var img_url = $('.tmblr-full img').attr("src");
//Retrieve the width at which the image is displayed, 500px
var normal_width = parseInt($('.tmblr-full img').attr("width"));
//Replace 500px with the original image width or 1280
var new_url = img_url.replace(normal_width, 1280);
//Assign new widths to the src and to the width attributes
$(".tmblr-full img").attr( "width", 1280);
$(".tmblr-full img").attr( "src", new_url);

我尝试过改变

var img_url = $('.tmblr-full img').attr("src");

到

var img_url = $(this).find('.tmblr-full img').attr("src");

但它什么也没做

Answer 1

使用{block:Posts inlineMediaWidth="1280"} 和{/block:Posts} 代替{block:Posts} 和{/block:Posts} 在文本帖子正文和其他帖子的标题中获取“1280 像素”宽的图像（如果可用）。您设置的宽度也会影响视频等内容。

您的代码不适用于通过“HTML”编辑器添加的内联图像的原因；很可能是因为 tmblr-full 类只提供给包含通过“富文本”编辑器上传的图像的 figure，Tumblr 会这样做。

注意：您没有发布帖子的完整 HTML。在这里，我假设您尝试使用 jQuery 的原因是因为您不知道我刚才所说的内容。

Tumblr Theme Documentation

Answer 2

好的，我想我有一些工作（虽然它有点老套）。

我正在使用这个功能：

var fullImg = $('.post img');
fullImg.each(function(){
    var img_url = $(this).attr("src");
    var normal_width = parseInt($(this).attr("width"));
    var new_url = img_url.replace(400, 1280);
    $(this).attr( "width", 1280);
    $(this).attr( "src", new_url);
});

我使用自己的 tumblr 在 jsfiddle 中对此进行了测试，因此我不得不更改和调整一些东西。

解释。

首先，当我们多次调用同一个选择器时，我将我的选择器缓存在一个变量中，稍后我可以引用它（更快且更易于维护）。

var fullImg = $('.post img');

为您的选择器使用类似的变量$('.tmblr-full img')。

然后 each 函数遍历 .post img 的每个实例，而不是用相同的图像替换第一个实例的内容。

另外我没有在我的主题中使用硬编码的宽度或高度属性，所以我无法获得图像宽度属性。我的被​​调整为 400px，所以我将它作为要替换的参数传递，但理想情况下这应该被捕获在一个变量中。我确实尝试在 src 上执行此操作，但无法使其正常工作（使用拆分和子字符串）。

您还需要记住，如果不存在 1280px 图像的版本，此函数仍会运行并尝试替换代码，因此您可能需要先进行某种测试以检查 src 属性。像

if(img_url.match('400')){ // then execute the function ...

这是一个 jsfiddle：https://jsfiddle.net/lharby/pwgqgvac/

编辑：

我已经设法将图像大小存储在一个变量中，因此如果它是一个不同的数字应该无关紧要。

var fullImg = $('.post img');
fullImg.each(function(){
    var img_url = $(this).attr("src");
    var normal_width = parseInt($(this).attr("width"));
    var url_removed = img_url.split(".")[3]; // split the url at the "." and get the 3rd index
    url_removed = url_removed.substr(length -3); // get the last 3 chars eg 400
    var new_url = img_url.replace(url_removed, 1280);
    $(this).attr( "width", 1280);
    $(this).attr( "src", new_url);
});

我已经更新了小提琴