PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#26 29/08/2017 16:15:38

Pierre
Membre
Lieu : La belle province
Inscription : 22/06/2014
Messages : 1 099

Re : [thème] Masonic

Un carrousel, c'est toute une aventure à incorporer dans un thème existant.  C'est habituellement un critère de sélection avant de commencer.  Mon option de d'utiliser une fonction qui tire les images d'accroche est certainement plus simple.  Reste à choisir si on veut:

1- tirer cette image d'une catégorie à part, simplement pour piger une image dans les accroches des "faux" articles qui lui sont assignés
2- utiliser tout bonnement l'image d'accroche des articles réguliers du site

Dans les deux options, la fonction à utiliser serait lastArtList(), et dans les deux cas il est possible de faire une rotation aléatoire pour faire plus vivant et ne pas toujours voir la même image. 

Le deuxième choix implique le critère maintenant célèbre parmi mes thèmes, celui de l'image d'accroche obligatoire avec tous les articles, c'est à prendre ou à laisser...

D'autres options existent mais je me limiterais à celles-ci pour rester dans la simplicité.  Sinon, de retour au catalogue de thèmes.


#titanic {
    float: none;
    bottom: 0;
}

Hors ligne

#27 29/08/2017 16:38:08

webasso
Membre
Inscription : 04/10/2013
Messages : 283

Re : [thème] Masonic

... Pierre, j'ai utilisé le terme carrousel parce que je ne savais pas comment nommer la fonction adéquat

Mon idée c'est d'utiliser quelques images spécifiques à l'entête et qui tournent sur elles-mêmes...Parce qu'utiliser les images des articles ça va sûrement alourdir le site dans sa consultation et impliquer que ces images soient de taille acceptable  pour qu'elles soient bien nettes (celle du thème fait 1350x500 px)

Il semble d'après ce que je comprends que c'est l'option 1 qui convienne, c'est ça ?
Comment la mettre en oeuvre ?

Hors ligne

#28 29/08/2017 17:35:02

Pierre
Membre
Lieu : La belle province
Inscription : 22/06/2014
Messages : 1 099

Re : [thème] Masonic

Le mot carrousel est le bon terme si les images changent sans rafraîchir la page.  La taille des images, accroche ou pas, sera toujours un facteur.  Il suffit de charger les images avec une taille raisonnable et le roulement se fera sans problèmes.  Un véritable 1350X500 est tout à fait acceptable, le danger est de charger une gigantesque image qui se "redimensionne" pour entrer dans le gabarit de 1350X500.

La méthode 1 demande de créer une catégorie bidon du genre "grosse image" et d'y assigner quelques articles (tout aussi bidon) avec un titre et un contenu qui n'apparaîtront nulle part mais une image d'accroche.  Ensuite c'est une lastArtList() classique avec la catégorie (son numéro) comme paramètre.


#titanic {
    float: none;
    bottom: 0;
}

Hors ligne

#29 29/08/2017 17:53:07

webasso
Membre
Inscription : 04/10/2013
Messages : 283

Re : [thème] Masonic

Pierre a écrit :

La méthode 1 demande de créer une catégorie bidon du genre "grosse image" et d'y assigner quelques articles (tout aussi bidon) avec un titre et un contenu qui n'apparaîtront nulle part mais une image d'accroche.  Ensuite c'est une lastArtList() classique avec la catégorie (son numéro) comme paramètre.

Ok partons avec cette méthode 1
je vais bien choisir 3 images et les préparer
Par contre comment c'est une lastArtList(), comment ça se met en oeuvre ?

Hors ligne

#30 29/08/2017 18:11:08

Pierre
Membre
Lieu : La belle province
Inscription : 22/06/2014
Messages : 1 099

Re : [thème] Masonic

[== PHP ==]
                <div class="header-image">
                    <figure>
			<?php $plxShow->lastArtList('<img src="#img_url" width="1350" height="500" alt=""img_alt">',1,'99',, $sort='random'); ?>
                        <div class="angled-background"></div>
                    </figure>
                </div>

si la catégorie avait par exemple le numéro 99


#titanic {
    float: none;
    bottom: 0;
}

Hors ligne

#31 29/08/2017 18:14:21

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

Le changement ne se verra qu'à chaque chargement de page...


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#32 29/08/2017 18:52:04

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

Pour un carrousel, tu peux utiliser le plugin de Stéphane en faisant quelques modif :

1°) Paramètre le plugin selon les recommandations de Stéphane et choisi/active tes images pour qu'elles s'affichent dans le carrousel

2°) Dans le fichier header.php, remplace

[== Indéfini ==]
<figure><img src="https://demo.themegrill.com/masonic/wp-content/themes/masonic/img/header.jpg" width="1350" height="500" alt="">

ligne 69 par

[== Indéfini ==]
<figure><?php eval($plxShow->callHook("MySlippry")) ?>

3°) Modifie le fichier plxMySlippry.php dans le plugin en ajoutant après la ligne 96

[== Indéfini ==]
pager:false,

pour avoir

[== Indéfini ==]
<script>
$(function() {
	var slippry = $("#slippry").slippry({
	transition: "'.$this->getParam('transition').'",
	speed: '.$this->getParam('speed').',
	pager:false,
})});
</script>

4°) Ajoute, après la ligne 874 du fichier masonic/css/style.css, le code suivant :

[== Indéfini ==]
z-index:100;

Si tes images font 1350X350px, ça devrait le faire...  tongue


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#33 29/08/2017 18:54:21

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

@Pierre : Il y a une erreur dans le thème ligne 84 du fichier header.php qui fait que le lien dans le titre s'affiche 2 fois. Il faut remplacer la ligne par :

[== Indéfini ==]
<h1 class="site-title"><?php $plxShow->mainTitle('link'); ?></h1>

Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#34 29/08/2017 19:26:22

webasso
Membre
Inscription : 04/10/2013
Messages : 283

Re : [thème] Masonic

@Jerry Wham
Merci pour cette proposition de carrousel, j'ai bien envie d'essayer
Juste que je voudrais savoir avant de m'y mettre si le fait d'installer ce carrousel n'enlèvera pas l'aspect particulier de ce qu'on voit à gauche de l'entête: un triangle en transparence assombri qui renforce bien voir le titre et la description du site (c'est à dire que le diaporama défilera derrière) ?

Par contre mes images font toutes 1350x500, ça va poser problème ?

Hors ligne

#35 29/08/2017 21:17:22

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

Pour les images et le triangle, si tu fais ce que je décris, ça devrait aller (l'idéal est qu'elles aient toutes les mêmes dimensions). Par contre, je n'ai pas vérifié pour le titre et le sous-titre. S'ils ne s'affichent pas, c'est un problème de z-index trop petit qu'il faudra corriger.

Dernière modification par Jerry Wham (29/08/2017 21:18:02)


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#36 30/08/2017 09:09:38

webasso
Membre
Inscription : 04/10/2013
Messages : 283

Re : [thème] Masonic

Jerry Wham a écrit :

Pour un carrousel, tu peux utiliser le plugin de Stéphane en faisant quelques modif :

1°) Paramètre le plugin selon les recommandations de Stéphane et choisi/active tes images pour qu'elles s'affichent dans le carrousel

2°) Dans le fichier header.php, remplace

[== Indéfini ==]
<figure><img src="https://demo.themegrill.com/masonic/wp-content/themes/masonic/img/header.jpg" width="1350" height="500" alt="">

ligne 69 par

[== Indéfini ==]
<figure><?php eval($plxShow->callHook("MySlippry")) ?>

3°) Modifie le fichier plxMySlippry.php dans le plugin en ajoutant après la ligne 96

[== Indéfini ==]
pager:false,

pour avoir

[== Indéfini ==]
<script>
$(function() {
	var slippry = $("#slippry").slippry({
	transition: "'.$this->getParam('transition').'",
	speed: '.$this->getParam('speed').',
	pager:false,
})});
</script>

4°) Ajoute, après la ligne 874 du fichier masonic/css/style.css, le code suivant :

[== Indéfini ==]
z-index:100;

Si tes images font 1350X350px, ça devrait le faire...  tongue

Bonjour Jerry Wham
Je crois que j'ai tout bien fait ce que tu proposes... Mais j'obtiens pas le résultat escompté  http://www.gite-des-aubes.com/zetest/
Où est mon erreur ?

... et dans header.php du thème  ne faut il pas enlever les lignes correspondantes à l'image de demo de masonic ?

[== PHP ==]
<div class="header-image">
                    <figure><?php eval($plxShow->callHook("MySlippry")) ?>
                        <div class="angled-background"></div>
                    </figure>
                </div>
                <!-- .header-image -->

                <div class="site-branding clear">
                    <div class="wrapper site-header-text clear">

                        <div class="logo-img-holder ">

                        </div>

                        <div class="main-header">
                            <h1 class="site-title"><a href="https://demo.themegrill.com/masonic/" rel="home"><?php $plxShow->mainTitle('link'); ?></a></h1>
                            <p class="site-description">
                                <?php $plxShow->subTitle(); ?>
                            </p>
                        </div>
                    </div>
                </div>
                <!-- .site-branding -->

Hors ligne

#37 30/08/2017 10:18:28

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

Il y a une erreur dans le chemin vers les images.
Dans le code source de ta page, il y a

[== Indéfini ==]
<div class="sy-box" />
<ul id="slippry" class="sy-list">
<li><a onclick="return false;" href="#slide1"><img src="Stage" alt="" /></a></li>
<li><a onclick="return false;" href="#slide2"><img src="P&#039;tit déj" alt="" /></a></li>
<li><a onclick="return false;" href="#slide3"><img src="Piscine" alt="" /></a></li>
<li><a onclick="return false;" href="#slide4"><img src="Gîte Ouest" alt="" /></a></li>
<li><a onclick="return false;" href="#slide5"><img src="Les Aubes" alt="" /></a></li>
</ul>
</div>

Dans quel dossier sont-elles ?

... et dans header.php du thème  ne faut il pas enlever les lignes correspondantes à l'image de demo de masonic ?

C'est fait. C'est ce qui se trouve entre les balises figure.

Par contre, tu n'as pas modifié l'url du titre comme je te l'ai précisé précédemment (revois mes précédents posts).

Dernière modification par Jerry Wham (30/08/2017 10:19:51)


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#38 30/08/2017 11:37:15

webasso
Membre
Inscription : 04/10/2013
Messages : 283

Re : [thème] Masonic

... Merci pour la réponse
les images sont dans le dossier "medias"
http://www.gite-des-aubes.com/zetest/da … 1_1350.jpg

Et je viens maintenant de me rendre compte que j'avais pas vu où il fallait inscrire l'url des images dans /zetest/core/admin/plugin.php?p=plxMySlippry
- les adresses rentrées sont identiques à celle-ci: http://www.gite-des-aubes.com/zetest/da … 1_1350.jpg

Bon, mais à part que les images s'affichent sur la page du site, on peut pas dire que c'est concluant
Où est mon erreur ?
Si tu veux bien, avec ton aide j'essaye encore une ou deux fois pour que j'apprenne mais si ça ne décolle pas je vois directement avec toi Jerry

Hors ligne

#39 30/08/2017 11:46:02

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

Tu n'as pas suivi les instructions de Stéphane pour que les images apparaissent dans ton diaporama...
Tu ouvres ton gestionnaire de médias :  http://www.gite-des-aubes.com/zetest/co … medias.php
Tu cliques dans les cases en face des images qui t'intéressent.

Dans la liste déroulante en haut de page où il est indiqué "Pour la sélection", tu sélectionnes "Ajouter au diaporama".

Ensuite, tu vas cliques sur le lien MySlippry dans ton menu administration de gauche (en dessous de "Paramètres") et tu actives toutes les images en mettant OUI en face de chaque image.

Tu enregistres. Et normalement, ça devrait le faire.

Les urls n'ont pas à être modifiées manuellement.

Dernière modification par Jerry Wham (30/08/2017 11:46:57)


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#40 30/08/2017 12:16:21

webasso
Membre
Inscription : 04/10/2013
Messages : 283

Re : [thème] Masonic

@Jerry Wham
Désolé, je viens de refaire le tour et corriger les erreurs, je crois avoir fait ce qu'il faut mais j'ai toujours des images séparées occupant toute la page
Je ne vois pas ce qui cloche ?

Hors ligne

#41 30/08/2017 13:55:43

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

jQuery n'est pas définie. Comment as-tu paramétré MySlippry ?


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#42 30/08/2017 14:08:12

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

Il y a des erreurs de balisage.

Il manque le doctype au début du fichier header.php, juste avant la balise html :

[== Indéfini ==]
<?php if (!defined('PLX_ROOT')) exit; ?>
<!DOCTYPE html>
    <html lang="<?php $plxShow->defaultLang() ?>">

Enlève, ligne 30 du fichier home.php, les balises p autour de

[== Indéfini ==]
<?php $plxShow->artChapo(''); ?>

(Idem ligne 49 du fichier article.php autour de artContent)

Remplace la ligne 22 par :

[== Indéfini ==]
<?php ob_start();
$plxShow->artCat();
$cats = ob_get_clean();
echo str_replace('<a class="','<a class="url fn n ',$cats);?>

Dernière modification par Jerry Wham (30/08/2017 14:13:49)


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#43 30/08/2017 14:24:58

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

Pour que le titre s'affiche, il faut modifier la feuille de style.css, et ajouter ligne 846 :

[== Indéfini ==]
position: absolute;
z-index:20;

et changer à nouveau le z-index ligne 874 en le mettant à 10, c'est suffisant.

Dernière modification par Jerry Wham (30/08/2017 14:42:58)


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#44 30/08/2017 14:34:56

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

Pour que le menu, s'affiche correctement s'il y a des sous-menu (avec les groupes de pages statiques), il faut modifier le fichier theme.css, ligne 343 en mettant "transparent" à la place de "#fff".

Et dans le fichier style.css, ligne 355, modifier tout le bloc nav li a en :

[== CSS ==]
nav li a {
	color: #FFF;
	display: inline-block;
	line-height: 36px;
	padding: 10px 1rem;
	text-align: left;
	text-decoration: none;
	padding: 10px 1rem;
    width: 100%;
}

Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#45 30/08/2017 14:39:17

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

Une dernière chose : dans le panneau d'administration des plugins, ajouter une feuille css au plugin MySlippry (en cliquant sur le lien "CSS").
Dans la feuille de style pour le site, ajouter :

[== CSS ==]
div.sy-box {
    max-height: 350px;
}

Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#46 30/08/2017 14:41:20

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

Il faut utiliser la librairie jQueyr du plugin pour que ça fonctionne... À régler dans le panneau de configuration du plugin.

Et régler la largeur maxi à 1350 temps qu'on y est.

Dernière modification par Jerry Wham (30/08/2017 14:42:04)


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#47 30/08/2017 15:17:29

webasso
Membre
Inscription : 04/10/2013
Messages : 283

Re : [thème] Masonic

Désolé j'avais pas enregistré le paramétrage du plugin au début.

Donc après tes dernières recommandations, j'ai bien le diaporama maintenant... mais le descriptif est encore sur 2 lignes
J'espère que j'ai rien oublié des modifs...

- Les images sont aussi coupées en hauteur (elles doivent faire 1350x500)
- quand on change de page en passant à une page statique ou un article, il y a un petit temps où toutes les images du diaporama s'affichent en même temps avant que l'entête prenne le dessus
- il y a aussi le terme "Non classé" qui s'affiche en dur sur le coin gauche de la page en question quand on est dessus

Dernière modification par webasso (30/08/2017 15:18:28)

Hors ligne

#48 30/08/2017 15:18:41

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

Je viens de modifier le plugin de Stéphane afin de faciliter son paramètrage et d'adapter le carrousel au thème.
Tu peux le trouver sur mon dépôt Github en attendant que Stéphane valide la modif sur le sien.


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#49 30/08/2017 15:20:20

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

Tu as oublié ce que j'ai écrit dans le post #9 :

Jerry Wham a écrit :

Ligne 861 du thème, supprimer la marge négative pour que le sous-titre soit écrit en entier...
(..)
Si tu veux une coloration syntaxique du code, tu peux utiliser le plugin ace que j'ai écrit il y a peu (voir section plugins).


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#50 30/08/2017 15:21:21

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 525
Site Web

Re : [thème] Masonic

Adapte la hauteur à celle de tes images dans le css du plugin. Je pensais que tes images faisaient 350px de haut...


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés