1

Hi I got a template for instafeed and now I need to limit the length of the caption. I added to js code to do it but it does not work. Is there a way to make the <p><i>{{caption}}</i></p> shorter and add ellipsis.

Here is my code:

$(function(){
            $(".caption").each(function(i){
                len=$(this).text().length;
                if(len>10)
                {
                    $(this).text($(this).text().substr(0,10)+'...');
                }
            });
        });

        /* Intafeed and SimplyScroll */
        var feed = new Instafeed({
            target: 'instagram-list',
            get: 'user',
            userId: 1713392078,
            accessToken: '0000000',
            clientId: '0000000',
            limit: '30',
            sortBy: 'most-recent',
            link: 'true',
            template: '<li><figure class="effect-honey background-black1"><figcaption><p><i class"caption">{{caption}}</i></p></figcaption><a href="{{link}}" target="_blank"><img src="{{image}}" alt"{{caption}}"/></a><span class="instagram-metadata shadow">{{likes}} <span class="instagram-like"></span></span></figure></li>',
            resolution: 'low_resolution',
            after: function() {
                $("#instagram-list").simplyScroll({
                    speed: 1,
                    frameRate: 24,
                    orientation: 'horizontal',
                    direction: 'forwards',
                })
            }
        })

        feed.run();
4

2 回答 2

2

filter您可以使用Instafeed.js 提供的内置选项来完成。

即使该filter选项主要用于过滤图像，您也可以使用它在图像数据发送到您的template字符串之前对其进行修改。

因此，使用以下内容更新您的 Instafeed.js 设置：

var feed = new Instafeed({
    target: 'instagram-list',
    get: 'user',
    userId: 1713392078,
    accessToken: '0000000',
    clientId: '0000000',
    limit: '30',
    sortBy: 'most-recent',
    link: 'true',
    filter: function(image) {
      var MAX_LENGTH = 10;

      // here we create a property called "short_caption"
      // on the image object, using the original caption
      if (image.caption && image.caption.text) {
        image.short_caption = image.caption.text.slice(0, MAX_LENGTH);
      } else {
        image.short_caption = "";
      }

      // ensure the filter doesn't reject any images
      return true;
    },

    template: '<li><figure class="effect-honey background-black1"><figcaption><p><i class"caption">{{model.short_caption}}</i></p></figcaption><a href="{{link}}" target="_blank"><img src="{{image}}" alt"{{model.short_caption}}"/></a><span class="instagram-metadata shadow">{{likes}} <span class="instagram-like"></span></span></figure></li>',
    resolution: 'low_resolution',
    after: function() {
        $("#instagram-list").simplyScroll({
            speed: 1,
            frameRate: 24,
            orientation: 'horizontal',
            direction: 'forwards',
        })
    }
})

feed.run();

这将为每个名为short_caption. 然后，您可以{{model.short_caption}}在字符串{{caption}}内部使用。template

（将MAX_LENGTH变量设置为您想要的最大字幕长度）

根据评论更新：如果您想根据最接近的词尾限制您的文本，您必须在过滤器中添加更多逻辑。由于过滤器函数只是普通的 JavaScript，因此您可以在其中添加任何类型的逻辑。

下面是一个快速示例，您可以在纯 JavaScript 中找到最接近子字符串的词尾的一种方法：

var MAX_LENGTH = 100;

var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis felis dolor, in volutpat erat hendrerit ut. Mauris auctor quam at nulla tincidunt aliquam. Vivamus facilisis adipiscing lacus, vel dignissim nulla imperdiet nec. Donec fermentum, urna vel adipiscing vehicula, ante odio scelerisque tortor, vitae auctor eros tortor eu massa";
var trimmedText;

var closestIndex = MAX_LENGTH;
while(true) {
  if (text.charAt(closestIndex) === ' ') {
    break;
  }
  closestIndex -= 1;
}

trimmedText = text.slice(0, closestIndex) + '...';

alert(trimmedText)

所以用附加逻辑更新你的filter函数，从我上面展示的例子中修改：

filter: function(image) {
  var MAX_LENGTH = 100;
  var closestIndex = MAX_LENGTH;

  if (image.caption && image.caption.text) {
    while(true) {
      if (text.charAt(closestIndex) === ' ') {
        break;
      }
      closestIndex -= 1;
    }
    image.short_caption = image.caption.text.slice(0, MAX_LENGTH);
  } else {
    image.short_caption = "";
  }

  return true;
},
于 2015-03-14T18:26:45.007 回答
0

使用纯css截断文本并添加省略号，会更快更易维护

有用于呈现文本省略号的 .js 库（例如jquery.ellipsis）

于 2015-03-13T20:34:46.893 回答