Forum du site

Mise en page - Article
damir le 7 mars 2018 à 14:20	Rappel du sujet : Bonjour Si dans un article je souhaite faire de la mise en page avancé disons mettre côte à côte un texte et une image et et jouer sur la position verticale de l’un par rapport à l’autre ?
Jean Christophe Villeneuve le 7 mars 2018 à 14:29	Mise en page - Article Pour mettre du texte à côté d’une image et jouer sur leur position, tu peux utiliser un tableau d’une ligne et 2 colonnes.
Jaseur Boréal le 7 mars 2018 à 14:46	Mise en page - Article Bonjour, Aujourd’hui j’utilise avec plaisir le plugin "Insertion avancée d’images" réalisé par Arno (paris-Beyrouth), car cela solutionne les différences d’affichage des images et des textes selon les écrans ... la mise en page n’est pas statiques, elle s’adapte avec intelligence selon les dimensions d’écrans. Les possibilités de varier l’affichage des images mises en pages selon les contenus sont excellentes. Les exemples ici : https://www.paris-beyrouth.org/Plugin-SPIP-Insertion-avancee-d-images
damir le 8 mars 2018 à 08:07	Mise en page - Article @Jean Christophe Villeneuve oui je connais c’est la méthode html3.2 😉 je souhaitais faire un truc en div avec css3 et les float, inline-block mais pour cela il faut acceder au code html de l’article @Jaseur Boréal Cela a l’air pas mal
Jaseur Boréal le 8 mars 2018 à 10:11	Mettre côte à côte texte et image & jouer sur la position verticale de l’un par rapport à l’autre Bonjour, Un texte peut s’afficher à coté d’une image sur un écran de bureau, sous l’image ou au dessus de l’image en format portrait d’une tablette, sans image sur un écran de smartphone. Que souhaites-tu par : "Mettre côte à côte texte et image & jouer sur la position verticale de l’un par rapport à l’autre " C’est à dire ? As-tu un lien vers un exemple à montrer ?
damir le 8 mars 2018 à 11:51	Mise en page - Article Je teste en local J’ai ceci : voir crop_article.jpg et je souhaiterais : voir crop_article_final.jpg
damir le 8 mars 2018 à 11:53	Mise en page - Article en final je souhaiterais si possible
Jaseur Boréal le 8 mars 2018 à 12:17	2 colonnes mises en page dans un article : nouveau modèle ou nouvelle page-article ? Et comment souhaites-tu afficher cela sur un écran mobile de tablette ou/et de smartphone ? Avec 2 colonnes qui s’affichent sur un écran de bureau, cela fera une seule colonne affichée sur un écran de smartphone ! Or en 2018, ce sont plus de 50% des consultations d’internet qui se font sur tablettes et smartphones, donc sur petits écrans. C’est pour @JC : un truc spécial FLEXBOX à inventer dans escal, en plus de ce qui existe avec le choix d’affichage d’un article en "Pleine-Page", inventer une nouvelle solution d’affichage d’article en "deux-colonnes" avec une page spécifique. Exemple : https://la-cascade.io/techniques-flexbox-3-layout-sur-2-colonnes/ Qu’en pensez-vous ?
Jean Christophe Villeneuve le 8 mars 2018 à 16:20	Mise en page - Article Bon, déjà si veux l’image à droite du texte, il faut utiliser `<imgXX\|right>` mais ça risque de ne pas faire très joli car en fait tu sembles utiliser une largeur assez grande pour ton site. On pourrait evoir une URL de ton site ?
damir le 9 mars 2018 à 07:44	Mise en page - Article @Jean Christophe Villeneuve Pour l’Url c’est pas possible je fais du local pour le moment histoire de tester la bête 🙂
damir le 9 mars 2018 à 08:19	Mise en page - Article @Jaseur Boréal Oui c’est vrai que de nos jours les sites doivent être conçeptualisé "mobile first" dès le départ Avec mon choix mise en page 3 cols et la partie centrale avec texte et image en 2 cols c’est compliqué sous 600px La quantité de texte et la taille de l’image influencent grandement le rendu. A ce sujet la noisette acces-direct reproduit l’article entièrement l’article vers lequel elle pointe Cela fait quasi doublons sur mobile
Jean Christophe Villeneuve le 9 mars 2018 à 18:18	Mise en page - Article Oui, la noisette acces-direct comme d’autres affiche tout l’article. Cette noisette était prévue pour mettre juste des liens mais on peut bien sur la détourner à un autre usage. Tu as testé le mot-clé "texte2colonnes" de la dernière version ? Qu’en penses-tu ?
damir le 10 mars 2018 à 08:54	Mise en page - Article @jcv J’ai la v3.87.76 Dans le menu spip -installé plugins- l’acces à Escale est flouté et on m’informe que la v4.05 est déjà installée. Cela s’est fait automatiquement ou c’est juste une histoire d’affichage dans le gestionnaire. * au moment ou j’ecrivais ces lignes j’ai cliqué quelque part et je me suis retrouvé sur une page qui me dit de ne surtout pas desinstaller mais de rendre inactive la version courante* oufff J’ai installé la v4 et associé le mot clé texte2colonnes dans affichage pour mon article "hérisson" Le resultat me fait penser à la gestion du flux par Indesign : le flux passe de la colonne de gauche vers la droite. Je me rend compte que ce que je souhaite est trop spécifique. Cela reviendrait à créer un editeur html —> ajouter du code personnalisé dans les pages :)
Jaseur Boréal le 10 mars 2018 à 09:41	Mise en page d’ article en deux colonnes : l’une avec le texte, l’autre avec l’image Bonjour, A force de nager dans diverses techniques et solutions pour reproduire texte et image en imagination peut-être revenir à la source du besoin est-il bon ? A quel besoin d’un visiteur-lecteur cette présentation, d’un texte à gauche et de son image unique attachée à droite va t-elle répondre ? Si ce lecteur regarde la page sur une tablette en format portrait, comment faut-il que la page s’affiche ? Si ce même lecteur change l’orientation de sa tablette, comment faut-il que la page s’affiche ? Si ce lecteur consulte la page sur un smartphone avec un écran de 5’ de diagonale, est-ce que l’image a besoin de s’afficher, au risque de ralentir le chargement de la page depuis un réseau mobile ? Qu’est ce qui est le plus important pour le visiteur ? Accéder vite et facilement au texte référencé par les moteurs de recherche ? Voir l’image dans son emplacement forcé à droite en haut ? Sont-ce les deux ? Il y a plein de solutions techniques, comme celle d’adopter un "squelette-spécial" pour certaines pages soit les ranger dans une seule rubrique spéciale, soit auxquelles on aura attribué un mot-clé spécialement adapté, etc ... Un exemple de solution expliquée ici par le plugin "SPMC : Squelette par mot clé" {{Autre solution : Un squelette spécial pour la rubrique n°5}} Pour avoir une mise en page propre à la rubrique N° 5, il vous suffit d’écrire votre squelette dans un fichier appelé : rubrique=5.html {{Un squelette spécial pour les sous-rubriques}} Si vous voulez que ce squelette spécial s’applique aussi aux sous-rubriques de la rubrique 5, il vous faut appeler le fichier de squelette correspondant : rubrique-5.html Même chose pour les articles De même, vous pouvez écrire un {{squelette particulier pour tous les articles de la rubrique 5}}, ou pour tous les articles de la rubrique 5 et de ses sous-rubriques : article=5.html ou article-5.html {{ATTENTION}} Si vous utilisez ce système de spécialisation de squelettes, vous devrez recopier, même si vous ne devez pas les modifier, les fichiers standards rubrique.html et article.html dans votre répertoire de squelette. {{C'est expliqué ici : https://www.spip.net/fr_article3445.html}} @+
Jaseur Boréal le 10 mars 2018 à 11:08	Mise en page particulière d’une page article dédiée à un hérisson (suite) Il existe aussi la solution d’afficher une "Image" comprenant à la fois texte et dessin, mise en page comme on le souhaite .... . Correctement renseignée avec son titre, son descriptif et son contenu, cette image sera référencée par les moteurs de recherche selon son contenu avec le texte et le dessin. On peut aussi se poser la question de l’utilité d’une telle page "le hérisson de Maurice Carème" quand elle existe déjà à profusion sur de nombreux autres sites web. (Ça doit probablement être un chti, car Damien, maire à Grande-Synthe porte le même nom !). Cadeau ce lien pour en télécharger sur framasoft un Hérisson mis en page : Le hérisson.pdf : https://framadrop.org/r/TRQUmbsYph#70dFcxNsbq9F6kPRKM2HrgE+Y+UIzVOc5GBNoctniBg= (dernier délai pour télécharger : mercredi 9 mai 2018 11:53) Ceci pour montrer qu’aujourd’hui l’outil de communication prisé par les internautes de tous âges est la vidéo, et qu’à mon sens, il est plus judicieux de passer du temps pour être bien vu et bien lu, que de s’arracher les cheveux gris pour placer une image bien à droite ! Cordialement, je Jase au Nord !
Jean Christophe Villeneuve le 10 mars 2018 à 13:30	Mise en page - Article Hello Damir Si tu mets ton image après le texte, tu ne dois pas être loin de ce que tu veux.
Jaseur Boréal le 10 mars 2018 à 14:22	Mise en page - Article @JC Bizarre mon premier message de ce matin n’est pas passé ... celui avant le (suite)
Jean Christophe Villeneuve le 10 mars 2018 à 15:43	Mise en page - Article Erreur de ma part ... corrigée. Sorry !
damir le 11 mars 2018 à 08:36	Mise en page - Article @JB le poême etait là pour donner du corps (contenu) à la page de test du contenant Article quand à savoir si cela vaudrait la peine d’être publié c’est en effet une question d’objectif et de marketing. @JCV j’ai vu, en fait ma question de départ reposait sur le côté purement technique : ajouter d’autres élements html, pouvant être utile, à la barre de menu de la page article. On peut clore le débat Bon dimanche PS : faut que je regarde si il y a déjà une file sur le sujet de la "video sur mobile" 😉

damir
le 7 mars 2018
à 14:20

Rappel du sujet :

Bonjour

Si dans un article je souhaite faire de la mise en page avancé
disons mettre côte à côte un texte et une image et et jouer sur la position verticale de l’un par rapport à l’autre ?

Jean Christophe Villeneuve
le 7 mars 2018
à 14:29

Mise en page - Article

Pour mettre du texte à côté d’une image et jouer sur leur position, tu peux utiliser un tableau d’une ligne et 2 colonnes.

Jaseur Boréal
le 7 mars 2018
à 14:46

Mise en page - Article

Bonjour,

Aujourd’hui j’utilise avec plaisir le plugin "Insertion avancée d’images" réalisé par Arno (paris-Beyrouth), car cela solutionne les différences d’affichage des images et des textes selon les écrans ... la mise en page n’est pas statiques, elle s’adapte avec intelligence selon les dimensions d’écrans. Les possibilités de varier l’affichage des images mises en pages selon les contenus sont excellentes.

Les exemples ici : https://www.paris-beyrouth.org/Plugin-SPIP-Insertion-avancee-d-images

damir
le 8 mars 2018
à 08:07

Mise en page - Article

@Jean Christophe Villeneuve
oui je connais c’est la méthode html3.2 😉
je souhaitais faire un truc en div avec css3 et les float, inline-block
mais pour cela il faut acceder au code html de l’article

@Jaseur Boréal
Cela a l’air pas mal

Jaseur Boréal
le 8 mars 2018
à 10:11

Mettre côte à côte texte et image & jouer sur la position verticale de l’un par rapport à l’autre

Bonjour,

Un texte peut s’afficher

à coté d’une image sur un écran de bureau,
sous l’image ou au dessus de l’image en format portrait d’une tablette,
sans image sur un écran de smartphone.

Que souhaites-tu par : "Mettre côte à côte texte et image & jouer sur la position verticale de l’un par rapport à l’autre "

C’est à dire ?
As-tu un lien vers un exemple à montrer ?

damir
le 8 mars 2018
à 11:51

Mise en page - Article

Je teste en local

J’ai ceci : voir crop_article.jpg

et je souhaiterais : voir crop_article_final.jpg

damir
le 8 mars 2018
à 11:53

Mise en page - Article

en final je souhaiterais si possible

Jaseur Boréal
le 8 mars 2018
à 12:17

2 colonnes mises en page dans un article : nouveau modèle ou nouvelle page-article ?

Et comment souhaites-tu afficher cela sur un écran mobile de tablette ou/et de smartphone ?

Avec 2 colonnes qui s’affichent sur un écran de bureau, cela fera une seule colonne affichée sur un écran de smartphone ! Or en 2018, ce sont plus de 50% des consultations d’internet qui se font sur tablettes et smartphones, donc sur petits écrans.

C’est pour @JC : un truc spécial FLEXBOX à inventer dans escal, en plus de ce qui existe avec le choix d’affichage d’un article en "Pleine-Page",
inventer une nouvelle solution d’affichage d’article en "deux-colonnes" avec une page spécifique.

Exemple : https://la-cascade.io/techniques-flexbox-3-layout-sur-2-colonnes/

Qu’en pensez-vous ?

Jean Christophe Villeneuve
le 8 mars 2018
à 16:20

Mise en page - Article

Bon, déjà si veux l’image à droite du texte, il faut utiliser <imgXX|right> mais ça risque de ne pas faire très joli car en fait tu sembles utiliser une largeur assez grande pour ton site.

On pourrait evoir une URL de ton site ?

damir
le 9 mars 2018
à 07:44

Mise en page - Article

@Jean Christophe Villeneuve
Pour l’Url c’est pas possible je fais du local pour le moment histoire de tester la bête 🙂

damir
le 9 mars 2018
à 08:19

Mise en page - Article

@Jaseur Boréal
Oui c’est vrai que de nos jours les sites doivent être conçeptualisé "mobile first" dès le départ
Avec mon choix mise en page 3 cols et la partie centrale avec texte et image en 2 cols c’est compliqué sous 600px
La quantité de texte et la taille de l’image influencent grandement le rendu.

A ce sujet la noisette acces-direct reproduit l’article entièrement l’article vers lequel elle pointe
Cela fait quasi doublons sur mobile

Jean Christophe Villeneuve
le 9 mars 2018
à 18:18

Mise en page - Article

Oui, la noisette acces-direct comme d’autres affiche tout l’article. Cette noisette était prévue pour mettre juste des liens mais on peut bien sur la détourner à un autre usage.

Tu as testé le mot-clé "texte2colonnes" de la dernière version ? Qu’en penses-tu ?

damir
le 10 mars 2018
à 08:54

Mise en page - Article

@jcv
J’ai la v3.87.76
Dans le menu spip -installé plugins- l’acces à Escale est flouté et on m’informe que la
v4.05 est déjà installée. Cela s’est fait automatiquement ou c’est juste une histoire d’affichage dans le gestionnaire.

*** au moment ou j’ecrivais ces lignes j’ai cliqué quelque part et je me suis retrouvé sur une page qui me dit de ne
surtout pas desinstaller mais de rendre inactive la version courante*** oufff

J’ai installé la v4 et associé le mot clé texte2colonnes dans affichage pour mon article "hérisson"
Le resultat me fait penser à la gestion du flux par Indesign : le flux passe de la colonne de gauche vers la droite.

Je me rend compte que ce que je souhaite est trop spécifique. Cela reviendrait à créer un editeur html —> ajouter du code personnalisé dans les pages :)

Jaseur Boréal
le 10 mars 2018
à 09:41

Mise en page d’ article en deux colonnes : l’une avec le texte, l’autre avec l’image

Bonjour,
A force de nager dans diverses techniques et solutions
pour reproduire texte et image en imagination
peut-être revenir à la source du besoin est-il bon ?

A quel besoin d’un visiteur-lecteur cette présentation, d’un texte à gauche et de son image unique attachée à droite va t-elle répondre ?

Si ce lecteur regarde la page sur une tablette en format portrait, comment faut-il que la page s’affiche ?
Si ce même lecteur change l’orientation de sa tablette, comment faut-il que la page s’affiche ?
Si ce lecteur consulte la page sur un smartphone avec un écran de 5’ de diagonale, est-ce que l’image a besoin de s’afficher, au risque de ralentir le chargement de la page depuis un réseau mobile ?

Qu’est ce qui est le plus important pour le visiteur ?

Accéder vite et facilement au texte référencé par les moteurs de recherche ?
Voir l’image dans son emplacement forcé à droite en haut ?
Sont-ce les deux ?

Il y a plein de solutions techniques,
comme celle d’adopter un "squelette-spécial" pour certaines pages soit les ranger dans une seule rubrique spéciale, soit auxquelles on aura attribué un mot-clé spécialement adapté, etc ...

Un exemple de solution expliquée ici par le plugin "SPMC : Squelette par mot clé"

{{Autre solution : Un squelette spécial pour la rubrique n°5}}
Pour avoir une mise en page propre à la rubrique N° 5, il vous suffit d’écrire votre squelette dans un fichier appelé : rubrique=5.html

{{Un squelette spécial pour les sous-rubriques}}
Si vous voulez que ce squelette spécial s’applique aussi aux sous-rubriques de la rubrique 5, il vous faut appeler le fichier de squelette correspondant : rubrique-5.html
Même chose pour les articles

De même, vous pouvez écrire un {{squelette particulier pour tous les articles de la rubrique 5}}, ou pour tous les articles de la rubrique 5 et de ses sous-rubriques : article=5.html ou article-5.html

{{ATTENTION}} Si vous utilisez ce système de spécialisation de squelettes, vous devrez recopier, même si vous ne devez pas les modifier, les fichiers standards rubrique.html et article.html dans votre répertoire de squelette.
{{C'est expliqué ici : https://www.spip.net/fr_article3445.html}}

@+

Jaseur Boréal
le 10 mars 2018
à 11:08

Mise en page particulière d’une page article dédiée à un hérisson

(suite)
Il existe aussi la solution d’afficher une "Image" comprenant à la fois texte et dessin, mise en page comme on le souhaite .... .
Correctement renseignée avec son titre, son descriptif et son contenu, cette image sera référencée par les moteurs de recherche selon son contenu avec le texte et le dessin.

On peut aussi se poser la question de l’utilité d’une telle page "le hérisson de Maurice Carème" quand elle existe déjà à profusion sur de nombreux autres sites web. (Ça doit probablement être un chti, car Damien, maire à Grande-Synthe porte le même nom !).

Cadeau ce lien pour en télécharger sur framasoft un Hérisson mis en page :
Le hérisson.pdf : https://framadrop.org/r/TRQUmbsYph#70dFcxNsbq9F6kPRKM2HrgE+Y+UIzVOc5GBNoctniBg=
(dernier délai pour télécharger : mercredi 9 mai 2018 11:53)

Ceci pour montrer qu’aujourd’hui l’outil de communication prisé par les internautes de tous âges est la vidéo, et qu’à mon sens, il est plus judicieux de passer du temps pour être bien vu et bien lu, que de s’arracher les cheveux gris pour placer une image bien à droite !

Cordialement, je Jase au Nord !

Jean Christophe Villeneuve
le 10 mars 2018
à 13:30

Mise en page - Article

Hello Damir

Si tu mets ton image après le texte, tu ne dois pas être loin de ce que tu veux.

Jaseur Boréal
le 10 mars 2018
à 14:22

Mise en page - Article

@JC Bizarre mon premier message de ce matin n’est pas passé ... celui avant le (suite)

Jean Christophe Villeneuve
le 10 mars 2018
à 15:43

Mise en page - Article

Erreur de ma part ... corrigée.

Sorry !

damir
le 11 mars 2018
à 08:36

Mise en page - Article

@JB le poême etait là pour donner du corps (contenu) à la page de test du contenant Article
quand à savoir si cela vaudrait la peine d’être publié c’est en effet une question d’objectif et de marketing.

@JCV j’ai vu, en fait ma question de départ reposait sur le côté purement technique : ajouter d’autres élements html, pouvant être utile, à la barre de menu de la page article.

On peut clore le débat

Bon dimanche

PS : faut que je regarde si il y a déjà une file sur le sujet de la "video sur mobile" 😉

Edito