2011
03.07
MISE A JOUR : J’ai maintenant écrit un plugin WordPress qui prend en charge l’intégration de Supersized 3.1.3 dans WordPress, avec de nombreuses options pour choisir où et comment afficher Supersized. Voici WP Supersized !

MISE A JOUR : Ce tutoriel devrait également être valable pour Supersized 3.1.2 et 3.1.3.

Depuis mon article précédent sur l’intégration de Supersized 3.0 dans WordPress, une nouvelle version de Supersized a vu le jour : Supersized 3.1.1.
Je pensais qu’il serait utile de mettre à jour mon tutoriel sur l’intégration de Supersized dans WordPress pour refléter les changements lors du passage de Supersized 3.0 à 3.1.1. En effet, la dernière version rend les choses beaucoup plus simples.

Je décrirai d’abord une installation complète de Supersized 3.1.1 dans WordPress. Pour ceux qui avaient installé Supersized 3.0 d’après mon tutoriel précédent, je montrerai également comment mettre à jour une installation existante de Supersized 3.0 dans WordPress.
Ce que je décris ici est valable au moins pour WordPress 3.0 et au-dessus mais est probablement aussi valable pour des versions plus anciennes de WordPress.

Ce tutoriel est également disponible en pdf.

Intégrer Supersized 3.1.1 dans WordPress – installation complète

Cette fois, je vais présenter les choses de manière différente de mon tutoriel précédent : je vais à présent supposer que vous voulez intégrer Supersized dans tous vos articles ou pages. Si vous ne voulez l’utiliser que dans certaines pages, vous devrez créer un nouvel ensemble de page template, footer, et header pour les pages où vous voulez utiliser Supersized, avec les appels appropriés vers les header et footer correspondants.
Je décris ici la procédure d’installation de Supersized 3.1.1 dans WordPress, en utilisant le dossier slideshow/ de Supersized 3.1.1. La même chose doit être valable pour les dossiers core/ or flickr/ si vous voulez les utiliser. Vérifier l’usage correct de ces fichiers sur le site web de Supersized. Comme expliqué ci-dessus, mon tutoriel est valable au moins pour WordPress 3.0 et au-dessus mais est probablement aussi valable pour des versions plus anciennes de WordPress.

1. Téléchargez le fichier Supersized 3.1.1.zip depuis buildinternet.com et dézippez-le. Créez un dossier supersized/ dans le dossier de votre thème et copiez-y les dossiers slideshow/js/, slideshow/img/ et slideshow/css/ (donc dans : www.votresiteweb.com/wordpress/wp-content/themes/votrethemefavori/supersized/). Si vous voulez utiliser une autre variante (core or flickr), copiez alors plutôt les contenus correspondants de ces dossiers.
Dans le dossier supersized/ folder, créez un dossier slides/ où vous placerez vos images à afficher avec Supersized.

2. Dans l’Appearance editor de WordPress, éditez le fichier header.
Dans le &#60head&#62, après l’appel de la feuille de style standard, ajoutez un appel à la feuille de style de Supersized :

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/supersized/css/supersized.css" type="text/css" media="screen" />

Dans le fichier supersized.css, vous devrez adapter les chemins des fichiers vers le dossier img/ selon votre propre installation (seulement nécessaire si vous avez placé le dossier /img ailleurs qu’à son emplacement original).

A la fin du &#60head&#62, ajoutez les scripts pour Supersized indiqués ci-dessous. Vous ne pourrez pas copier de texte depuis cette page-ci mais vous pouvez le copier depuis le fichier fade.html que vous trouverez dans le dossier Supersized. J’ai également préparé un exemple de fichier header.php (basé sur le thème Twenty Ten) qui inclut ces modifications. Téléchargez ce fichier header ainsi que le footer dont vous aurez besoin dans l’étape suivante.
Toutes les options peuvent être modifiées selon vos désirs. Suivez simplement l’usage décrit sur le site de Supersized. N’oubliez pas d’ajouter vos propres images dans le dossier supersized/slides/. Vous pouvez ajouter autant d’images que vous le souhaitez dans la liste de l’option slides, en vous assurant d’omettre la virgule après la dernière image.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/supersized/js/supersized.3.1.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
//Functionality
slideshow : 1, //Slideshow on/off
autoplay : 1, //Slideshow starts playing automatically
start_slide : 1, //Start slide (0 is random)
slide_interval : 3000, //Length between transitions
transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 500, //Speed of transition
new_window : 1, //Image links open in new window/tab
pause_hover : 0, //Pause slideshow on hover
keyboard_nav : 1, //Keyboard navigation on/off
performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, //Disables image dragging and right click with Javascript
image_path : 'img/', //Default image path
//Size & Position
min_width : 0, //Min width allowed (in pixels)
min_height : 0, //Min height allowed (in pixels)
vertical_center : 1, //Vertically center background
horizontal_center : 1, //Horizontally center background
fit_portrait : 1, //Portrait images will not exceed browser height
fit_landscape : 0, //Landscape images will not exceed browser width
//Components
navigation : 1, //Slideshow controls on/off
thumbnail_navigation : 1, //Thumbnail navigation
slide_counter : 1, //Display slide numbers
slide_captions : 1, //Slide caption (Pull from "title" in slides array)
slides : [ //Slideshow Images
{image : 'http://www.votresiteweb.com/wordpress/wp-content/themes/votrethemefavori/supersized/slides/image1.jpg', title : 'title of the slide', url : 'urlofyourchoice'},
{image : 'http://www.votresiteweb.com/wordpress/wp-content/themes/votrethemefavori/supersized/slides/image2.jpg', title : 'title of the slide', url : 'urlofyourchoice'}
]
});
});
</script>

3. Optionnel. Si vous désirez utiliser la navigation de Supersized, allez dans l’Appearance editor et éditez votre fichier footer en y ajoutant ce qui suit, juste avant wp_footer():

<div id="prevthumb"></div> <div id="nextthumb"></div>
<div id="controls-wrapper">
<div id="controls">
<div id="slidecounter">
/
</div>
<div id="slidecaption"></div>
<div id="navigation">
<img id="prevslide" src="<?php bloginfo('stylesheet_directory'); ?>/supersized/img/back_dull.png"/><img id="pauseplay" src="<?php bloginfo('stylesheet_directory'); ?>/supersized/img/pause_dull.png"/><img id="nextslide" src="<?php bloginfo('stylesheet_directory'); ?>/supersized/img/forward_dull.png"/>
</div>
&#60a href="http://www.buildinternet.com/project/supersized" class="stamp"><img src="img/supersized-logo.png"/>
</div>
</div>

A nouveau, vous pourrez trouvez ce code dans le fichier fade.html file ou dans le footer que j’ai inclus dans mon fichier zip. Assurez-vous de mettre les options Slideshow controls et Thumbnail navigation sur 1 sinon vous ne verrez pas les contrôles de navigation.

4. Encore deux conseils :
Assurez-vous que le fond de votre thème possède au moins quelques parties transparentes, sinon vous ne verrez pas Supersized en arrière-plan.
Si vous utilisez le plugin WP-Minify, vous devez exclure supersized.3.1.1.min.js de minify, sinon Supersized ne fonctionnera pas correctement.

C’est fait ! Profitez de Supersized 3.1.1 dans WordPress !
Vous pouvez le voir en action sur ma page A propos.

Mettre à jour une installation existante de Supersized 3.0 dans WordPress vers Supersized 3.1.1

Je décris ici la procédure d’installation de Supersized 3.1.1 dans WordPress, en utilisant le dossier slideshow/ de Supersized 3.1.1. La même chose doit être valable pour les dossiers core/ or flickr/ si vous voulez les utiliser.

1. Téléchargez le fichier Supersized 3.1.1.zip depuis buildinternet.com et dézippez-le.

2. Dans le dossier supersized/ à l’intérieur de votre dossier de thème, effacez le contenu du dossier js/ folder (gardez le dossier). Effacez également le dossier images/.

3. Copiez le fichier supersized.3.1.1.min.js (déjà minifié) depuis le dossier Supersized 3.1.1 que vous avez dézippé, dans le dossier supersized/js/ existant dans votre dossier de thème. Vous pourrez le trouver dans le dossier slideshow/. Si vous voulez utiliser les autres variantes (core ou flickr), la procédure devrait être similaire.
Copiez aussi le dossier img/ depuis le dossier Supersized 3.1.1 que vous avez dézippé, dans le dossier supersized/ dans votre dossier de thème.

4. Dans votre fichier css correspondant à votre page, remplacez tout le css de Supersized 3.0 par le css de la version 3.1.1 en n’oubliant pas d’adapter les chemins de fichier vers le dossier img/, en fonction de votre propre installation.

5. Dans le fichier header-supersized (ou votre header standard si vous l’aviez modifié en vous basant sur mon tutoriel précédent), remplacez l’entièreté des scripts de Supersized par ceux montrés au point 2 de la procédure d’installation complète. Vous ne pourrez pas les copier depuis cette page-ci mais vous les trouverez dans le fichier fade.html file inclus dans le dossier de distribution de Supersized ou bien dans mon exemple de fichier header.php (basé sur le thème Twenty Ten) qui inclut les modifications. Téléchargez ce fichier ainsi que le footer dont vous aurez besoin dans l’étape suivante. Si nécessaire, mettez à jour les chemins de fichier vers vos propres dossiers de scripts et de slides. Bien sûr, vous pouvez modifier les options selon vos désirs.

6. Toujours dans le fichier header, au début du &#60body&#62, enlevez les lignes suivantes :

<div id="loading">&nbsp;</div>
<div id="content-wrapper">

7. Dans votre template de page, (le template Supersized Page si vous aviez suivi mon tutoriel précédent), enlevez les dernières lignes :

</div>
<div id="supersized"></div>

Si vous aviez placé ces lignes dans le footer (comme expliqué dans mon tutoriel précédent corrigé), alors vous devriez les effacer là.

En fait, il ne devrait plus y avoir la moindre trace de Supersized dans vos template de pages avec cette nouvelle version de Supersized.

8. Optionnel. L’installation de la navigation de Supersized 3.1.1 est identique au Point 3 de la procédure d’installation complète.

9. Si vous utilisez le plugin WP-Minify, vous devrez exclure supersized.3.1.1.min.js de minify, sinon Supersized ne fonctionnera pas correctement.

C’est fait ! Profitez de Supersized 3.1.1 dans WordPress !
Vous pouvez le voir en action sur ma page A propos.

J’espère que tout ceci est clair. Si vous avez des questions, n’hésitez pas à me les poser. Et si vous avez amélioré quelque chose, dites-le moi !

19 commentaires pour le moment

Ajoutez votre commentaire
  1. j’ai la version 3.1.1 de supersized mais sa fonctionne pas sous wordpress,
    le diapo ne se met pas en marche en background.
    pourtant j’ai tout fait

    merci d’une aide de ta part.

    • As-tu bien suivi le tutoriel pour la version 3.1.1 ?
      Appliquer le tutoriel de la version 3.0 à la version 3.1.1 ne fonctionnerait pas. Il faut absolument suivre les instructions pour la version 3.1.1 (celles de cet article-ci).
      Si tu avais installé la version 3.0 auparavant, il suffit en principe de suivre mes explications pour mettre à jour de 3.0 à 3.1.1 (idem pour 3.1.2 ou 3.1.3).
      Peux-tu me donner plus d’explications sur ton problème ?

    • En essayant de solutionner un autre problème, je me suis rendu compte que le commentaire dans la liste des images (slides array) pouvait générer des problèmes (absence d’image affichée p. ex.). Il vaut mieux supprimer les commentaires dans les options de Supersized.

  2. Merci pour ce tuto qui me sauvera la vie si j’y arrive..Cependant ça ne fonctionne pas pour moi.
    Il me semble qu’il manque du code, quand je regarde le code source de la démo, il y a une div id=supersized qui contient les images juste en dessous de la balise body.

    un idée ?

    Merci

    • Yo,
      Depuis la version 3.1.1, Supersized n’a plus besoin du div id=supersized. Quelle version as-tu essayé ?
      Peux-tu donner des détails sur ce qui ne marche pas ?

  3. faut-il mettre utiliser “image à la une” pour que le supersized fonctionne?

    • Non, ce n’est pas nécessaire.
      Quel est plus spécifiquement le problème ?

  4. Bonjour
    J’ai pas encore tenté le tuto vu que j’utilise le plugin supersized wp
    Cependant n’étant pas trop fan des plugin, je me pose la question s’il serait possible d’utiliser supersized avec ‘post_type’ => ‘attachment’ ?

    • Désolé pour ma réponse très tardive à ce commentaire !
      La version actuelle du plugin (1.1.1) ne permet pas encore d’utiliser les images liées aux posts (via la galerie de WP) mais une version à venir le permettra.

  5. Salut Ben,
    Tout d’abord un grand merci pour ce plugin !!! Exactement ce que je cherché.
    Dans ta réponse à “Wabz” tu dis qu’il n’est pas possible d’utiliser les images liées aux posts, je voudrais savoir comment lier des images aux posts de mon portfolio. J’ai bien installer le plugin, tout marche bien par contre je voudrais pouvoir indiquer un set d’images à utiliser en fullscreen pour chaque post. Je suis en mesure d’indiquer un dossier et de faire apparaitre ces images au sein des posts mais celles-ci sont les mêmes pour tous les posts.
    Encore merci.

    • Guillaume,
      Je travaille actuellement sur la prochaine version dans laquelle il sera possible d’utiliser les images liées au post (via la Media Gallery de WordPress).
      En attendant, chaque post peut avoir ses propres images via l’utilisation d’un Custom Field appelé SupersizedDir dont la valeur doit être le nom du répertoire contenant les images. La procédure est décrite dans la FAQ (en anglais) de WP Supersized.
      Il est vrai que je n’ai toujours pas traduit ma page en français. Il serait grand temps que j’y pense !

  6. Bonjour,
    Je voudrais utiliser le plugin pour “slider” mes articles. C’est possible ? =)

    • Hélas non, cela n’est possible qu’avec des images.

  7. Salut Ben,
    Merci encore pour le plugin, je voulais savoir si il etait possible de passer d’image en image (next) en cliquant sur les photos ? Ce serait un plus pour améliorer la navigation, qu’en penses tu ?

    • Guillaume,
      C’est probablement possible en modifiant le css du theme (plus grande surface pour les flèches de passage d’une page à l’autre).
      Mais est-ce vraiment pratique ? Si c’est en cliquant n’importe où dans l’image qu’on passe à l’image suivante, que ferait l’utilisateur qui veut retourner en arrière ?

  8. bsr a tout le monde. Est ce que quelqu’un réussit a faire défiler les apercus d’image pour la page d’accueil….moi cest le grand bazarre cette histoire….

    • Bob,
      Peux-tu me donner plus de détails sur ce que tu veux dire. Quel est exactement le problème ?

  9. Bonjour,
    Je souhaite centrer verticalement l’image. sa taille est height: 600px
    Malgrès les options cochés l’image est en pleine écran donc agrandie à la taille écran.
    Quelqu’un a-t-il réussi à contraindre l’affichage et le centrer sans agrandir le visuel.
    exemple avec un max-height:600px;

    Mes tests n’ont pas marché sur l’image, si vous avez un idée….

    // Size & Position
    fit_always : 1, // Image will never exceed browser width or height (Ignores min. dimensions)
    fit_landscape : 0, // Landscape images will not exceed browser width
    fit_portrait : 1, // Portrait images will not exceed browser height
    min_width : 100, // Min width allowed (in pixels)
    min_height : 100, // Min height allowed (in pixels)
    horizontal_center : 1, // Horizontally center background
    vertical_center : 1, // Vertically center background

  10. Bonjour BEN,
    J’ai installer ton plugin, il à l’air très bien fait, cependant, lorsque je crée une galerie dans le média de wordpress avec deux photos coché, même si je l’ajoute dans la page, le slideshow indique qu’il recherche les images…

    Si j’ai bien compris, une fois ajouter dans une galerie, le plugin liste les images dans l’onglet WP Media Galerie de WP Supersize du post/page concerné ?

    Si c’est le cas, j’ai un bug, notons que j’utilise WP en version 4.7.3–fr_FR,