Thème Simkle et slider
Bonjour tout le monde,
j'utilise le thème Simkle (par http://kaysix.fr/) qui me convient bien pour une petite association : contrainte = très simple et responsive design.
Par contre j'aimerai y ajouter (sur la page d'accueil) un diaporama.
j'ai tenté sans succès Spxwunslider (en me servant du tuto dispo sur ce forum et sur http://www.secretsitebox.fr/blogspx/article8/spxwunslider-unslider-pour-pluxml)
(j'ai installé spxdatas - Version 1.78 et spxwunslider - Version 1.3)
sans succès car je m'y prends sans doute mal ... et mes ailes ne poussent vraiment pas vite :-(
j'ai modifié le fichier home.php de mon thème comme suit :
c'est à dire que j'ai seulement ajouté :
<?php
global $plxShow;
echo ($plxShow->callHook('spxwunslider::getUnsliderID', '001'));
?>
... mais je ne vois aucune différence quant à l'affichage ...
merci du coup de main :-)
tit
j'utilise le thème Simkle (par http://kaysix.fr/) qui me convient bien pour une petite association : contrainte = très simple et responsive design.
Par contre j'aimerai y ajouter (sur la page d'accueil) un diaporama.
j'ai tenté sans succès Spxwunslider (en me servant du tuto dispo sur ce forum et sur http://www.secretsitebox.fr/blogspx/article8/spxwunslider-unslider-pour-pluxml)
(j'ai installé spxdatas - Version 1.78 et spxwunslider - Version 1.3)
sans succès car je m'y prends sans doute mal ... et mes ailes ne poussent vraiment pas vite :-(
j'ai modifié le fichier home.php de mon thème comme suit :
[== Indéfini ==]
<?php include(dirname(__FILE__).'/header.php'); ?>
<?php
global $plxShow;
echo ($plxShow->callHook('spxwunslider::getUnsliderID', '001'));
?>
<div class="mw960p center pad2" role="main">
<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
<article class="art-home pad5" role="article">
<h1 class="txtcenter pad3"><?php $plxShow->artTitle('link'); ?></h1>
<?php $plxShow->artChapo('',false) ?>
c'est à dire que j'ai seulement ajouté :
<?php
global $plxShow;
echo ($plxShow->callHook('spxwunslider::getUnsliderID', '001'));
?>
... mais je ne vois aucune différence quant à l'affichage ...
merci du coup de main :-)
tit
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
http://forum.pluxml.org/viewtopic.php?id=3693&p=1
il pourra peut-être répondre à vos besoins.
Sinon tu peux faire des copies d'écran de l'admin du slider dans la partie widget. Tu as essayé avec un shortcode ?
A plus
Jeje
je vais persévérer encore un peu mais une roue de secours reste plus qu'utile
tit
Oui, on peut commencer par des copies d'écran ... qui présenteront l'avantage de pouvoir dépanner le prochain manchot comme moi qui passera par ce forum
ci-dessous donc 3 copies d'écran avec un commentaire sous chacune d'entre elles .
Merci pour le coup de main Jeje !
titivi
sur ce premier écran je ne vois donc rien
ensuite si je clique sur "nouvelle entrée" j'obtiens l'écran suivant :
ici aussi tout parait vierge ... mais lorsque je clique sur "éditer" j'obtiens alors :
apparaissent bien ici les 2 images que j'ai choisi de mettre dans le slider
je ne sais pas si l'erreur provient d'une mauvaise compréhension de ma part, de droits à corriger (si je peux le faire sur le serveur) ou ... ?
Alors désolé mais je ne comprends vraiment pas le lien entre mon shoushi et le shortcode ; en effet je lis :
Spxshortcodes présentation
Rédigé par je-evrard / 02 juillet 2014 / aucun commentaire
Ce plugin tout simple va vous permettre de créer des shortcodes qui seront utilisables dans les fichiers du thème, des articles, des pages statiques.
tu me demandes si ce plugin fonctionne chez moi ? c'est ça ?
titivi
Mais ça n'enlève pas la grande vertu du principe du shortcode. Quand on a un gros machin de douzaines de lignes de code, et surtout si on a besoin de l'afficher plusieurs fois, c'est un plaisir d'utiliser le diminutif "[grosMachin]" dans notre page aux endroits requis.
En fait quand tu es a cette étape :
Tu donnes un titre a ton slider et tu appuis sur enregistrer. Ceci va créer ton slider et son id (001 normallement). Ce n'est qu'a l'étape d'après ou il faut éditer le contenu (Editer).
Sinon pour info tu peux en installant spxshortcodes mettre les balises shortcodes n'importe ou.
qui remplaceront:
Les balises ont l'avantage d'etre légère et de pouvoir etre placés n'importe ou (themes, statique, articles...)
Autres infos j'ai créé un autre plugin spxwresponsiveslides qui devrait répondre un peu plus a tes besoins. Une petite démo ici. Paramétrable intégralement via shortcode (meme pour un id identique). Il y a un mode pour afficher les thumbs qui sont générés automatiquement via le plugin. Tu peux le télécharger via le spxplugindowloader. Ce plugin a la meme logique que spxwunslider tu ne seras pas perdu.
Sinon j'ai un autre plugin qui gère des mosaique d'images responsive ou non : une démo ici et la avec loading intégré et gestion des erreurs 404. Celui-ci est en attente de validation.
Bonne soirée,
jéjé
ok ; dans un article c'est intéressant merci encore !
J'avance donc doucement :
1/ j'ai inclus les 2 lignes de code php dans la page "home.php" mais il y a encore quelque chose qui m'échappe car les images n'apparaissent pas :-(
(seulement un bandeau bleu avec le titre de la première diapo -la première seulement pas la seconde ; et sachant que mon diaporama ne contient que 2 photos) visible sur http://arborepom.org
2/j'ai fait la même chose dans une page statique après avoir installé ton plugin pour shortcodes : même résultat
cette fois c'est ici : http://www.arborepom.org/index.php?test-page-statique.html
... quand on naît âne on reste âne ...
houhou ! que de bonnes nouvelles !!!
Merci Jéjé :-))
Retourne dans l'admin et éditée le contenu du slider avec tes deux images et resauvegarde.
je réédite ce message et corrige : la "bande bleue" correspond au ciel qui se trouve sur le haut de la photo !!!
sur 2 photos sélectionnées pour le slide apparaît donc la partie supérieure de la première photo seulement
(en ce qui concerne la taille de ces images j'ai choisi pour ce test 2 images 1400x400 en suivant tes remarques :
Cristofoto a écrit :
y a-t-il une dimension d'image à ne pas dépasser pour afficher correctement le photos dans le slider ?
Personnellement je prend du 1400 sur 400 en jpg. Au dela ça sert pas a grand chose.
( lu sur http://forum.pluxml.org/viewtopic.php?id=4696 )
la vieille version de php sur mon serveur peut elle avoir une incidence ?
PluXml version 5.4 (encodage UTF-8)
Version de php : 5.2.17
Apache
État des "magic quotes" : 1
✔ ../../data/configuration/ est accessible en écriture
✔ ../../data/articles/ est accessible en écriture
✔ ../../data/commentaires/ est accessible en écriture
✔ ../../data/statiques/ est accessible en écriture
✔ ../../data/images/ est accessible en écriture
✔ Module apache de réécriture d'url mod_rewrite disponible
✔ Bibliothèque GD installée
✔ Fonction d'envoi de mail disponible
merci
titivi
Concernant la taille maxi des images, c'est aussi fonction de l'emplacement où tu vas mettre tout ça
inutile d'avoir une image en 1400*400 si ton site a une largeur maxi de 960px
Et il doit manquer tout le code CSS du plugin car les classes "spxwunslider", "has-dots", "btn", "display0" et "dots" ne sont pas définies sur ton site
A mon avis le problème d'affichage vient de là. Faut revoir ça avec je-evrard pour confirmation, cf son message de MAJ V1.2
En aparté pour quand ça sera résolu, il sera plus agréable de placer le code (ou shortcode) du slider en dessous de la div "main" sur ta page home.php :
Tititvi (j'adore ce nom)
Tu dois rajouter dans ton header.php de la partie <head> de ton thème les lignes suivantes :
Le pluginsCSS permet notamment de compiler le css de tous les plugins qui comporte un dossier css/site.css et de le compiler a la racine du dossier plugin (site.css)
Ca devrait corriger réellement tes soucis sans compter les autres plugins qui utilisent le meme système.
De plus, je te conseille vraiment d'abonner spxwunslider pour spxwresponsiveslide largement plus souple.
a+
jéjé
super ! tout fonctionne maintenant !
http://arborepom.org
mais je dois avouer que sans vos aides mon niveau technique de base m'aurait contraint à abandonner
1400x400 paraît me convenir quant au rapport largeur/hauteur.
Par contre je ne saisis pas quelle est la meilleure définition à retenir sachant que le site doit être visible sur un moniteur standard, large (et il y a maintenant ai je cru comprendre des écrans larges -supérieurs à 1280 px ? - ) mais aussi depuis un smartphone ?
J'étais donc parti du principe que 1400x400 conviendrait aux grands écrans et que la conversion pour un smartphone était ensuite le boulot du "responsive design" .... mais ici encore je reste un éternel débutant tatonneur !
(et je vois que l'on parle aussi de "mobile first" ; quelle complexité !)
tu as raison, c'est corrigé : merci encore !
Titivi
ps : j'ai depuis changé le plugin sur les conseils de jéjé
c'est modifié et ça fonctionne !
http://arborepom.org
(même si pour moi c'est du niveau "potion magique"
je te remercie d'avoir insisté pour que je le fasse : c'est parfait maintenant ... même s'il me reste à définir, et comme je viens de l'écrire à kowalsky, des formats d'image judicieusement adaptés.
Je suis venu sur ce forum vous questionner avec l'idée d'un simple diaporama sur notre page d'accueil mais finalement ce plugin sympatique va nous permettre d'égayer nos pages de plusieurs diaporamas :-)
Encore merci à toute cette ruche en pleine activité autour de Pluxml :-))
bzzzzzz
Titivi
C'est à cela que sert le forum
La taille (en pixels) et la résolution (px/cm) d'une image influent sur le poids de celle-ci (sa taille en Ko, Mo) et donc sur le temps de chargement. D'où l'intérêt dans certains cas d'utiliser des images miniatures (poids réduit) plutôt que d'afficher des images de grands tailles redimensionnées par CSS (mais qui gardent donc leur poids élevé).
Dans ton cas, tes deux images bien qu'ayant une taille de 1400x400 ne font que 120ko chacune à charger, ce qui est bien optimisé, l'on ne ressent aucun retard à l'affichage initial du site.
C'est aussi autant de bande passante gagnée quand on consulte le site via un mobile.
Ce qui amène à la suite : "responsive design", "mobile first" et autre "site web adaptatif" sont des notions certes techniques, mais pas si compliquées à comprendre.
Je reprends à dessein la description du framework PluCSS :
Et tout cela donne un site web adaptatif
Pour faire très simple, PluXml en version 5.4 est pensé comme cela.
Le "mobile first" c'est justement d'optimiser le site pour un affichage sur mobile
Tu as sans doute dû voir il y a quelques années des bandeaux de ce type en bas de site : "Ce site est optimisé pour Internet Explorer et s'affiche en 1024x768", cela signifie que quelque soit la taille de ton écran, le site s'affichera avec une largeur de 1024 pixels et une hauteur de 768 pixels (et que le code html et css utilisé ne respectait pas tout le temps les préconisations du W3C en la matière permettant un affichage identique quelque soit le navigateur).
Regarder un site comme cela depuis un mobile, ce n'est pas pratique, faut scroler et zoomer en permanence
Mais pas que. En "mobile first" on s'assurera aussi qu'un menu qui ne s'ouvre que lorsque l'on passe la souris dessus depuis un ordinateur ait un équivalent fonctionnel lorsqu'une souris n'est pas présente (comme faire ouvrir le menu en touchant un raccourci sur l'écran). Sinon ça va être difficile de l'ouvrir ce menu
Le "responsive design" pour faire simple, c'est utiliser des dimensions en valeur relatives (% ou "em") plutôt que fixes (px).
Ainsi par défaut tout écran aura une largeur/hauteur de 100%, que ce soit sur un mobile, une tablette, un ecran de netbook ou l’écran d'une télé 4k (3840px × 2160px)
Le site prendra par défaut la largeur de l'écran que l'on utilise.
Mais pas que.
La plupart des sites sont sur le modèle suivant : généralement les articles à droite, et le menu à gauche. Avec notre site optimisé 1024x768, on donnait une largeur fixe au menu, disons 205 px. En responsive design on lui donnera une largeur de 20%. La largeur des articles et du menu resteront proportionnels quelque soit la taille de l’écran.
Mais pas que (2ème)
Il faut aussi donner des dimensions minimales et maximales à un site pour une meilleure lisibilité.
Cela se fait au niveau du CSS avec les media-queries.
Ainsi avec une approche "mobile first", en dessous d'une largeur d’écran de 800px (par exemple) on transformera l'affichage précédent en deux colonnes avec un bloc article à 80% et un bloc menu à 20% en un affichage sur une seule colonne avec un bloc article à 100% et un bloc menu de 100%, ce qui aura pour effet de faire passer le menu en dessous (ou au dessus, au choix) des articles.
Ce que tu peux constater en redimensionnant la fenêtre de ton navigateur en consultant ton site.
Mais avec un écran d'une largeur supérieur à 1280px, on voudra sans doute en limiter l'affichage en largeur afin d'éviter que tout ne s'étale. On y incluera donc donc une largeur maximale ("max-width" en CSS).
Avant correction, le slider se trouvait en dehors du bloc "main" dont la taille était limitée à 960px. Il s'affichait donc sur toute la largeur de l'écran.
Après correction (avec l'ancien), celui-ci était à l'intérieur d'un bloc de largeur maximale de 960px et donc s'affichait en harmonie avec le reste de la page.
Avec le nouveau slider, tu y gagnes en plus le redimensionnement automatique des images, puisque leur largeur est de 100%. C'est à dire, prendre 100% de la largeur disponible dans le bloc qui les contient (donc 960px en affichage optimal).
Tu constates donc qu'il est possible d'optimiser encore un peu plus tes images avec le thème que tu utilises - j'attire ton attention sur "avec le thème que tu utilises" -, et de réduire le gabarit de tes images de 1400x400 à 960x350, ce qui en réduira d'autant le poids, et donc la vitesse d'affichage pour tes lecteurs. Ça te permet aussi de mieux gérer le recadrage depuis tes images d'origines.
Si tu utilises un plugin pour cela, vérifie si le CSS est fonctionnel car à nouveau j'ai l'impression qu'il te manque un bout de code. Les classes "cibulFrame" et "cbpgbdy" ne sont pas définies.
Une solution rapide (mais pas terrible) pour afficher l'agenda est de modifier l'attribut scrolling="no" en scrolling="yes".
Je vais donc y (re)songer maintenant
Ok pour la remarque "avec le thème" : il faut peut-être alors trouver un équilibre entre adaptation "presque" parfaite au thème et souplesse de réutilisation ... car si ce thème me convient aujourd'hui il n'y a aucune raison qu'une idée -saugrenue ou réfléchie- me donne envie d'en changer !
Mais il est intéressant par ailleurs, dans ce monde qui n'est fait que de 0 et de 1, qu'il n'y ait non pas une règle absolue mais des choix variés qui ont tous leurs avantages !
Ton message n'est pas pour moi une réponse ... mais un véritable cours d'initiation qui a pris place dans mes notes archivées en local ... sur un pluxml :-))
Et qui sait : peut-être m'aidera-t-il un jour à me plonger dans la découverte du "CSS" (ce que je n'ai pour le moment jamais réussi à faire !)
Encore merci kowalsky :-)
Titivi
non : je me suis contenté de copier l'iframe proposée par opendata.com à savoir : inutile de te dire que je n'imagine pas d'où peut provenir l'erreur ... j'ai juste regardé si src="//openagenda.com/js/embed/cibulBodyWidget.js"
pointe bien vers un lien valide ... ce qui me paraît être le cas (puisque j'ai en réponse une page ... dans une langue qui n'est pas la mienne
c'est donc ce que j'ai fait pour le moment.
Que me conseillerais tu d'autre ? de questionner opendata.com ?
(mais alors quel est le souci d'affichage ... parce que mes petits yeux n'ont rien notés d'anormal :-((
Merci !
Titivi
Ok, j'ai compris. Mes paramètres de sécurité bloquent par défaut tout ce qui est externe au site consulté. Or la mise en page des rendez-vous provient du widget d'openagenda. C'est pour cela que cela s'affichait mal chez moi.
En l'état, tu n'as rien à faire de plus sur ton site. :P
///
Pour continuer l'apprentissage ]:D après avoir vu les notions de "site web adaptatif", "responsive design" et "mobile first", c'est le moment de parler de l'accessibilité du web.
Si tu désactives temporairement l'exécution de javascript sur ton navigateur, tes petits yeux pourront voir que cela s'affiche mal sans (mais que suite à la petite modification apportée, c'est contournable)