Modifier la mise en page des liens partagés pour qu'elle corresponde à celle des photos/vidéos.

Par défaut, les liens partagés ont une mise en page différente de celle des photos et des vidéos, mais vous pouvez la modifier en suivant les instructions ci-dessous.

Tout d'abord, allez sur la page Post Layout du plugin et sélectionnez votre mise en page. Activez ensuite le paramètre suivant : Personnaliser > Divers > Médias > Utiliser des images de liens partagés de taille normale. Une fois l'option activée, suivez les instructions ci-dessous pour la mise en page que vous avez choisie.

Mise en page des vignettes

Pour modifier la mise en page afin que l'image du lien partagé corresponde à la mise en page de la vignette, vous devez procéder comme suit :

1) Allez sur la page Customize du plugin, cliquez sur l'onglet Misc, et descendez jusqu'à la section Custom CSS.
2) Copiez et collez les éléments suivants dans cette section :

#cff .cff-shared-link { width: 20%; margin: 0; background: none; border: none; }
#cff.cff-thumb-layout .cff-full-size .cff-link{ max-width: 100%; }
#cff.cff-thumb-layout .cff-link-item .cff-text-wrapper { width: 77%; }
#cff .cff-shared-link .cff-text-link{ display: none; }

3) Saisissez les éléments suivants dans la section JavaScript personnalisé située en dessous :

$('.cff-item').each(function(){
  var $self = $(this),
    $textWrapper = $self.find('.cff-text-wrapper'),
    $sharedLink = $self.find('.cff-shared-link');
  $textWrapper.before( $self.find('.cff-shared-link') );
  if( $textWrapper.length < 1 ) $sharedLink.remove();
});

Disposition en demi-largeur

Pour modifier la mise en page de manière à ce que l'image du lien se trouve à gauche du texte de l'article, vous devez procéder comme suit :

1) Allez sur la page Customize du plugin, cliquez sur l'onglet Misc, et descendez jusqu'à la section Custom CSS.
2) Copiez et collez les éléments suivants dans cette section :

#cff .cff-shared-link { width: 50%; margin: 0; background: none; border: none; }
#cff.cff-half-layout .cff-full-size .cff-link{ max-width: 100%; }
#cff.cff-half-layout .cff-link-item .cff-text-wrapper { width: 47%; }
#cff .cff-shared-link .cff-text-link{ display: none; }

3) Saisissez les éléments suivants dans la section JavaScript personnalisé située en dessous :

$('.cff-item').each(function(){
  var $self = $(this),
    $textWrapper = $self.find('.cff-text-wrapper'),
    $sharedLink = $self.find('.cff-shared-link');
  $textWrapper.before( $self.find('.cff-shared-link') );
  if( $textWrapper.length < 1 ) $sharedLink.remove();
});

Vous n'avez pas trouvé votre réponse dans la documentation ?

Contacter le support