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

Question

我正在尝试在 Tumblr 文本 post 中使用高分辨率。当我将照片上传到文本 post 时，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 并且它有效，但只有当 post 包含一张上传的图像时，它才不会更改 post 的图像使用 html 编辑器编辑。如果 posts 包含从编辑器上传的 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

好吧，我想我有一些工作（虽然它有点hacky）。

我正在使用这个功能：

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);
});

我更新了fiddle

Answer 2

使用 {block:Posts inlineMediaWidth="1280"} 和 {/block:Posts} 而不是 {block:Posts} 和 {/block:Posts} 在文本 post 正文中获取“1280px”宽图像（如果可用）其他 post 的字幕。您设置的宽度也会影响视频等内容。

您的代码不适用于通过 "HTML" 编辑器添加的内嵌图像的原因；很可能是因为 class tmblr-full 仅提供给包含通过 "Rich text" 编辑器上传的图片的 figure，Tumblr 就是这样做的。

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

Tumblr Theme Documentation

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

How to use high resolution photos in text posts in Tumblr?

jquery

tumblr