Pyrat.net – Création de sites Internet

Faire une galerie de photos

2024-11-10T17:57:46Z

Contexte historique

SPIP, jusqu'à sa version 4 disposait d'un mécanisme simple pour afficher une galerie de photos : il suffisait que les documents soient déposés dans le portfolio pour qu'ils soient affichés en galerie.

Ça n'est plus le cas depuis la version 4 [1]. Et aucune méthode explicite n'a été fournie en alternative.

C'est pourquoi j'ai cherché et mis au point une alternative viable :

Ce qui donne le plugin : Albums automatiques + Portfolio

Méthode moderne avec les plugins Albums + Albums automatiques

Pour faire une galerie, il suffit :

de joindre les images qui, si elles font au moins 800px de larges, vont directement dans un album servant de PortFolio (cet album est créé automatiquement si nécessaire) [2]
de leur donner un titre
choisir le point d'intérêt de l'image pour permettre son recadrage harmonieux
éventuellement, glisser/lâcher les images pour choisir l'ordre (clic sur les points d'accroches)

Bonus : si vous avez plusieurs albums, vous pouvez les ordonner par glisser/lâcher via le picto avec les 2 colonnes de 3 points tout à fait à droite du titre de l'album.

Un bug de SPIP avec les images ayant une orientation EXIF

Quand vous prenez une photo en mode portrait avec votre smartphone, celui-ci la stocke au format paysage avec une information stockée dans celle-ci pour dire qu'il faut la faire tourner d'un quart de tour (c'est l'EXIF qui permet ça).

Quand vous joignez cette image à SPIP, sa vignette apparaît couchée : c'est un bug [3].

Pour contourner le bug :

Ouvrir l'image dans Paint.net et l'enregistrer : elle sera dans le bon sens
Tenter la manœuvre suivante (sans garantie)
1. faire une prévisualisation de l'article pour vérifier que l'image y apparaît bien couchée
2. si elle n'est pas dans le bon sens, retourner dans l'article dans l'administration, et cliquer sur modifier
3. puis cliquer sur la flèche permettant de faire tourner d'un quart de tour
  
  constater qu'« il ne s'est rien passé » (la vignette est toujours couchée) : c'est la 2^e facette du bug : la vignette ne tourne pas, mais l'image côté public est bien dans le bon sens
4. Enregistrer
5. ce qui peut être vérifié en prévisualisant de nouveau l'article

Enlever une image de l'album et la passer en illustration

Pour avoir le bouton : Retirer du portfolio, il faut que l'album soit affiché avec un élément par ligne.

Il faut donc cliquer sur le premier bouton à côté de Affichage.

Bugs en attente de résolution

Mauvaise ergonomie de l'onglet Albums dans la colonne de gauche de l'édition d'un article
La croix du plugin Centre Image n'est pas affichée sur les images au chargement de la page : un clic sur ajouter un document (ou fermer la zone si déjà affichée) fait s'afficher les croix (à condition d'avoir le premier mode d'affichage sélectionné en haut de la liste des images)
Au passage en mode édition d'un article, les modifications de « portfolios » faites en mode propriétés de l'article ne sont pas affichées : après modifications, actualiser la page avant d'aller modifier l'article
En mode modification d'un article, le contenu des 2 onglets Documents/Albums n'est pas correctement rafraîchi quand on est dans l'autre onglet : enregistrer l'article et cliquer de nouveau sur modification pour obtenir le rafraîchissement de la colonne de gauche.

[1] Bien que SoyezCréateurs ait pu continuer à le faire, au prix de l'usage d'une possibilité qui va disparaître avec SPIP 5

[2] Disponible nativement avec SoyezCréateurs.

[3] Un ticket de bug est ouvert à ce sujet : Impossible de mettre dans le bon se…

Accès admin perdu à un site SPIP ?

2024-05-02T10:44:12Z

Contexte

Vous avez un site sous SPIP 4 ou plus. Et plus personne ne sait comment se connecter à l'administration avec un compte ayant les droits de webmestre.

Mais, vous avez un accès FTP.
Et un accès PHPMyAdmin à la base de données.

Une solution existe.

Méthode : réinstallation de SPIP

par FTP, renommer le fichier config/connect.php en config/_connect.php
l'ouvrir pour avoir accès à son contenu
avec PHPMyAdmin, ouvrir la table spip_auteurs [1]
chercher un compte d'auteur ayant le champ backup_cles rempli
pour cet auteur :
- supprimer le contenu des champs : low_sec, alea_actuel, alea_futur
- utiliser un convertisseur texte vers MD5 pour générer le MD5 du mot de passe que vous souhaitez utiliser (le MD5 doit être en minuscules)
  Exemple : bonjour → f02368945726d5fc2a14eb576f7276c0
- mettre le code MD5 obtenu dans le champ pass
visiter avec le navigateur l'URL adressedusite/ecrire : la procédure d'installation du site se lance :
- saisir les informations de connexion à la base de données (voir config/_connect.php)
- ne pas créer d'utilisateur (c'est possible parce que SPIP détecte que la base de données contient déjà des auteurs)
- l'étape suivante est la mire de connexion
saisir le login et le mot de passe que vous avez choisi (dans l'exemple, c'est bonjour)

Et voilà, vous avez retrouvé un accès webmestre au site.

Et cet accès vous permet, évidement, d'en créer d'autres, plus personnels.

Pourquoi ça marche ?

Parce qu'il fut une époque où SPIP stockait les mots de passe en MD5.

Et comme il n'y pas de moyen de convertir automatiquement au nouveau format, la conversion se fait au moment du login, lorsque le vrai mot de passe saisi par l'utilisateur est utilisable par SPIP pour sauvegarder la version encryptée selon les nouvelles normes de sécurité.

[1] Le préfixe spip_ peut avoir été configuré à autre chose, voir config/connect.php

Flux RSS ? Kesako ?

2013-06-18T14:59:24Z

SPIP est à la fois client et serveur de flux http://www.mozilla-europe.org/fr/products/thunderbird/], [Google Reader->http://www.google.fr/reader/], [NetVibes->http://www.netvibes.com/]">RSS.

Flux http://www.mozilla-europe.org/fr/products/thunderbird/], [Google Reader->http://www.google.fr/reader/], [NetVibes->http://www.netvibes.com/]">RSS ?

Un flux RSS, c'est un format d'échange conçu pour permettre à un site d'informer des nouveautés publiées sur ce dernier, et cela, automatiquement.

Seuls 17% des internautes savent utiliser un flux RSS. Mais ces 17% sont ceux qu'on appelle les « influenceurs ».

Les « influenceurs » se tiennent au courant en utilisant des outils de veille. Les agrégateurs de flux RSS sont un outil essentiel dans leur arsenal.

Serveur RSS ?

SPIP est serveur de flux RSS.

Autrement dit, SPIP propose à qui en a l'usage de s'abonner aux nouveautés du site.

Aujourd'hui, faire un site web sans flux RSS est suicidaire ; c'est croire :

que le gens vont faire l'effort de venir tous les jours pour savoir s'il y a quelque chose de nouveau sur votre site
ou pire, qu'il n'y aura de toute manière jamais rien de nouveau sur votre site

Client et agrégateur de flux RSS ?

Un client RSS, c'est un outil capable de lire un flux RSS afin de l'afficher d'une manière lisible et agréable pour un être humain.

SPIP est nativement client de flux RSS [1] sous réserve que le squelette utilisé soit prévu pour afficher les sites référencés dans votre espace d'administration [2].

Un peu d'actualité

Les flux RSS viennent d'avoir une exposition médiatique inattendue suite à l'annonce par Google de la fermeture de son service gratuit [3] : le 1^er juillet 2013.

Du coup, sur Internet, c'est la course à qui fournira l'alternative miracle à ce service.

Pour ma part, ça ne va rien changer : j'utilisais la fonction de client RSS de Thunderbird et je vais continuer comme avant.

Un autre client intéressant est FeedDemon 4.5. Gratuit, mais qui ne sera jamais OpenSource ni maintenu.

Mais pour ceux qui cherchent une solution en ligne, vous pourriez utiliser :

FramaNews porté par une association dont l'engagement pour le libre est indéfectible !
Feedly dont tout le monde parle comme alternative de poids [4]
netVibes : le challenger français
n'hésitez pas à proposer votre propre solution dans les commentaires

[1] Il suffit de référencer un site dans SPIP

[2] Ce qui est le cas de SoyezCréateurs et de nombreux squelettes proposés dans la communauté SPIP.

[3] Souvenez-vous, quand c'est gratuit, c'est que le produit, c'est vous !

[4] Mais attention, pas d'export OPML au dernières nouvelles : autrement dit, une cage dont on ne peut pas sortir.

Votre site n'a pas encore de flux http://www.mozilla-europe.org/fr/products/thunderbird/], [Google Reader->http://www.google.fr/reader/], [NetVibes->http://www.netvibes.com/]">RSS ? Il est grand temps de changer ça !

Quand faut-il faire un lien dans le texte d'un article ?

2012-04-26T19:14:27Z

Il faut faire un lien chaque fois qu'il est évident que votre texte fait référence à quelque chose qui se trouve sur une autre page :

soit à l'intérieur de votre site
soit sur un autre site

Ainsi, vous éviterez la frustration de vos lecteurs et ces derniers se sentiront respectés et vous seront reconnaissants de leur permettre d'approfondir ailleurs ce qu'ils trouvent dans votre site.

Et pour faire des liens, consultez : Gestion des liens avec SPIP.

Gestion des liens avec SPIP

2012-04-16T10:44:47Z

Liens dans le corps du texte

Contrairement à WordPress, SPIP fait la distinction entre liens internes et externes.

Cette distinction est fondamentale. En effet, elle permet de :

changer facilement de type d'URL du côté public
de changer de nom de domaine
de préparer un site sur un nom de domaine de développement, et de le publier sur l'URL définitive sans douleur.
le passage d'un site en HTTPS se fera aussi très simplement sans devoir mettre à jour les liens internes

Syntaxe générale d'un lien

Pour faire un lien dans SPIP, il suffit d'appliquer une syntaxe simple (un bouton est disponible dans la barre d'outils pour le faire) :

[Texte du lien->URL] :

Texte du lien : c'est le texte qui sera affiché et rendu clicable
URL : l'adresse de la destination

Cette syntaxe peut être complétée par une bulle d'aide et une indication de la langue de destination :

[Texte du lien|Texte de la bulle d'aide{lang}->URL] :

|Texte de la bulle d'aide : permet de compléter le lien par une indication qui apparaîtra au survol du lien
{lang} : si le lien pointe vers un contenu d'une langue différente de la page en cours, les normes d'accessibilité demandent que l'on indique la langue de la page pointée. Vous pouvez consulter une liste des codes des langues.

Liens Externes

Un lien externe, c'est donc un lien vers un site extérieur au sien.

L'URL sera un simple copier/coller de l'adresse de la page voulue.

Exemple : [SPIP Contrib->http://contrib.spip.net/] qui va donner : SPIP Contrib.

Liens Internes

Un lien interne, c'est un lien vers une autre page de votre site : on ne sort pas du site.

Pour faire un lien interne, nous allons utiliser les identifiants uniques des objets de SPIP :

le type de l'objet
son numéro

Un raccourci d'écriture consistera à ne pas mettre de texte cliquable explicite. Dans ce cas, SPIP mettra automatiquement le titre de la destination (et renseignera le changement de langue si nécessaire).

Articles

Article n°

[->548] → Éloge de l'optimisme

Les articles étant le type d'objet le plus important de SPIP, le n° seul suffit.

Ceux qui veulent être vraiment sûrs pourront mettre [->art548].

Rubriques

Rubrique n°

[->rub76] → Cours et tutoriels SPIP

Auteurs

Auteur n°

[->aut1] → Jacques Pyrat

Sites

Site n°

[->site63] → La veille technologique de Pyrat.net
La syntaxe officielle de SPIP qui mène directement au site lui-même
[->refsite63] → La veille technologique de Pyrat.net
Spécifique à SoyezCréateurs : conduit à la page de votre site référançant le site en question

Mots-clés

Mot n°

[->mot46] → Squelettes SoyezCréateurs

Documents

[->doc353] → Étude qualité des sites web de communes en Aquitaine - Résultats d'Excideuil

Images

[->img183] → SPIP décroche la lune !

Le lecteur se reportera aussi utilement à la documentation officielle dans l'aide en ligne de SPIP.

Sites référencés

Tout comme les rubriques ou les articles, les sites référencés sont un objet à part entière dans SPIP.

Un site référencé, c'est :

Un titre
Une URL : l'adresse du site
Une description : voir Du bon usage du référencement de sites dans SPIP
Un logo
Et un éventuel flux http://www.mozilla-europe.org/fr/products/thunderbird/], [Google Reader->http://www.google.fr/reader/], [NetVibes->http://www.netvibes.com/]">RSS pour afficher sur votre site les nouveauté de l'autre site

Les sites référencés sont rattachés à une rubrique.

Dans SoyezCréateurs, ils sont visibles depuis tous les articles et autres sites référencés de la même rubrique.

Redirections

Redirection

Les redirections permettent de créer un article qui va rediriger automatiquement l'internaute sur une autre page.

Si la redirection pointe sur une autre page de votre site, il faut utiliser la syntaxe des urls de liens internes vue au dessus [1].

Dans SoyezCréateurs, ce mécanisme est utilisé pour le lien contact dans le menu de gauche.

Site de référence

Chaque article dans SPIP a un double champ intitulé : Lien hypertexte (référence, site à visiter…).

Vous pouvez y saisir un titre et une URL.

Habituellement, on met dans cette zone :

soit la source d'inspiration de l'article en cours (en particulier si on a copié l'article depuis cette source)
soit le seul site qui complète l'information donnée dans la page

Si l'on a besoin de mettre plusieurs liens, il vaut mieux les mettre dans le texte ou dans le postscriptum.

[1] Exemple : article n°12, on pourra indiquer comme destination de la redirection : art12, ou plus simplement 12

Savoir faire un lien, c'est bien ! Mais Quand faut-il faire un lien dans le texte d'un article ?

Il faut aussi éviter la formulation Cliquez-ici !

Comment insérer une image avec SPIP ?

2011-11-15T21:50:27Z

Il existe 16 manières différentes de placer une image dans SPIP ? !

Cet article vous propose de simplifier les choix en vous limitant à 4 cas.

Une image, 16 combinaisons !

SPIP propose 2 modes d'affichage mutuellement exclusifs pour les images :

Illustrations : l'image sera affichée en grande taille dans le texte (ou pas du tout si pas insérée dans le texte)
Portfolio : l'image sera affichée
- en galerie en bas de l'article
- et, si insérée dans le texte, sous forme d'une petite vignette, avec un lien pour afficher l'image en grand

Une image peut être inséré de 2 manières :

: le titre de l'image sert d'alternative textuelle à l'image
: le titre et le descriptif de l'image sont affichés en légende de l'image

Une image peut être positionnée selon 4 possibilités :

« left » : flottante à gauche du texte
« right » : flottante à droite du texte
« center » : toute seule centrée
« » [1] : l'image se comporte comme un (gros) caractère dans le texte

Rappel de syntaxe

Insertion

Pour insérer une image, on utilise le raccourcis :

img pouvant être : img ou doc
alignement pouvant être : left, center, right ou rien du tout
NNN étant le n° de l'image [2]

Lien sur une image

D'autre part, juste pour mémoire, une image est un « mot » comme un autre : elle peut servir de lien.

Par exemple, l'image ci-dessous est insérée avec :

[->doc356]

Portfolio ou Illustrations ?

Portfolio

Une image placée dans le Portfolio sera automatiquement utilisée pour faire une galerie en bas de l'article.

Comme ces images sont porteuses de sens, il est impératif de leur donner un titre [3].

Remarque : si l'on insère une image du portfolio dans le texte :

elle sera affichée sous forme de vignette
elle sera automatiquement cliquable
le lien est fait automatiquement vers la version grand format de l'image

Illustrations

Les images ayant le statut d'illustration sont destinées à être insérées dans le texte de la page.

Simplification : 4 cas

Nous vous proposons de limiter à 4 cas [4].

Images dans SPIP

Cas 1 et 2 : petites images généralement décoratives

Si vous avez des images de petites taille, généralement purement décoratives [5], il faut :

ne pas leur donner de titre [6]
les insérer en les faisant flotter à gauche ou à droite :
- : cas 1
- : cas 2
avec et non pas

Bien sûr, s'il s'agit d'une petite image portant un sens enrichissant le texte de la page, il faut lui donner un titre !

Une petite image ne devrait pas dépasser le quart de la largeur normale du texte : généralement, entre 150 et 200 pixels de large.

Cas 3 : grande image centrée seule sur sa ligne

Dans le cas d'une grande image, cette dernière est toujours porteuse de sens : il faut donc lui mettre un titre, et, éventuellement, un descriptif.

On peut choisir alors d'afficher l'image seule, cas 3a : . Le titre servira alors d'alternative textuelle à l'image [7].

Ou alors d'afficher l'image avec son titre et son descriptif en légende, cas 3b : .

Mnémotechnique : pour une image documentée par sa légende.

Cas 4 : galerie de photos

Pour faire une galerie, il suffisait :

de déposer les images dans le Portfolio
de leur donner un titre [8]
choisir le point d'intérêt de l'image pour permettre son recadrage harmonieux
éventuellement, glisser/lâcher les images pour choisir l'ordre (clic sur les points d'accroches)

Maintenant, il faut utiliser les Albums pour faire une galerie (mais rassurez-vous, c'est presque pareil).

Voir en ligne : Images (exercice)

[1] Pas d'alignement

[2] Attribué automatiquement par SPIP à chaque document joint au site.

[3] Utilisez numéro point espace en début de titre pour imposer un ordre d'affichage.

[4] En tout cas, dans un premier temps, tant que vous ne maîtrisez pas les subtilités du placement des images…

[5] Une image décorative sert uniquement à « aérer » le texte. L'image ne porte pas de sens qui viendrait enrichir le texte.

[6] Et s'il y a un titre, le supprimer.

[7] Les curieux peuvent aller lire l'article de Tetue sur Remplir les attributs « alt » et « title » dans SPIP.

[8] Si les titres sont numérotés avec numéro point espace titre, cela permet de choisir l'ordre d'affichage des photos dans la galerie.

En respectant ces quelques conseils, vous allez pouvoir placer vos images de manière rapide et efficace.

Remarque : dans SoyezCréateurs, il est possible de réinitialiser le flottement des images placées à gauche en mettant un titre dans le texte. Typiquement, pour faire une page présentant des produits :

Nom du produit en titre
Image flottant à gauche
Description du produit « poussée » sur la droite

Pour en finir avec les liens ouvrant dans une nouvelle fenêtre

2011-07-08T17:44:30Z

Quand on met un lien dans un article [mon lien->http://mon.lien.org], SPIP ne définit pas de « target » et la nouvelle page s'affiche dans la même fenêtre.

Peut on modifier ce fonctionnement basique pour afficher la cible dans une nouvelle fenêtre/onglet ?

Il est possible de rajouter une ligne de jquery pour faire ça :

$('a.spip_out,a.spip_url,a.spip_documents').attr("target", "_blank");

Ou installer le plugin Liens spip_out ouvrants

Mais…
… Ouvrir dans une nouvelle fenêtre est un non sens ergonomique :

les utilisateurs débutants ont 30 Internet Exploseur lancés en fin de journée
les utilisateurs en ayant marre des pub ferment la nouvelle fenêtre sans la lire
les utilisateurs avancés savent cliquer avec le bouton du milieu (molette) ou ctrl-clic

Donc, laissez le choix à vos lecteurs !

Une recherche rapide sur « Pourquoi ouvrir dans une nouvelle fenêtre c'est mal ? » donne :

Que faire en cas de problème d'affichage du site SPIP ?

2010-11-24T09:45:20Z

Avant toute chose

Actualiser la page dans le navigateur

Il se peut en effet que votre navigateur ait encore l'ancienne version des CSS [1] ou du javascript [2].

Pour cela :

un clic dans la barre d'outil sur le bouton de rechargement/recyclage
ou un appui sur la touche F5

Recalculer la page qui pose question

Une fois que vous êtes identifié sur le site, vous disposez dans l'espace public des boutons d'administration.

Cliquez sur le bouton Recalculer cette page.

Les grands moyens

Erreur dans les plugins

S'il y a un bandeau sombre en haut de l'espace d'administration commençant par « Erreur dans les plugins », il suffit d'aller voir la page de gestion des plugins : ecrire/?exec=admin_plugin.

Il n'y a rien à faire dans cette page, juste la visiter.

Si le Couteau Suisse est installé dans le site

Il faut demander au Couteau Suisse de se réinitialiser.

Pour cela, il suffit de se rendre dans la page de configuration Couteau Suisse : ecrire/?exec=admin_couteau_suisse.

Il n'y a rien à faire dans cette page, juste la visiter.

Vider le cache de SPIP

Pour vider le cache de SPIP, rendez-vous dans ecrire/?exec=admin_vider, et cliquez sur le premier bouton Vider le cache.

Vous pouvez alors visiter le site et constater que tout va bien.

[1] Ce qui règle l'apparence de votre site.

[2] Ce qui fait que les menus se déplient ou que les colonnes sont de hauteur équivalentes.

Et si cela n'a pas suffi, il ne vous reste plus qu'à contacter votre webmaster préféré…

Avantages comparés Articles/Documents joints

2010-09-14T16:31:29Z

SPIP permet de créer des articles et de joindre des documents à ces articles.

Parfois, il est tentant de joindre un document plutôt que de créer un article avec le contenu de ce document.

Est-ce vraiment un bon calcul ?

Comparaison Articles/Documents joints
Articles	Documents joints
⊖ : temps de mise en ligne ⊕ : accélération possible par la macro Word	⊕ : Rapide à mettre en ligne
⊕ : Accessibilité simplifié	⊖ : Accessibilité difficile (et reportée au niveau du créateur du document)
⊕ : Recherche via le site en Plein Texte	⊖ : Pas de recherche via le site
⊕ : Reste dans la navigation du site	⊖ : Sort de la navigation du site
⊕/⊖ : Reste dans la charte du site	⊕ : PDF = présentation visuelle exacte

Moyens de surcharger SPIP

2010-07-20T09:22:32Z

Fonctions

fonction inc_nom_dist() peut être surchargée par inc_nom

$f = charger_fonction('nom','inc'); $f('param');

Fichiers

ecrire/inc/nom.php

⇒ squelettes/inc/nom.php

$f = find_inc_path('inc/nom.php'); #CHEMIN{images/z.png}

Pipelines

$data = pipeline('nom', 'contenu');

Exemple : insert_head

ecrire/inc_version.php contient 40 définitions de pipelines

$GLOBALS['spip_pipeline']['insert_head'] = "passe_ici|passe_la";

$data = pipeline('nom', array ( 'arg' => array( ), 'data' => "" ));

Déclaration dans plugin.xml :

insert_head prefix_pipelines.php

prefix_pipelines.php :

Astuce pour mise au point : var_dump($flux);

function contacts_affiche_gauche($flux){ if ($flux['args']['exec'] == 'auteur_infos'){ $flux['data'] .= recuperer_fond('prive/boite/selecteur_contacts_comptes', array( 'id_auteur'=>$flux['args']['id_auteur'] ), array('ajax'=>true)); } return $flux; }

Dans les squelettes

#PIPELINE{nom,valeur} [(#PIPELINE{nom,[(#ARRAY{ args,[(#ARRAY{objet,auteur,id_objet,3})] })]})]

Pipeline recuperer_fond

On peut écouter tous les résultats d'un squelette, et le modifier éventuellement avant leur mise en cache.

Astuce dans un squelette

[

(#ENV**|unserialize|print_r{1})

]

'; print_r($var); echo ''; ?>