Limite de longueur de texte ne fonctionnant pas dans mon gabarit instafeed

Question

Salut J'ai obtenu un gabarit pour instafeed et maintenant je dois limiter la longueur de la légende. J'ai ajouté au code js pour le faire mais ça ne marche pas. Est-il possible de raccourcir le <p><i>{{caption}}</i></p> et d'ajouter des points de suspension.

Voici mon 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(); 

Answer 1

Vous pouvez accomplir en utilisant l'option intégrée filter fournie par Instafeed.js.

Même si l'option filter est principalement utilisée pour filtrer les images, vous pouvez également l'utiliser pour modifier les données d'image avant qu'elles ne soient envoyées à votre chaîne template.

mettre à jour et vos paramètres Instafeed.js avec les éléments suivants:

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

Cela affectera une nouvelle propriété à chaque image appelée short_caption. Vous pouvez ensuite utiliser {{model.short_caption}} à la place de {{caption}} à l'intérieur de votre chaîne template.

(Définir la variable MAX_LENGTH être la longueur de légende maximale que vous voulez)

---

mise à jour en fonction des commentaires: Si vous voulez limiter votre texte en fonction de la fin de mot le plus proche, vous aurez pour ajouter plus de logique dans votre filtre. Puisque la fonction de filtre est simplement JavaScript, vous pouvez ajouter n'importe quel type de logique que vous voulez là.

Voici un exemple rapide d'une façon, vous pouvez trouver le mot le plus proche fin d'une sous-chaîne en JavaScript plaine:

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)

mettre à jour donc votre fonction filter avec la logique supplémentaire, modifié à partir l'exemple que je vous ai montré ci-dessus:

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

Answer 2

utilisation pure css tronquer texte et ajouter des points de suspension, il sera plus rapide et plus maintenable

Il existe des bibliothèques .js pour le rendu de texte points de suspension (par exemple jquery.ellipsis)