Twitter, Grid Stack et Diaporama : des modules encore plus cool avec Widgetkit

Bienvenue sur le deuxième post de la série sur Widgetkit, l'outil créé par YOOtheme pour Joomla!.

Dans le précédent post, j'ai aidé les débutant à utiliser Widgetkit, dans celui-ci, je vais vous montrer comment créer les widgets de Twitter, la grille d'article (Grid Stack) et le diaporama.

 

Vue d'ensemble de l'intégration de widgetkit

Par défaut, Widgetkit vous autorise à utiliser toute les sources de données natives de Joomla!. Si vous employez un CCK comme K2 ou Zoo (le CCK de YOOtheme), Widgetkit les détectera automatiquement et les autorisera à être utilisés comme source de données.

Certaines extensions tierces proposent aussi l'intégration de Widgetkit : Zoolander en est un exemple.

Vous pouvez aussi créer votre propre intégration si vous en êtes capables : la documentation de YOOtheme donne quelques exemples à ce sujet.

Exemple 1 - L'intégration de Twitter

Twitter est une source de données Widgetkit, ce qui veut dire que vous pouvez afficher vos tweets dans le formats que vous voulez, simplement en sélectionnant le type de présentation Twitter. Restons simple pour cet exemple et utilisons une grille qui sera la plus appropriée pour Twitter.

  • Allez dans les composants Widgetkit et cliquez sur New.
  • Sélectionnez Twitter comme source et Grid comme type de présentation.
  • Source : N'importe quel utilisateur Twitter ou une recherche sous forme de hashtag. Dans ce cas, j'ai simplement choisi le compte Twitter @ostraining. Et j'ai aussi choisi des Tweets avec des images.
  • L'API de Twitter : Pour faire fonctionner le Widget avec Twitter, un accès à l'API de Twitter est nécessaire. Pour cela vous devez demander un code PIN qu'on obtient normalement en appuyant sur le bouton request PIN.
  • Paramètres : Cela vous autorise à modifier le style du widget Twitter pour créer une jolie grille. Si vous utilisez le widget dans un encadré, une colonne sera probablement la mise en page adéquate, mais j'ai utilisé le widget dans une page dédiée, donc j'ai créé un widget avec 4 colonnes. De plus, vous pouvez spécifier si vous voulez afficher tous les détails des tweets ou juste quelques-uns.

Dans mon cas, cela donne une belle grille sur 4 colonnes, qui affiche bien les derniers Tweets avec des images. Même avec le template Protostar, le rendu est très bon :widgetkit twitter integration

Exemple 2 - L'intégration d'un article Joomla avec un GridStack

Maintenant, nous allons utiliser Widgetkit pour afficher quelques articles de façon élégante.

En premier lieu, vous aurez besoin d'articles sur votre site. J'ai donc créé 4 articles avec un peu de faux texte et une image d'introduction.

  • Allez dans les composants Widgetkit et cliquez sur New
  • Sélectionnez Joomla comme source et Grid Stack comme type de présentation.

Widgetkit gridstack integration

Cela va nous donner un affichage où les articles sont montrés en rangés, avec les images qui sont alignées alternativement à gauche puis à droite.

Le parametrage de la source de contenu est très simple, car j'ai déjà mon contenu dans Joomla. J'ai juste à spécifier la catégorie dans laquelle je veux prendre les articles. je peux aussi spécifier combien d'articles je veux montrer, comment ils sont rangés et leurs configurations :

widgetkit contenu gridstack

Nous allons à nouveau utiliser l'onglet paramètres, pour spécifier comment vont être placés les widgets. La plupart du temps, la position par défaut est suffisante pour débuter. Dans ce cas précis, j'ai apporté quelques changements mineurs dans les paramètres pour garder le ratio hauteur/largeur des images.

widgetkit gridstack demo

La seule chose que j'aimerais qui soit ajoutée à Widgetkit, c'est la possibilité de paramétrer le bouton Read More depuis le widget. Actuellement, Widgetkit ne fait que respecter le Lire la suite que vous avez paramétré dans le gestionnaire d'articles de Joomla.

La boutique

Joomla! 3 Le livre pour tousJoomla! 3 Le Livre Pour Tous
est écrit pour toutes les personnes qui débutent avec Joomla!, ou qui possèdent déjà quelques connaissances avec les versions précédentes, et qui souhaitent construire et entretenir un site web sans avoir à entrer dans le code.

Exemple 3 -  L'intégration de Joomla avec un diaporama

Dans le troisième exemple, je vais utiliser les mêmes articles que j'ai utilisé précédement pour créer le Grid Stack, mais pour en faire un diaporama :

widgetkit slideshow

Créez un nouveau widget, sélectionnez la catégorie Joomla et créez la mise en page depuis l'onglet Paramètres. J'ai laissé les paramètres comme ils étaient par défaut, excepté pour la navigation entre les vignettes. Dans ce cas, cela a donné un affichage très élégant de mes articles dans le diaporama, avec les images en second plan et le texte en premier plan. Les images des autres articles sont utilisées comme élément navigation entre les articles du diaporama.

widgetkit slideshow

Vous voyez, on obtient deux mises en page totalement différentes avec les mêmes sources. Vous pouvez facilement créer une navigation par onglets ou un module parallax. Ces mises en pages ont été créées très facilement et très rapidement, juste en quelques minutes.

Bonne chance pour créer vos propres widgets.

Note : Cet article est une traduction d'un article d'OStraining

Notez cet article:
6
Comment ajouter des utilisateurs en masse avec Joo...
Joomla 3.4.6 - Une mise à jour de sécurité importa...

Commentaires

 
Pas encore de commentaire
Déjà inscrit ? Connectez-vous ici
Guest
mardi 25 juillet 2017
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.