Squelettes Vittory’s

Attention, cette contribution est EN CHANTIER : elle n’est peut-être pas fonctionnelle.

Adaptation pour SPIP du template Restaurant Website & Gallery Template de Mary Lou.

Introduction

Le squelette Vittory’s est très utile pour créer rapidement un site simple de quelques articles, intégrant une galerie plein écran et un positionnement Google Map.

Dépendances

Nécessaire :
-  CFG

Recommandé :
-  Palette
-  Nivoslider

Installation

  1. Téléchargez l’archive dans le dossier plugins de votre SPIP
  2. Activez le plugin depuis l’espace privé.

Ce squelette utilise activement les librairies graphiques de PHP, n’oubliez pas de sélectionner une méthode de fabrication des vignettes dans Configuration > Fonction avancées de SPIP !

Description

Ce squelette est une adaptation pour SPIP d’un template pour la restauration comprenant une galerie d’images pour le menu et une carte Google indiquant l’emplacement.

Aperçu de la page d’accueil agrémentée d’un nivoslider :

Présentation - Accueil

Lorsque l’utilisateur clique sur l’article utilisé comme galerie, son portfolio déclenche l’ouverture de la galerie :

Article avec portfolio

Lors d’un clic sur une image du portfolio, l’image réduite, son titre et une description sont affichés ainsi que la même image comme fond de la page.

En utilisant les flèches de navigation à l’écran, les flèches gauche / droite du clavier, ou la roulette de la souris, l’utilisateur peut faire défiler les images. Le titre et la description s’animent derrière l’image en premier plan lors du défilement.

La galerie

En cliquant sur l’image au premier plan, elle va disparaître et le fond devient plus lumineux. L’utilisateur peut alors visualiser l’image en plein écran et naviguer à travers le portfolio de la même façon. Un clic sur le fond va nous ramener dans la galerie.

Un clic sur la croix dans le coin supérieur droit permet de quitter la galerie.

Un menu spécial activable via la configuration du squelette va cacher la boîte de contenu et montrer une carte Google en fond de page :

Géolocalisation Google Map

Utilisation

Le menu se compose des noms d’articles sélectionnés par le mot clé « menu ». Un mot clé « cacher » est aussi intégré au squelettes.

Les articles sont tous affichés par le squelette sommaire.html, il n’y a donc plus de notion de rubriques, chemin etc...

ATTENTION !

Dans cette version un seul article peut être utilisé comme galerie, de par la présence d’images dans son portfolio. Si plusieurs articles ont des images de portfolio la galerie fonctionnera mal, je vous ai prévenu ;-)

Configuration

Un formulaire CFG permet de modifier rapidement toutes les options d’affichage, il est recommandé d’y faire un tour après avoir installé le plugin, au moins pour sélectionner le fond de la page d’accueil :

Conditions d’utilisation

Ce squelette est une adaptation pour SPIP du template Restaurant Website & Gallery Template crée par Mary Lou.

Pour plus d’informations, reportez-vous au site http://tympanus.net/codrops/.

Compatibilité

Testé avec :
-  Firefox
-  Chrome
-  IE9

Discussion

15 discussions

  • 3

    Bonjour,

    J’ai installé le plugin ! parfait ! juste ce qu’il me fallait ! je suis sur spip 3 + la dernière version du plugin. J’ai perdu ll’affichage de l’image de fond ainsi que tous les articles. Pour info, lorsque je clique sur l’un des articles ou l’qaffichage de la carte, s’affiche un « # »à la fin de l’adresse

    cf le site

    http://testsites33.p.ht/#

    Je suis un peu perdu sur ce coup. J’ai aussi quelque peu modifier la css.

    Merci de vos conseils.

    • Bonjour,

      Je reviens à la charge... Je n’arrive pas à trouver d’où vient l’erreur !
      L’erreur est visible sur ce que sera le site définitif :

      http://www.angerscoursdeyoga.com/

      Auriez vous une idée ?

      Merci d’avance.

    • Jacques F

      J’ai abandonné l’idée ! dommage ! j’ai choisi un squelette que j’aime moins.... Bon !

    • Et bien Jacques.
      J ’ai eu un soucis d ’affichage que j ’ai résolu.....
      tout à fonctionné correctement et d’un coup le même problème que toi.....
      c ’est à dire
      sur l ’espace public j ’ai bien mon menu mais rien ne s ’affiche
      et j ’ai le fameux « # » à la fin de l ’adresse.....
      quelqu’un à une idée...?
      merci d ’avance

    Répondre à ce message

  • 2

    Bonjour, tout d’abord félicitations pour ce plugin qui propose une approche de design vraiment intéressante.

    Je rencontre un problème en créant un nouveau site SPIP 3.0.17 auquel je voudrais associer ce plugin :

    • Une fois le plugin activé, le message suivant apparait quasiment dans chaque page de mon Espace Privé :
      Warning: Cannot modify header information - 
      headers already sent by 
      (output started at /xxxxxxx/site/plugins/auto/vittory/
      v0.0.2/vittory_options.php:2) 
      in /xxxxxxx/site/ecrire/inc/actions.php on line 89
    • Il est recommandé d’installer le plugin Nivoslider, mais celui-ci n’est pas compatible avec les versions récentes de SPIP 3.
    • Côté public, le site ne fonctionne pas une fois le plugin activé - ce qui parait logique.

    Est-ce que ce plugin est encore actif ? Merci par avance de vos réponses.

    • as tu trouvé une solution
      je crois bien être plus au moins dans le même cas que toi

    • trouvé..................
      Dans le plugin trouver les fichiers
      dvittory_fonction.php
      evittory_options.php
      il suffit de remplacer le_ par- en gros il faut renommer ces fichiers..... (qui sont vides d ’ailleurs).
      dvittory-fonction.php
      evittory-options.php

      et hop ça marche........

    Répondre à ce message

  • 1

    moi j ’ai un problème d ’affichage une fois le plugins activé.
    Écran blanc avec juste le nom du squelette d ’affiché......
    une idée

    • Cannot modify header information - headers already sent by (output started at /mnt/154/sdb/d/f/o.feret/plugins/Vittory/vittory_options.php:2) in /mnt/154/sdb/d/f/o.feret/ecrire/inc/actions.php on line 89

      c ’est quoi le soucis ?
      merci de m ’aider je suis perdu

    Répondre à ce message

  • Bonjour,
    Je voudrais féliciter le travail effectué, ce squelette est vraiment super.
    J’ai malgré tout une question : Est’il possible de remplacer le titre de la page en haut à gauche par une image représentant un logo par exemple ?
    J’ai bien réussi à faire disparaître le texte mais comment ajouter un logo ?
    Quelqu’un aurait’il une solution ?
    @+ et Merci de vos réponses.

    Répondre à ce message

  • Krougozor

    Bonjour,
    Je suis débutante dans la construction du site et j’ai une question toute bête (désolée ! mais je suis moins stupide dans d’autres domaines). Quand je crée une rubrique (ou un article) dans l’espace privée de mon site je veux qu’elle apparaisse tout simplement sur la page d’accueil de mon site, comme dans l’exemple de votre article (rubriques Bienvenue, contact, agenda, galerie, etc. dans la colonne de gauche de la page d’accueil). En fait je n’ai pas bien compris votre chapitre « Utilisation » .Les mots-clé « menu » et « cacher », où se placent-ils exactement ? Faut-il ajouter des plugins pour la gestion des mots-clé ? Pourriez-vous détailler les opérations à suivre ?
    J’ai beaucoup apprécié votre squelette, simple mais très classe.

    Merci pour votre aide.

    Répondre à ce message

  • 1

    Bonjour,
    En local tout fonctionne parfaitement, par contre en distant j’ai ce message : « Cannot modify header information - headers already sent by (output started at /home/-----/public_html/------/plugins/Vittory/vittory_options.php:2) in /home/-------/public_html/------/ecrire/inc/actions.php on line 89 ». Etant un simple utilisateur et novice pourrait-on m’indiquer de quoi cela pourrait venir ?
    Merci d’avance pour votre aide

    • Jacques

      Je me rebonds :-) il y avait des espaces dans vittory_fonction.php et dans vittory_options.php (pages qui apparemment sont vides). Une fois les espaces supprimés tout est rentré dans l’ordre.
      Par contre un autre problème que je n’arrive pas à résoudre : modifier les style.css, j’ai beau apporter des modifs cela n’est pas prit en compte, si quelqu’un peu m’aiguiller ? Merci

    Répondre à ce message

  • 3

    Bonjour,

    J’essaye d’installer le squelette, j’ai installé CFG préalablement, qui est actif dans les plugin, mais lorsque je vais sur « configuration de Vittory’s », j’ai seulement un message : Fichier cfg introuvable.
    Auriez-vous une idée de la cause de ce problème ? Est-ce parce que c’est une version en test sur spip3 ?

    Merci d’avance !

    • J’ai le même problème qu’Alice il me dit cfg introuvable. Est ce le squelette vittory’s est compatible avec spip 3 ?? en regardant un peu il n’y a pas de fichier paquet.xml mais plutot plugin.xml...

    • Bonjour,

      Je viens de joindre la version pour SPIP 3 dans l’article...

      C’est pas encore parfait, pas encore sur la zone, mais c’est déjà une bonne base.

      Amusez-vous bien !

    • Merci beaucoup !!

    Répondre à ce message

  • 10

    Salut, super sympa ce squelette jquery avec layout très simple, merci !

    J’espère parvenir à le modifier pour étendre un peu les possibilités
    -  Arriver à avoir des diaporamas multiples et différents
    -  Corriger la CSS pour gérer correctement l’affichage de certains éléments (H3, quote, HR, vignette des articles, notes de bas de page ...)
    -  Corriger la CSS pour que le bloc « content » ne déborde pas de la page (en bas)
    -  Gérer les liens HREF sur le titre du site
    -  Faire en sorte que les différentes pages possèdent chacune une URL distincte
    -  Avoir le diaporama mais que le site soit affiché derrière (et pas l’image courante)
    -  Utiliser l’effet de transition « fade » (comme sur la page « Googlemap ») mais sur toutes les autres pages
    -  Ajouter un joli formulaire de contact (OBLIGATOIRE)

    J’ai déjà attaqué pas mal de modifs, si certains veulent mettre cela en commun ou me donner des pistes je suis preneur.

    Merci à la communauté !

    • Salut Mat,

      Super, n’hésitez pas donner des idées ici pour faire évoluer ce squelette, qui sait peut-être que je les intègrerais dans les futurs commits :-)

      Amuse-toi bien avec Vittory’s !

    • Merci pour ta réponse ouverte !

      Petite question : je cherche à comprendre l’utilisation du mot-clé « cacher » ... ?
      Quelqu’un peut-il développer un peu sur l’usage de ce mot-clé technique,

      merci d’avance

    • Salut,

      Le mot clé « cacher » permet de ne pas afficher un article dans le menu (pour des cas spéciaux)

      @+

    • Oui mais...

      Quel interet dans la mesure ou ne s’affiche que les articles taggés « menu » ?

      Je pense que j’ai loupé un épisode, merci de m’éclairer un peu :)

    • Bonjour Mat,

      Avez-vous pu mener à bien toutes les modifications annoncées ci-dessus ?
      Si oui, serait-il possible de bénéficier de vos travaux ?

      Je souhaiterais utiliser ce squelette pour la présentation de tableaux d’artistes : j’ai donc besoin également d’un formulaire de contact, de diaporamas multiples, etc.

      Merci à vous !

    • Bonjour,
      -  Arriver à avoir des diaporamas multiples et différents -> OUI en utilisant un deuxieme plugin de diaporama (Multiviewer_Full).
      -  Corriger la CSS pour gérer correctement l’affichage de certains éléments (H3, quote, HR, vignette des articles, notes de bas de page ...) -> OUI
      -  Corriger la CSS pour que le bloc « content » ne déborde pas de la page (en bas) -> OUI
      -  Gérer les liens HREF sur le titre du site -> NON
      -  Faire en sorte que les différentes pages possèdent chacune une URL distincte -> NON
      -  Avoir le diaporama avec le site affiché derrière -> OUI

    • Salut Mat,

      N’hésite pas à partager tes fixs, exemples etc ... :-)

      @+

    • Bonjour,

      où pourrait-on se procurer les corrections du CSS pour ceux plus doué que moi qui s’y sont collé ?

      D’avance merci

    • Je ne peux pas poster les CSS sur le forum car fichiers non acceptés... désolé.

    • Merci d’avoir essayé, mais à défaut, quelqu’un peut-il m’aider en m’expliquant les lignes à changer/ajouter dans le CSS ?

      J’ai bien compris que les intertitres était « spip.t3 » mais quand je l’ajoute, ça ne fait rien de plus ?
      Même problème pour les puces et je ne trouve pas comme ne pas faire déborder le contenu sous le pied de page ?

      CSS et moi, on est pas très copain ;-)

    Répondre à ce message

  • 3

    Bonjour,
    J’apprécie le travail accompli pour adpater ce superbe thème .
    Mais,
    Chez moi le plug (0.0.1 [53564]) ne fonctionne pas ni sous 2.1 ni sous 3.0beta
    le squelette ne s’affiche pas, juste le titre et le lien google maps sur fond blanc
    de plus depuis l’installation du plugin j’ai des erreurs 302.
    Y aurait- il des conflits avec d’autres plugins ?
    Ou tout simplement « qu’elle n’est pas fonctionnelle »,
    mais vu les commentaires certains ont réussi à le faire fonctionner
    pour la 2.1 j’ai une installation de base avec ces plugins :

    Merci de votre aide

    • Bon finalement j’ai laissé tombé l’activation du plugin, par contre je travaille dessus en tant que squelette
      Je m’aperçois qu’il y un énorme taf sur les boucles spip, chapeau bas...!
      J’ai cependant une requête : je n’arrive pas à agrandir toutes les images quand il y a plusieurs articles avec des images dans le portfolio.
      je m’explique : je veux mettre des images dans chacun de mes articles, je charge donc mes images normalement puis les insère dans le portfolio. Tout va bien.

      J’ai donc un menu avec plusieurs articles dans mon squelette qui s’affichent avec les miniatures des images.
      Seulement voilà le (script) squelette ne veut pas agrandir les images des mes articles s’il y a plusieurs articles avec des images. Par contre tout marche nickel s’il n’y a qu’un seul article avec des images.
      Est-ce une limitation du javascript ? Ou cela provient-il des boucles documents_porfolio ?
      merci

    • Salut Sirom,

      Comme expliqué dans la doc, un seul article peut être utilisé comme galerie... C’est une limitation du javascript.

      @+

    • Merci de ta réponse :)

    Répondre à ce message

  • Bonjour,

    J’utilise SPIP depuis plusieurs années pour des sites d’information et j’ai développé un modèle de site tiré du squelette Ahuntsic (voir pour exemple aide création d’entreprise). Aujourd’hui, je souhaiterais un squelette qui correspondrait davantage à une galerie photo que mes visiteurs pourrait compléter eux-mêmes. Le lien avec Google map de ce squelette me plait particulièrement, est-ce qu’un utilisateur dfe Vittory’s pourrait m’en dire un peu plus. Merci d’avance.

    Répondre à ce message

Ajouter un commentaire

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
  • 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 apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom