[thème] Masonic

Jerry Wham · août 2017

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... :P

Jerry Wham · août 2017

@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>

webasso · août 2017

@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 ?

Jerry Wham · août 2017

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.

webasso · août 2017

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... :P

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 -->

Jerry Wham · août 2017

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).

webasso · août 2017

... Merci pour la réponse
les images sont dans le dossier "medias"
http://www.gite-des-aubes.com/zetest/data/medias/p1030901_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/data/medias/p1030901_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

Jerry Wham · août 2017

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/core/admin/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.

webasso · août 2017

@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 ?

Jerry Wham · août 2017

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

Jerry Wham · août 2017

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);?>

Jerry Wham · août 2017

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.

Jerry Wham · août 2017

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%;
}

Jerry Wham · août 2017

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;
}

Jerry Wham · août 2017

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.

webasso · août 2017

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

Jerry Wham · août 2017

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.

Jerry Wham · août 2017

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).

Jerry Wham · août 2017

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

webasso · août 2017

Ok pour la partie "description" et hauteur des images c'est modifié et ça colle
mais là c'est quoi ?
- 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... C'est aussi vrai pour un article classé (double affichage du titre)

J'ai une question liée aux images qui font quand même aux alentours de 500 Ko chacune... est-ce qu'il n'y a pas une influence à cet endroit quand on change de page ?
(ma connexion internet étant limitée, ça se voit encore mieux)

Jerry Wham · août 2017

C'est sûr que plus les images sont grosses, plus elles mettent de temps à charger. Il faut que tu les optimises avant de les envoyer sur ton serveur.
Normalement, il y a un loader qui doit s'afficher à la place des images. Mais je ne sais pas pourquoi ça ne fonctionne pas.

Il y a clairement du ménage à faire dans le thème lui même (désolé Pierre) car beaucoup de scripts sont chargés. Peut-être y a-t-il interactions entre eux ?

Pour le mot "Non classé" qui s'affiche, peux-tu nous poster le contenu de ton fichier "article.php" ?

Jerry Wham · août 2017

Tu peux utiliser le site http://tools.dynamicdrive.com/imageoptimizer/index.php qui marche pas mal et te permet de vraiment optimiser tes images. Vérifie la qualité avant en affichant les images et en cliquant sur "show all results".

Tu as aussi https://tinyjpg.com/

webasso · août 2017

Voilà pour le contenu de article.php du thème masonic

[== PHP ==]
<?php include(dirname(__FILE__).'/header.php'); ?>

    <div class="blog-header clear">
        <article class="wrapper">
            <div class="blog-site-title">
                <h1><?php $plxShow->artTitle(); ?></h1>
            </div>
            <div class="breadcrums">
                <span property="itemListElement" typeof="ListItem">
				<a href="<?php $plxShow->racine() ?>"><?php $plxShow->lang('HOME'); ?></a>
					&gt; 
				<?php $plxShow->catName('link'); ?>
					&gt; 
				<?php $plxShow->artTitle(); ?>
				</span>
            </div>
        </article>
    </div>

    </header>

    <?php ob_start();
$plxShow->artCat();
$cats = ob_get_clean();
echo str_replace('<a class="','<a class="url fn n ',$cats);?>
        <div id="container" class="wrapper clear">
            <div class="primary">

                <article class="blog-post">
					<div class="post-header clear">
					<figure>
						<img width="570" height="255" src="<?php $plxShow->artThumbnail('#img_url'); ?>" class="attachment-large-thumb size-large-thumb wp-post-image" alt="" srcset="<?php $plxShow->artThumbnail('#img_url'); ?>"> 
					</figure>

					<div class="entry-info">
						<div class="catagory-type">
							<?php $plxShow->artCat() ?>
						</div>
						<div class="entry-author vcard author fa fa-user">
							<?php $plxShow->artAuthor() ?>
						</div>            
						<div class="entry-date fa fa-comments">
							<a href="<?php $plxShow->artUrl(); ?>#comments" title="<?php $plxShow->artNbCom(); ?>"><?php $plxShow->artNbCom(); ?></a>
						</div>
						<div class="entry-tag fa fa-tags"> 
							<?php $plxShow->artTags() ?>
						</div>
					</div><!-- .entry-info -->
				</div>
					<div class="entry-content">
                        <div class="underline"></div>
                        <?php $plxShow->artContent(); ?>
                    </div>

                </article>

                <div id="comments" class="comments-area">
					<?php include(dirname(__FILE__).'/commentaires.php'); ?>
                </div>
                <!-- #comments -->
            </div>

            <?php include(dirname(__FILE__).'/sidebar.php'); ?>

        </div>
        <?php include(dirname(__FILE__).'/footer.php'); ?>

webasso · août 2017

Jerry Wham a écrit:

Tu peux utiliser le site http://tools.dynamicdrive.com/imageoptimizer/index.php qui marche pas mal et te permet de vraiment optimiser tes images. Vérifie la qualité avant en affichant les images et en cliquant sur "show all results".

Tu as aussi https://tinyjpg.com/

Heuu! merci Jerry, mais ya rien en français, parce que l'anglais je ne pige pas, désolé

Jerry Wham · août 2017

Tu t'es trompé en modifiant le code. Voilà ce qu'il faut :

[== Indéfini ==]
<?php include(dirname(__FILE__).'/header.php'); ?>

    <div class="blog-header clear">
        <article class="wrapper">
            <div class="blog-site-title">
                <h1><?php $plxShow->artTitle(); ?></h1>
            </div>
            <div class="breadcrums">
                <span property="itemListElement" typeof="ListItem">
				<a href="<?php $plxShow->racine() ?>"><?php $plxShow->lang('HOME'); ?></a>
					&gt; 
				<?php $plxShow->catName('link'); ?>
					&gt; 
				<?php $plxShow->artTitle(); ?>
				</span>
            </div>
        </article>
    </div>

    </header>

        <div id="container" class="wrapper clear">
            <div class="primary">

                <article class="blog-post">
					<div class="post-header clear">
					<figure>
						<img width="570" height="255" src="<?php $plxShow->artThumbnail('#img_url'); ?>" class="attachment-large-thumb size-large-thumb wp-post-image" alt="" srcset="<?php $plxShow->artThumbnail('#img_url'); ?>"> 
					</figure>

					<div class="entry-info">
						<div class="catagory-type">
							<?php ob_start();
                                                           $plxShow->artCat();
                                                           $cats = ob_get_clean();
                                                           echo str_replace('<a class="','<a class="url fn n ',$cats);?>
						</div>
						<div class="entry-author vcard author fa fa-user">
							<?php $plxShow->artAuthor() ?>
						</div>            
						<div class="entry-date fa fa-comments">
							<a href="<?php $plxShow->artUrl(); ?>#comments" title="<?php $plxShow->artNbCom(); ?>"><?php $plxShow->artNbCom(); ?></a>
						</div>
						<div class="entry-tag fa fa-tags"> 
							<?php $plxShow->artTags() ?>
						</div>
					</div><!-- .entry-info -->
				</div>
					<div class="entry-content">
                        <div class="underline"></div>
                        <?php $plxShow->artContent(); ?>
                    </div>

                </article>

                <div id="comments" class="comments-area">
					<?php include(dirname(__FILE__).'/commentaires.php'); ?>
                </div>
                <!-- #comments -->
            </div>

            <?php include(dirname(__FILE__).'/sidebar.php'); ?>

        </div>
        <?php include(dirname(__FILE__).'/footer.php'); ?>

Pour les images utilise tinyjpg. Tu cliques sur Drop your .png or .jpg files here! et quand c'est fini, tu cliques sur download à droite de la ligne verte.

webasso · août 2017

Merci Jerry
J'ai remplacé le contenu de article.php

J'ai finalement tenté d'optimiser mes images avec le premier lien et j'y suis arrivé !
j'ai remplacé les images sur le site... ça parait plus léger mais j'ai toujours :
- 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
Tu vois comment éviter cela ?

Je vois un autre truc qui me semble n'y était au début: sur un article par exemple, la page et la sidbar sont collées au menu horizontal, ça me fait dire aussi que la bande du sous-menu avec le titre de la page est sans doute trop haute tu ne crois pas ?

Jerry Wham · août 2017

remplace le fichier article.php par :

[== PHP ==]
<?php include(dirname(__FILE__).'/header.php'); ?>

    <div class="blog-header clear">
        <article class="wrapper">
            <div class="blog-site-title">
                <h1><?php $plxShow->artTitle(); ?></h1>
            </div>
            <div class="breadcrums">
                <span property="itemListElement" typeof="ListItem">
				<a href="<?php $plxShow->racine() ?>"><?php $plxShow->lang('HOME'); ?></a>
					&gt; 
				<?php $plxShow->catName('link'); ?>
					&gt; 
				<?php $plxShow->artTitle(); ?>
				</span>
            </div>
        </article>
    </div>

    </header>

    <div class="site-content">
        <div id="container" class="wrapper clear">
            <div class="primary">

                <article class="blog-post">
					<div class="post-header clear">
					<figure>
						<img width="570" height="255" src="<?php $plxShow->artThumbnail('#img_url'); ?>" class="attachment-large-thumb size-large-thumb wp-post-image" alt="" srcset="<?php $plxShow->artThumbnail('#img_url'); ?>"> 
					</figure>

					<div class="entry-info">
						<div class="catagory-type">
							<?php $plxShow->artCat() ?>
						</div>
						<div class="entry-author vcard author fa fa-user">
							<?php $plxShow->artAuthor() ?>
						</div>            
						<div class="entry-date fa fa-comments">
							<a href="<?php $plxShow->artUrl(); ?>#comments" title="<?php $plxShow->artNbCom(); ?>"><?php $plxShow->artNbCom(); ?></a>
						</div>
						<div class="entry-tag fa fa-tags"> 
							<?php $plxShow->artTags() ?>
						</div>
					</div><!-- .entry-info -->
				</div>
					<div class="entry-content">
                        <div class="underline"></div>
                        <?php $plxShow->artContent(); ?>
                    </div>

                </article>

                <div id="comments" class="comments-area">
					<?php include(dirname(__FILE__).'/commentaires.php'); ?>
                </div>
                <!-- #comments -->
            </div>

            <?php include(dirname(__FILE__).'/sidebar.php'); ?>

        </div>
        <?php include(dirname(__FILE__).'/footer.php'); ?>

ET CHANGE LE PLUGIN DE STEPHANE PAR LE MIEN : http://forum.pluxml.org/viewtopic.php?pid=55274#p55274

Il faudra modifier la configuration en la réenregistrant et en mettant "NON" à hauteur adaptée à la vignette en cours de visualisation.

webasso · août 2017

Merci Jerry
J'ai récupéré le nouveau plugin et fais ce que tu demandais, sauf erreur.
Ce qui avait été fait auparavant dans les différents fichiers n'est pas à remettre en cause ?

Je constate que le problème suivant est encore d'actualité, est-ce qu'il y a un remède ?
- 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

Jerry Wham · août 2017

webasso a écrit:

Ce qui avait été fait auparavant dans les différents fichiers n'est pas à remettre en cause ?

Désolé, je n'ai pas compris cette phrase 8o

webasso a écrit:

Je constate que le problème suivant est encore d'actualité, est-ce qu'il y a un remède ?
- 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 peut-être une interaction entre les scripts chargés. Il faudrait faire le ménage...

Je viens de constater que si l'écran fait plus de 1350px de large, les images sont collées à gauche.
Il faudrait ajouter un "margin: auto;" dans la css du plugin (via le panneau d'administration), en dessous de max-height. Les images seront ainsi centrées.

webasso · août 2017

... La phrase: Je me demandais si ce que j'avais modifié dans les différents fichiers du thème, du plugin devait être remis en cause après le remplacement du plugin ?

J'ai ajouté "margin: auto;"

jerry a écrit:

Il y a peut-être une interaction entre les scripts chargés. Il faudrait faire le ménage...

Que faut-il faire alors ?

[thème] Masonic

Réponses