Question

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

图片显示：

<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

1280像素：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}，在文本帖子正文和其他帖子的字幕中获取“1280px”宽图像（如果可用）。您设置的宽度也会影响视频等内容。

您编码的原因不适用于通过“HTML”编辑器添加的内嵌图像;很可能因为课程tmblr-full仅提供给包含通过“Rich text”编辑器上传的图片的figure，Tumblr会这样做。

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

Tumblr Theme Documentation

Answer 2

好吧我觉得我有一些工作（虽然它有点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')使用类似的变量。

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

另外，我的主题中没有使用硬编码的宽度或高度属性，因此无法获得图像宽度属性。我的大小被调整为400px，所以我将其作为要替换的参数传递，但理想情况下应将其捕获到变量中。我确实尝试在src上执行此操作，但我无法使其工作（使用split和substring）。

您还需要记住，如果不存在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);
});

我更新了小提琴

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

2 个答案: