如何在汤博乐的文字帖子中使用高分辨率照片

Question

我正在尝试在汤博乐文本帖子中使用高分辨率。当我上传一张照片到一个文本帖子时，汤博乐将其调整为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更改为数据原始宽度值，则不会得到原始图像，但我只想要1280的图像。如果我把500改成1280，它会给我一个1280的图像

500像素：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}可以在Text帖子正文和其他帖子的标题中获得"1280px"宽的图像（如果可用）。您设置的宽度也会影响视频等内容。

您的代码不适用于通过"HTML"编辑器添加的内联图像的原因；很可能是因为tmblr-full类只提供给包含通过"Rich-text"编辑器上传的图像的figure，所以汤博乐会这么做。

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

汤博乐主题文档

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上这样做，但我无法让它工作（使用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);
});

我已经更新了小提琴