Site au papillon

herve · juillet 2023

Bonjour,

Pour vous dire que je suis un nouvel adepte de pluxml, car j'ai réalisé avec mon micro-blog : le papillon embarrassé à https://papillonembarrasse.ouvaton.org

Je suis assez content de sa simplicité. Un seul petit problème : les images qui sur les mobiles ne se recadrent pas correctement, leurs proportions ne sont pas respectées. Et sans parler qu'il y a un "2630" bizarre qui apparait en haut à droite. Sinon tout est nickel.

Merci aux concepteurs, codeurs, etc !

kowalsky · juillet 2023

salut @herve
Pour les images, vérifie si tu ne forcerais pas la taille de celles-ci dans ton site, car elles ont toutes la même taille : width: 600px; height: 450px; . ce qui prends le dessus par rapport au code par défaut height: auto; max-width: 100%;

Pour le 2630 cela vient de la ligne 603 de ton fichier theme.css, c'est l’icône du menu. Quand je compare avec le thème par défaut, il semble manquer le caractère "barre oblique inversée" dans ton code, sans doute un problème d'encodage ou de conversion au moment de l'enregistrement du fichier.
Le bon code : @media (max-width: 767px) .responsive-menu label::after { content: '\2630'; }

En aparté tu as aussi un problème avec les titres de tes articles qui n'apparaissent pas et sont remplacés par des - ou des |.

Revient sur le thème par défaut pour voir si tu as encore ces petits soucis. Si ce n'est pas le cas, il faudra revoir les modifications que tu as faites à ton thème actuel (qu'il est mieux de renommer autrement pour toujours avoir le "thème par défaut" disponible sur son site en cas de problème)

herve · juillet 2023

Merci @kowalsky .

Pour les modifs du thème, j'ai tout fait à partir de l'administration / paramètres / thème / Editer les fichiers du thème. J'ai pas remarqué qu'il proposait de renommer ou quelque chose comme ça ?

Pour le 2630, je repère bien l'endroit par l'édition du theme.css, je vois
.responsive-menu label:after {
content: '2630';
je mets '\2630', je sauvegarde, apparemment il recharge le fichier, mais il me remet '2630' !

Pour les images, oui je leur donne une taille dans les "Propriété de l'image", vu que l'éditeur me le propose. Si je mets l'image en taille originale j'ai peur qu'elle soit trop grande ?... L'idéal pour moi ça serait une image vignette, mais pas trop petite, disons de la taille où je les mets actuellement et que quand on clique dessus pouf ! on voit l'image en taille originale, ou du moins de la taille de l'écran.

Pour les titres, ça sont vraiment les "titres" que je donne. En fait, je voudrais pas de titre, ou juste une sorte de date écrite en petit. J'avais trouvé ce système de mettre des "-" et des "|" mais apparemment ça donne l'idée qu'il y a une erreur dans le titre. Je vais réfléchir à un autre système, merci pour le retour !

Et merci pour tous les conseils, à bientôt.

gcyrillus-nomade · juillet 2023

bonjour @herve

je mets '\2630', je sauvegarde, apparemment il recharge le fichier, mais il me remet '2630' !

C'est un problème connu et récurrent dans PluXml.

au moment d'enregistré tes modifications, les scripts de PluXml nettoient les données, il te faut alors doubler en \\ ton \2630 pour que l'enregistrement conserve uniquement \2630.
Le doublement de tous les \ sont à faire dans les fichiers que tu enregistre depuis l'administration si tu veut les conservé .Il n'y a pas que les unicodes, il y a aussi tout les scripts JavaScript ou PHP où ce caractères d'échappement est régulièrement utilisé (rien de tel pour détruire une regex ou l'echo d'une chaine ... );
C'est valable pour tous les fichiers du thème mais aussi les articles ainsi que les pages statiques.

Agacer par ce défaut , je m’était fait un plugin, pour au moins doublé tous les \ déjà présent: voir le post https://forum.pluxml.org/discussion/6960/plugin-plx-cssbackslash-pour-ledition-des-fichiers-css

La solution pour Pluxml :

virer cette fonction casse-bonbon
ou intégrer le petit js du plugin nativement

Le plus efficace à mon humble avis serait de virer cette fonction de PluXml dont je n'ai toujours pas trouvé l'utilité (il y en a probablement une car ce n'est pas tombé dans les scripts de pluXml par hasard non plus).

A défaut de ces deux soluces non intégrées à PluXml, reste le plugin à mettre en œuvre pour ceux qui éditent leurs fichiers principalement depuis l'admin.Le plugin se borne à ajouter le js dans la partie admin pour remettre les \ en \\ à votre place.

cdt

edit et pour infos:
dans le fichier theme.css (theme par defaut) , il y a 2 endroits ou il y a un unicode :
ligne 119:

.menu>li span::before {/* \/ menu */
    content: '\25bc';
    padding-right: 0.5rem;
}

Puis:
ligne 602

    .responsive-menu label:after {
        content: '\2630';
    }

ainsi que dans le fichier plucss.css
ligne 652

.modal-btn-close:after {
    display: inline-block;
    content: "\00d7"; /* This will render the 'X' */
}

kowalsky · juillet 2023

@gcyrillus-nomade Bien vu, j'avais oublié ce bug d'enregistrement !
Solution de contournement simple, éditer les différents fichiers sur son ordinateur et les télécharger ensuite en FTP sur son serveur

@herve "En fait, je voudrais pas de titre, ou juste une sorte de date écrite en petit." Dans ce cas il te suffit juste de titrer tes articles avec une date, c'est assez courant sur le net. Tu peux t'inspirer de la norme ISO 8601 (2023-07-11T10:28) qui a aussi l'avantage de trier par ordre alphanumérique les articles
Pour la taille du titre, c'est à modifier en css
Pour les images, tu as la possibilité d'utiliser les vignettes du gestionnaire de média, si activé. Paramètres -> Options d'affichage -> Taille des images (largeur x hauteur) / Taille des miniatures (largeur x hauteur) / Créer miniatures

herve · juillet 2023

Merci à tous !

Alors suivant vos conseils j'ai mis une image mais sans donner d'instruction sur la taille, comme me le demande la fenetre de propriété, à part juste une ligne d'encadrement, et ça fonctionne beaucoup mieux : non seulement l'image prend une taille qui me convient, mais en plus elle ne se distortionne plus sur les mobiles. Voir la merveille https://papillonembarrasse.ouvaton.org/index.php?article51/une-petite-maison

(il faudrait du coup que je revoye toutes mes images mais ça me fatigue)

J'ai aussi modifié en le téléchargeant theme.css, non plus depuis l'administration, pour y mettre les . Maintenant sur la version mobile on voit bien un symbole de menu, et non plus un 2630. Il vaut donc mieux ne pas utiliser du tout la modification des fichiers depuis l'interface web me semble-t-il.

Pour les titres je vais y réfléchir.

Merci beaucoup et à bientôt.

kowalsky · juillet 2023

(il faudrait du coup que je revoye toutes mes images mais ça me fatigue)

L'avantage avec PluXml c'est que si ton code est identique pour toutes tes images, tu peux faire une édition globale en local et remplacer en masse ton code directement dans les fichiers articles, puis les renvoyer sur ton site.

gcyrillus-nomade · juillet 2023

Bonjour,

J'ai aussi modifié en le téléchargeant theme.css, non plus depuis l'administration, pour y mettre les . Maintenant sur la version mobile on voit bien un symbole de menu, et non plus un 2630. Il vaut donc mieux ne pas utiliser du tout la modification des fichiers depuis l'interface web me semble-t-il.

Non, comme déjà dit, tu peux, mais comme n'importe quel outils, il y a des précautions à prendre. La seule ici est de s'assurer de bien échapper tout les \ de ton code en \\ avec ou sans le plugin . Comme un vélo, tu peut aller vite dans les descente si tu as des freins et que tu t'en sert

En fait, je voudrais pas de titre, ou juste une sorte de date écrite en petit

Pour ne pas avoir de titre affiché (il faut en avoir un coté administration , c'est lui qui finalise l'url de ton article) . Il te suffit de retirer des templates le code qui l'affiche, ou remplacer la balise dans laquelle il se trouve .
Dans le theme par défaut , les titres des articles sont affichés comme suit:

                            <h2>
                                <?php $plxShow->artTitle('link'); ?>
                            </h2>

Tu peut le retirer et plus de titre ou transformer les <h2> en <small> ou <sub>, <sup> .en les insérant dans un <p>.

Pour afficher la date à la place, idem prend la balise que tu souhaites et utilise la fonction qui affiche la date de l'article.
Elle se trouve dans le code html du <header> de ton article :

                            <span class="art-date">
                                <time datetime="<?php $plxShow->artDate('#num_year(4)-#num_month-#num_day'); ?>">
                                    <?php $plxShow->artDate('#num_day #month #num_year(4)'); ?>
                                </time>
                            </span>

La fonction $plxShow->artDate()as quelques options d'affichage, la doc explique tout : https://wiki.pluxml.org/docs/develop/plxshow.html#artdate

Les articles sont affiché à partir de :

article.php
home.php
categorie.php
tag.php
archive.php

Pense à mettre chacun des ses fichiers à jours pour garder une cohérence visuelle.

Cdt

Site au papillon

Réponses