HTML5UP Forty

This contribution or plugin is actually being tested. Issues may occur, don’t hesitate to report those in following post’s comments.

Adaptation pour SPIP du squelette «FORTY» de html5up https://html5up.net/forty

Accueil
Rubrique
Article

Installation

Ce plugin s’installe comme tous les plugins. Voir http://www.spip.net/fr_article3396.html

Il nécessite les plugins Adaptive Images, Saisies et ZCore.

Note : pour fonctionner, il faut que le plugin Adaptive images soit configuré pour utiliser la méthode srcset + (HTML5).

Configuration

La configuration du plugin est accessible via le menu Squelettes > HTML5up Forty

Page d’accueil

Il est possible de choisir l’image d’entête : via la médiathèque (menu Édition > Documents), ajouter un nouveau document puis, dans la page de configuration, indiquer le numéro de ce document.
Rq : Pour que cet article n’apparaisse pas, en plus, dans les listes de la page sommaire ou des rubriques, il est possible de le ranger dans un secteur qu’on excluera de ces affichages au moyen du plugin exclure secteur.

Il est également possible de choisir le mode d’affichage :

  • mode site avec les rubriques à la racine du site (secteurs)
  • mode blog avec les derniers articles publiés.

Contenu

Il est possible de choisir l’article affiché en pied de page.
Ça peut être un article dans l’arborescence ou un article créé avec le plugin Pages uniques

Personnalisation

La feuille de style css/perso.css sera prise en compte pour personnaliser l’affichage sans perdre les mises à jour possibles. Idem pour les javascripts avec le fichier javascript/perso.js

Modèles

Les modèles bouton et icone permettent d’afficher, dans le contenu, des boutons et icônes avec Font Awesome (liste des icônes disponibles).

Bouton (icône et texte avec lien dans un bloc encadré)

<bouton|icone=fa-heart|primary=oui|iconetexte=le texte|lien=https://www.domaine.net>

Icône (icône avec lien et texte alternatif)

<icone|icone=fa-heart|iconetexte=le texte|lien=https://www.domaine.net>

Plugins facultatifs

Identité Extra

L’activation d’Identité Extra affichera, en bas de la page, les informations de contacts.

Liens sociaux

Le plugin Liens vers les réseaux sociaux permet d’utiliser des liens et des icônes adéquates vers les réseaux utilisés.
Note : Il faut “Activer l’habillage graphique de la barre de liens avec la feuille de style basée sur la police socicon”.

Formulaire de contact

Le plugin Formulaire de contact avancé permet d’ajouter facilement un formulaire en pied de page de la page d’accueil.

Mailsubscribers / Newsletter

Si Mailsubscribers est installé, on affiche le formulaire d’inscription à la newsletter. A votre charge de créer la liste newsletter (voir la doc de Newsletters).

Le Plugin Menus permet d’ajouter un menu dans le pied de page : créer un nouveau menu avec l’identifiant pied et il apparaîtra automatiquement.

Agenda

Si Agenda est installé, le premier bloc de la page d’accueil affiche l’agenda (3 prochains rendez-vous et lien vers l’agenda complet).

Les autres squelettes HTML5 UP

Le site html5up.net propose de beaux thèmes dont certains ont été adaptés pour SPIP. Voyez la liste des squelettes HTML5Up adaptés pour SPIP.

Discussion

13 discussions

  • 12

    Bonsoir... Je suis en train d’essayer d’utiliser ce plugin squelette avec la version alpha 4.0.0. de spip.

    Après quelques tentatives je pense qu’il y a un pb lié à la nouvelle version, mais je ne sais pas si c’est lié au squelette ou au plug-in adaptative images : l’image de fond du bandeau de la page d’accueil n’apparaît pas ; et les images des rubriques, sur la page sommaire et sur la page rubriques, restent pixellisées.

    Je n’arrive pas à trouver de solution pour le moment. Une idée ?

    • même souci avec la version 4.0.0 beta

    • Testé avec Chrome + Firefox sur un serveur Apache en localhost. J’ai essayé d’effacer le cache etc. J’ai aussi essayé sur une install vierge et j’ai réussi à reproduire le problème.

    • Bonjour,

      je n’ai pas encore pu tester mais j’ai l’impression qu’Adaptative images n’a plus le même markup (<picture> / <source>) en 4.0 alors qu’en 3.3, ça fonctionne. Voir par ici en 3.3 : https://sonars.io

      Par ex, j’aurai bien essayer avec Adaptive Image avant ce commit : https://git.spip.net/spip-contrib-extensions/adaptive_images/commit/78514b3d1062a5e3d0c65e0268714dd42a52fe1b

      Je n’ai pas le temps de m’y plonger pour l’instant, donc si vous arrivez à creuser un peu :)

    • Je n’ai pas de pb avec FORTY sur un spip 4 beta https://pyromania.alwaysdata.net.
      Sur ce site il y a ça en tout et pour tout comme personnalisation :
      -  dans css/perso.css :

      #banner::after {	
        opacity:  0.2 
      }
      .page_article section {
        background-image: url('/IMG/jpg/netherupdateartwork.jpg');
        background-repeat: no-repeat;
        background-size: 100%;
      }
      .page_article .inner {
        background-color: #242943;
        padding: 1em !important;
      }


      -  Dans config/mes_options.php :

      <?php
      define ('_IMG_MIN_WIDTH', 600);
      define ('_IMG_MIN_HEIGHT', 500);
      define('_DEV_VERSION_SPIP_COMPAT', '3.2.99');

      De mémoire pour que les images ne soient pas pixelisées il faut qu’elles aient vraiment *beaucoup* de pixels....

    • De mémoire pour que les images ne soient pas pixelisées il faut qu’elles aient vraiment *beaucoup* de pixels....

      Oui : avez-vous bien diminué les réglages d’Adaptive images (taille/poids des images) pour déclencher l’adaptation sur vos images si elles sont plus petites ?

      Question subsidiaire : est-ce que le problème est apparu après une mise à jour ou bien est-ce avec un SPIP4 “neuf” ?

    • Bonjour, j’ai refait un test avec une base propre et j’ai ajouté une image d’accueil en 1440x900 comme recommandé dans la config de Forty, celle-ci n’est pas pixellisée sur la page d’accueil et c’est bien.

      Par contre si je mets des images en 1440x900 comme Logo de rubriques, elles sont très pixellisées dans les pages listant les rubriques, puis elles restent pixellisées dans le bandeau de la page rubrique.

      Les images en 1440x900 fonctionnent bien comme logos d’article par contre (que ce soit dans les pages listant les articles, ou sur la page article elle-même).

      Là où c’est étrange :
      -  le code SPIP pour les images est le même sur les rubriques et sur les articles
      -  suspectant un souci de compatibilité avec une variante de format jpeg, j’ai mis 3 copies de l’image “qui ne pixellise pas” dans ma base de données (accueil / logo rubrique / logo article) et celle-ci pixellise sur les rubriques, mais ni sur l’accueil, ni sur l’article. Hum...

      Je mets quelques captures d’écran pour vous montrer.

    • @jeanmarie : comme tu le suggérais j’ai essayé avec la version précédente de Adaptative Images (v 2.0.1 au lieu de 2.1.1) en activant manuellement l’option “scrset + source (html5)”, et miracle, toutes les images apparaissent de façon correcte ! Cela semble donc bien être une régression introduite sur Adaptative Images entre la version v2.0.2 et 2.1.1 . Je vais aborder la question sur la page du plugin en question.

    • Rebonjour jeanmarie, pour répondre à ta question j’ai testé avec Adaptative Images 2.0.1 (la version précédant le commit que tu indiques) et en activant le mode “scrset + source” (option indisponible dans la nouvelle version quand on utilise spip 4.0.0) les images apparaissent correctement !

      J’ai posé une question sur la page du plugin correspondant.

    • As tu regardé la config de Adaptive image comme le suggère jeanmarie ?

    • @jeanmarie : merci pour ton aide ! C’est chouette d’avoir une communauté aussi réactive :-). J’ai trouvé le bug dans Adaptative Images (cf mon post sur l’article correspondant).

    • EduardoDiaz

      Bonjour, je débute tout juste avec les pages web, quelqu’un pourrait-il m’expliquer qu’il faudrait que je modifie le code pour que les images me chargent, je n’ai pas trop compris les commentaires ci dessus

    • Avec la version 2.1.3 d’Adaptive Images, le problème doit être résolu en SPIP4. Pour les autres versions, il faut que le plugin Adaptive images soit configuré pour utiliser la méthode srcset + (HTML5).

    Reply to this message

  • Bonjour,

    Merci pour l’adaptation de ce plugin pour SPIP !
    Je viens de le choisir pour mon site, il me plaît beaucoup.

    J’aurais voulu pouvoir utiliser les sous-rubriques, comme l’une des personnes qui a commenté plus tôt sur ce fil. Tu recommandes d’ouvrir un Ticket sur Github, mais malheureusement l’inscription a été désactivée. Du coup, je me permets de transmettre mon ticket ici pour que le plugin soit adapté.

    Merci d’avance :-)

    Reply to this message

  • 1

    Bonsoir bonsoir !

    Pour une raison qui m’échappe encore j’ai dû rajouter un bout de CSS personnalisé pour régler un bug d’affichage des images internes des articles, qui sinon ne sont pas réduites automatiquement sur la version 4.0.0 de Spip (non testé avec les autres). Ca ressemble à ça (rajouté dans mes_styles.css) :

    .spip_document_image.spip_document_left img {
    	max-width: 100% !important;
    }
     
    .spip_document_image.spip_document_right img {
    	max-width: 100% !important;
    }
     
    .spip_document_image.spip_document_center img {
    	max-width: 100% !important;
    }

    Voilà voilà !

    Bonne soirée !

    mathieu

    • Merci pour ce retour, ça doit venir du fait que la feuille de style de SPIP css/media.css n’est pas utilisée par Forty.

      Peux-tu tester en enlevant le - de medias-.css dans inclure/head.html (L20) ?

      Il faut voir si ça résout bien le problème (en supprimant tes ajouts de mes_styles.css) et si ça ne provoque pas d’effets indésirables ailleurs.
      Si c’est bon, je ferai la modif.

    Reply to this message

  • 3

    Salut,

    J’ai mis à jour Spip en 4.0.0 : pas de problème à première vue, sauf que... les variantes du squelette ne sont plus prises en compte !
    J’avais quelques variantes (article-2.html, article-3.html, etc.) mais c’est comme si ces fichiers n’existaient plus : à la place s’affiche le fichier article.html pour les articles et rubrique.html pour les rubriques, ni plus, ni moins.
    C’est moche ;-)

    J’ai regardé un peu dans les fichiers du squelette Html5up FORTY, mais apparemment, rien n’a changé dans les fichiers article.html et content/article.html.

    Mon fichier article-2.html :

    <BOUCLE_principale_article(ARTICLES){id_article}>
    <INCLURE{fond=structure,env,id_rubrique=#ENV{id_rubrique,#ID_RUBRIQUE},id_secteur=#ID_SECTEUR,type-page=article-2,composition=#COMPOSITION} />
    </BOUCLE_principale_article>

    Comme le conseillait @jeanmarie début avril sur ce fil, j’ai désactivé tous les plugins sauf Html5up FORTY pour vérifier d’éventuels conflits, mais ça ne change rien.

    Je ne comprends pas ce que je peux faire.
    Auriez-vous une idée ?

    — -
    Spip 4.0.0 avec tous les plugins à jour : Compositions 3.9.3, Html5up FORTY 0.4.10, Saisies pour formulaires 4.0.2, SPIP Bonux 4.1.0, Z-core 3.0.0, etc.

    Reply to this message

  • 1

    Rebonjour !

    Ca y est je me remets à mon projet de site internet avec Forty! J’ai découvert un petit bug dans le fichier css/html5up_forty.spip.css.html , ligne 51 :

    [.page_sommaire #banner {background-image: url('/(#FICHIER|image_reduire{2000}|extraire_attribut{src})') ;}]

    — > le / devant #FICHIER crée une URL absolue et du coup dans mes tests l’image d’accueil ne s’affichait jamais car je n’avais pas installé le site directement à la racine de mon serveur.

    Solution proposée :

    [.page_sommaire #banner {background-image: url('(#FICHIER|image_reduire{2000}|extraire_attribut{src})') ;}]

    Merci d’avance :-)

    Mathieu

    Reply to this message

  • 17

    bjr
    j’utilise ce squelette, tb par ailleurs. Quand je mets les adresses fb et tweeter cela n’apparait pas sur le site , il y a juste le mail, pourquoi?
    merci pour une réponse

    Reply to this message

  • 2

    Bonjour,

    J’ai suivi le tutoriel de spip pour l’internationalisation de mon site et j’ai créé 2 arborescences parallèles avec 2 rubriques racine, l’une en français et l’autre en anglais. Lorsque j’installe le Plugin “forty” je vois mes deux rubriques français et anglais sur la page d’accueil (logique). Comment faire pour que Forty comprenne que ces deux rubriques sont des langues ?

    • Je me réponds à moi-même ; j’ai surchargé les squelettes de Forty. J’ai découvert à ce propos que la convention de nommage pour associer un squelette à une rubrique spécifique (rubrique=4.html par exemple) ne fonctionne pas avec ce type de squelette (c’est ZCore c’est ça ?) donc j’ai rajouté des boucles “Condition” pour associer le template de “sommaire” à mes deux rubriques “racines de langue”, et conserver le template ordinaire pour les autres.

      Je voulais aussi avoir à la fois une liste des sous-rubriques et des articles dans la rubrique au niveau de la page d’accueil donc j’ai modifié le template sommaire...

      Bref j’ai tout changé ^^

    • La personnalisation des rubriques et articles selon la rubrique est dans un plugin squelettes-par-rubrique qui ne fait plus partie de la dist à partir de SPIP 4. Pour bénéficier de cette fonctionnalité il faut donc installer le plugin squelettes-par-rubrique à part, comme n’importe quel plugin, par exemple avec la config des plugins de la partie privée.

      https://plugins.spip.net/squelettes_par_rubrique.html

    Reply to this message

  • 3

    Bonjour ,

    Merci pour ce beau portage de thème : ça le fait carrément ;-)

    J’écris pour demander conseil à propos d’une erreur que je ne parviens pas à résoudre : l’accueil du site affiche la noisette content/404.html, quelle que soit la configuration du plugin, en mode rubrique ou en mode blog.
    L’accès via le menu aux rubriques, articles, mot-clés, etc. fonctionne très bien : il y juste l’accueil qui pose problème.
    Pourtant, au niveau des fichiers, tout a bien l’air là, et la noisette content/sommaire semble correcte.

    J’ai essayé de créer un fichier sommaire.html à la racine de squelettes, qui force l’appel de content/sommaire :

    <INCLURE{fond=structure,env,type-page=sommaire,composition=#COMPOSITION} />

    Il y a un mieux mais l’affichage est déstructuré (je ne sais pas encore pourquoi).

    J’ai télécharger l’archive du plugin et envoyé le contenu par FTP pour remplacer celui de plugin/auto/html5up_forty/v0.46, sans plus de succès.

    Ai-je raté une étape ?

    Amicalement.

    • Salut Nicolas,

      merci pour ton retour.

      Normalement, le plugin affiche, soit les rubriques racines, soit les derniers articles, il y a donc toujours quelque chose à afficher s’il y a bien des articles publiés.
      Sinon, il y a peut-être un autre plugin qui rentre en conflit (SPIP reset ou autre squelette par ex). As-tu testé en désactivant tous les plugins autres que Forty et ses dépendances pour voir si c’est mieux ?

      Est-ce que tu as un lien pour voir ce que ça donne ?

    • Vous z’êtes trop forts, les gens des internets !

      Effectivement, c’était Reset qui faisait que «ben-non-ça-va-pas».
      J’aurais (encore) dû y penser...

      Vraiment merci à toi, jeanmarie !

    Reply to this message

  • 3
    Bastien

    Bonjour
    J’ai configurer le site pour être en mode site, donc affichage à l’accueil des rubriques secteur.
    mais lorsque je clique sur une rubrique il m’affiche le titre de la rubrique mais pas son contenu que ce soit des sous rubriques ou des articles.
    Quel réglages dois je faire ? dois je modifier du code dans les pages ?
    Est il possible d’avoir sur la même page des rubriques et des articles ?
    Quelle est la page d’accueil qui intègre les morceaux de code car la page index n’existe pas ?

    désolé de poser toutes ces question mais j’ai un trou de 8ans dans l’évolution du langage spip et je dois me remettre à jour.

    merci

    • Bastien

      bonjour
      petite modification
      j’ai des rubriques secteur qui contienne et des sous rubriques et des articles mais je ne vois pas les sous rubriques.
      Pour les rubriques ayant que des sous rubriques c’est idem

    • Bonjour Bastien,

      pour l’instant, le thème ne fonctionne qu’avec un seul niveau de rubriques (secteurs sans sous-rubriques). Mais ça pourrait être une évolution.
      Je t’invite à créer un ticket sur la forge de développement pour la demande : https://git.spip.net/spip-contrib-squelettes/html5up_forty/issues

      Pour ce qui est de la page d’accueil, elle est gérée automatiquement. Le fichier est https://git.spip.net/spip-contrib-squelettes/html5up_forty/src/branch/master/content/sommaire.html

    • Bonjour Jean Marie
      Merci pour ce plugin, le squelette « FORTY » est vraiment chouette.

      J’ai essayé de créer un ticket comme vous l’indiquiez à Bastien pour une évolution du squelette adaptée à plusieurs niveaux de rubriques mais je ne suis pas parvenu à me loguer sur git.spip.net (les inscriptions y sont désactivées).

      J’ai fait quelques adaptations pour que les pages des secteurs (sans articles mais avec des sous-rubriques qui en ont) ne restent pas vide.
      Dans inclure/liste/articles.html j’ai changé dans BOUCLE_articles

      {id_rubrique} par {branche}

      Cela affiche les articles des sous-rubriques.
      Je les ai fait précédés de la liste des sous-rubriques dans le fichier /content/rubrique.html
      le boucle suivante

      <B_sous_rubriques>
       
      <div class="inner" >
      <h3>Au sommaire :</h3>
                <ul class="plan">
                   <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre}>
                            <li><a href="#URL_RUBRIQUE">#TITRE</a></li>
                   </BOUCLE_sous_rubriques>
                  </ul>
      </div>
      </B_sous_rubriques>

      J’ai également ajouté aux rubriques et aux articles un fil d’Ariane sur le modèle des squelettes de la “dist”.

      Ce que j’aimerais c’est que le menu permettent d’afficher les sous-rubriques lorsqu’on clique sur leur secteur. J’avoue avoir du mal à le réaliser moi-même...

      Amicalement
      Guillaume

    Reply to this message

  • 1

    Bonjour
    En effet, ce plugin est installé rapidement et du plus bel effet.
    Y-a-t-il un truc particulier pour afficher l’image de fond d’accueil en mode blog ?
    Je n’arrive pas à la voir
    Merci
    Cordialement
    Jean-Luc

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom