jQuery: gestire le thumbnail di Wordpress

jQuery: gestire le thumbnail di Wordpress

Avevo la necessità di gestire le thumbnail di Wordpress in modo da non usare un plugin per trasformare tutte le immagini contenute nei miei post in immagini da presentare come thumbnail nella home page. Tutti i miei post iniziano con un paragrafo che contiene un'immagine come primo elemento. Alcune di queste immagini sono già ridotte e vengono flottate. Quindi non ha senso usarle come thumbnail. Inoltre nessuno dei miei post ha una featured image, ma solo quest'immagine iniziale. Come fare? Ecco una soluzione con jQuery.

Volevo che questo effetto fosse presente solo nella home page. Dato che in Wordpress l'elemento body nella home page ha la classe CSS home, non è stato difficile operare una selezione. Inoltre non volevo applicare l'effetto thumbnail alle immagini flottate. Ecco il codice:


(function($) {

  var GabrieleRomanato = new function() {
  
    // altri metodi e proprietà
    
    this.thumbnailHandler = function() {
    
      var $p = $('p', 'div.entry-content');
      
      if($('body').hasClass('home')) {
      
      
        $p.each(function() {
        
          var p = $(this);
        
          var $img = $('img', p);
          
          if(!$img.hasClass('alignright')) {
          
            var top = p.position().top;
            var left = p.position().left;
            var width = 190;
            var height = 150;
            
            $img.css({
              position: 'absolute',
              top: top,
              left: left - 213,
              width: width,
              height: height,
              margin: 0,
              padding: '3px',
              border: '1px solid #ddd'
            });
          
          
          
          }
        
        
        });
      
      
      }
    
    
    };
    
})(jQuery);

In pratica ho posizionato le immagini in modo assoluto usando come coordinate i valori di offset del paragrafo che le contiene e sottraendo un valore superiore alla loro larghezza dall'offset sinistro, in modo da scostarle rispetto al testo.

Torna su