Einsteiniumist (Squelette)

Publié le : 23 avril 2013 – Dernière modification le 21 décembre 2021 – par Audric Mas – 84 commentaires

1
2
3
4
5
15 votes

Un squelette principalement conçu pour les sites de type blog et portfolio.

Présentation :

Adaptation pour Zpip du thème Wordpress Einsteiniumist conçu par Padd Solutions.

Voir une démo du thème et du squelette Einsteiniumist.

Ce squelette a été conçu pour le thème du même nom. Pour un plus grand confort, je vous recommande vivement de l’installer. Voir le thème Einsteiniumist.

Captures :

Thème + Squelette : Page d’accueil

Caractéristiques du squelette :

Il possède une colonne de navigation latérale (mots clés, rubriques, etc.).

La page d’accueil se compose comme suit :

  • Le slider Javascript présente les 6 derniers articles mis en ligne associés au mot-clé « slider » et ayant un logo. Sinon, il affiche les 6 derniers articles ayant un logo. Le slider utilise le logo d’un article, et affiche le titre et l’introduction cliquable pour accéder à la page de cet article. Pour les articles destinés à être affichés dans le slider, pensez à utiliser des logos aux dimensions adaptées : au moins 294 x 232px.
  • Une zone formée de 3 colonnes en dessous du slider affiche les 3 derniers articles associés au mot-clé « icone ». Sinon, elle affiche les 3 derniers articles.
  • Une deuxième zone présente les 8 derniers articles mis en ligne associés au mot-clé « image_sommaire ». Sinon, elle affiche les 8 derniers articles.

Le pied de page est important avec les articles les plus populaires à gauche et un formulaire de contact à droite.

Les Plugins :

Le squelette Einsteiniumist requiert le plugin suivant :

Les plugins suivants sont gérés :

  • Menus : permet de créer des menus facilement
  • Zen-garden
  • Social tags : partager vos articles sur les réseaux sociaux
  • Gravatar : utiliser un avatar unique sur tous les sites

Installation :

Le squelette Einsteiniumist est conçu sous la forme d’un plugin. Il pourra être personnalisé en créant un dossier squelettes/ à la racine de votre site SPIP, et en surchargeant les fichiers que vous souhaitez modifier.

Comme tout plugin, son installation est classique, déposez-le dans le répertoire plugins/. Le plugin « squelette_einsteiniumist » apparaît dans la « Liste des plugins » (Configuration > Gestion des plugins), il vous suffira de l’activer : cochez-le, et enregistrez.

Configuration :

Pour profiter pleinement du package Einsteiniumist, il est nécessaire de configurer certains paramètres via l’interface privé de SPIP.

Activer GD2 :

GD2 permet d’appliquer des traitement sur les images.
Activer GD2 dans votre interface Spip : Configuration > Fonctions Avancées > "GD2" et "Générer automatiquement les miniatures des images".

Sliders (Page d’accueil) :

  • Utilisez le mot-clé "slider", pour définir les 6 derniers articles qui seront affichés dans le slider. Si aucun article ne possède ce mot-clé, les 6 derniers articles en date ayant un logo seront affichés. Les logos des articles doivent faire au moins 294 x 232px.
  • Utilisez le mot-clé "icone", pour définir les 3 articles qui seront affichés sous le slider. Si aucun article ne possède ce mot-clé, la zone affiche les 3 derniers articles en date.
  • Utilisez le mot-clé "image_sommaire" pour définir les 8 derniers articles qui seront affichés dans la deuxième zone sous le slider. Si aucun article ne possède ce mot-clé, les 8 derniers articles en date s’afficheront. À noter : si un article ne possède pas de logo, un logo par défaut lui sera attribué.

Plugin Social Tags :

Dans "Squelettes > Social tags", pour le paramètre "Insertion dans les pages", entrez le sélecteur : #socialtags
Les liens se placeront alors sous l’article dans une zone prévue à cet effet.

Plugin Menus :

Un menu est déjà mis en place, et nécessite de l’identifier comme suit :

  • Menu principal : barrenav

Mises à jour :

v1.0.2 : passage en version « stable »

  • Attention : modification du sélecteur d’identification pour le plugin « Social tags » : #socialtags remplace .surlignable .texte

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

33 discussions

  • jawi

    Bonjour, mon problème c’est que le forum des articles ne s’affiche pas, le reste ça marche impec, si quelqu’un peut me donner un tuyau...

    http://frams.org

    Répondre à ce message

  • 4
    Patrick

    Bonjour,
    j’utilise squelette + thème, j’ai un peu adapté tout cela et la problématique que je rencontre est que nous voudrions avoir un portfolio sur la page sommaire... dans un article je sais faire... mais là ???
    comment faire ?
    étant novice sous spip... j’avoue être un peu perdu !
    Si vous pouviez m’aider un peu cela serait super sympa.
    Merci d’avance. Patrick

    • Audric Mas

      Pour ajouter un portfolio sur la page sommaire, insérez ce code dans le fichier page_sommaire.html qui se situe à la racine du plugin squelette_einsteiniumist.

      <B_documents_portfolio>
<div class="documents documents_portfolio">
<h2 class="h2"><:einsteiniumist:info_portfolio:></h2>
<BOUCLE_documents_portfolio(DOCUMENTS) {titre_mot=portfolio_sommaire} {extension IN png,jpg,gif} {par num titre, date}>[
<a href="(#URL_DOCUMENT)"
type="#MIME_TYPE"
rel="documents_portfolio[-a(#ID_ARTICLE)][-r(#ID_RUBRIQUE)]"
[ title="(#TITRE|attribut_html|couper{80})"]>[(#FICHIER
|image_reduire{0,100}
|inserer_attribut{class,spip_logos}
|inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]</a>
]
</BOUCLE_documents_portfolio>
</div>
</B_documents_portfolio>

      Ensuite il vous suffit de créer un mot clé, ici portfolio_sommaire et de l’associer aux documents que vous souhaitez voir apparaître dans le portfolio.

    • Patrick

      Bonjour et merci pour le code que je viens de mettre en place et qui fonctionne... super...
      je cherche encore à centrer et/ou justifier le bloc portfolio dans le centre de la page... je n’y suis pas encore arrivé... si vous avez une petite idée, je suis preneur !
      En tout cas merci beaucoup pour votre gentillesse et votre réactivité.
      Patrick

    • Audric Mas

      Ajoutez ceci à votre feuille de style :

      .documents_portfolio { text-align: center; }

    • Patrick

      Cool. Super merci. Faut que pendant mes vacances j’arrive à trouver une bonne documentation qui me permettre de mieux utiliser SPIP.
      En tout cas votre aide est très appréciable et cela m’a permis de mettre en place le portfolio sans tout massacrer.

    Répondre à ce message

  • 3
    Patrick

    Bonjour,
    le slider de la page d’accueil a disparu !
    nous sommes en train de refaire notre site et nous utilisons le thème + le squelette Einsteiniumist.
    jusqu’à ce matin le slider de la page sommaire fonctionnait bien avec trois articles ayant le mot clé slider et une image logo.
    en essayant de mettre un slider genre portfolio sur la page sommaire (dans le bas) j’ai dû faire une mauvaise manipulation quelque part (mais ou... je ne retrouve pas...) et depuis pas moyen de remettre en service le slider. pas de message d’erreur.
    j’ai réinstallé des fichiers .js, remis en place la page sommaire d’origine, vérifié habillage.css et style_einsteiniumist.css mais je ne trouve pas !
    Auriez vous une idée ou des conseils à me donner pour identifier ce qu’il se passe ?
    vous pouvez aller voir http://www.azsemt.com si cela peut vous aider.
    Merci d’avance,
    Patrick

    • Audric Mas

      En activant la console de developpeur, j’ai repéré 2 erreurs qui semblent bloquer les javascripts :

      Uncaught TypeError: Cannot read property 'opacity' of undefined jquery.colorbox.js : ligne 83
Uncaught TypeError: Object #<Object> has no method 'colorbox' spip.mediabox.js : ligne 27

      Cela doit surement venir d’une incompatibilité entre différents scripts. Si vous en avez rajouté à ceux d’origine, tentez de les désactiver pour voir si les erreurs proviennent bien de là.

    • Patrick

      Bonjour et merci pour votre réponse...
      j’ai installé le site en « local » et il fonctionne... c’est donc bien un plugin installé puis supprimé qui fait un conflit car tout n’a pas été enlevé quand je l’ai supprimé. je regarde d’où viennent ces deux lignes et pourquoi elles n’ont pas été supprimées lorsque que j’ai désinstallé les plugins en question.
      Encore merci pour votre réactivité.
      Patrick

    • Patrick

      Bonjour,
      tout re fonctionne correctement... Il y avait bien conflit. Merci pour ce coup de main.
      Patrick

    Répondre à ce message

  • 1
    momol

    Bonjour je suis tout débutant dans spip et j’aimerais savoir comment afficher le formulaire de contact en bas à droite car c’est la seul chose qui me bloque. merci

    Répondre à ce message

  • 2
    fred

    Il y a une erreur sous ie uniquement dans les pages forum :
    http://einsteiniumist.openstudio.fr/spip.php?page=forum&id_article=6&id_forum=5
    A priori, il y a un conflit avec jquery car lorsque que l’on enleve jQuery.noConflict() ; dans le fichier slider.js, plus de souci.
    Par contre, je ne sais pas à quoi ca sert ce jQuery.noConflict() ; ?
    Comment régler le bug ?

    • Audric Mas

      Quelle est votre version d’IE ? Sous IE10 je n’ai pas l’impression d’avoir de bug.
      D’ailleurs comment le bug se manifeste-t-il ?

      SInon pour jQuery.noConflict() je vous renvoi à cet article présentant la fonction. En gros elle permet d’éviter les conflits lors d’utilisation de plusieurs librairies.

    • fred

      Bonjour,
      j’ai ie8 et j’ai la même erreur sous ie8 sur votre site demo.
      j’ai un panneau jaune en bas à gauche de ie, avec une erreur javascript :

      Voilà la copie :

      Détails de l’erreur de la page Web

      Message : Cet objet ne gère pas cette propriété ou cette méthode
      Ligne : 275
      Caractère : 5
      Code : 0
      URI : http://einsteiniumist.openstudio.fr/spip.php?page=forum&id_article=6&id_forum=5

      merci de votre réponse.

    Répondre à ce message

  • 2
    ludo

    bonjour,
    je suis sours Spip 3.0.10.

    j’ai mis les bons mots-clefs je ne vois ni le slider ni les trois logos des articles tagués icone, pourtant j’ai désintaller le multilangue. De plus la page contact qui doit se situer en bas à droite, n’y ai pas.
    voici mon lien www.avie-marseillle.net

    pour le menu : le teme « barrenav » doit-il etre le nom du menu ?

    merci d’avance de l’aide que vous pourrez m’apporter.

    • Audric Mas

      Le lien de votre site est mort.

      « barrenav » correspond à l’identifiant du menu. Il est à renseigner lors de la configuration de votre menu dans l’onglet « Squelettes > Menus du site ».

    • ludo

      merci pour l’info, j’ai oublié de renouveller mon hebergement ! C’est fait, le site est de nouveaux en fonction.

      merci pour l’aide donné au menu.

      Maintenant, il me reste à resoudre mes autres disfonctionnements.

    Répondre à ce message

  • 1
    Patrick

    Bonjour,
    Dans la page inclure/documents.html (fournie avec le squelette) il y a une div class=« documents documents_portfolio » - Est-ce que cela permet de mettre en place un porfolio dans une page (barre avec photos miniatures qu’il est possible d’agrandir avec un clic de souris), et dans ce cas là, comment l’activer ? comment le mettre en place ?
    Merci d’avance,
    Patrick

    • Audric Mas

      Oui il s’agit bien d’un portfolio.

      Pour l’activer, rendez-vous dans l’espace privé sur la page de rédaction d’un nouvel article, plus bas vous trouverez un icône « Ajouter une image ». Après avoir ajouté une image, un bloc « Illustrations » apparaît en dessous de l’article avec l’image ajoutée, il vous suffit de survoler l’image et de cliquer sur le bouton « Déposer dans le portfolio » (notez que le titre du bloc « Illustrations » s’est changé en « Portfolio »).

    Répondre à ce message

  • 11
    jfredd

    Bonjour,
    alors j’ai tout bien installé sur un spip 3.08, squelette, thème, zpip et autres plugins requis bref tout.
    Et j’ai un problème : je n’ai jamais la page d’accueil. Dès que j’arrive sur le site je suis dirigé vers la rubrique 1 c’est normal ?

    De plus j’ai eu beau mettre les bons mots-clefs je ne vois ni le slider ni les trois logos des articles tagués icone

    je n’ai pas non plus les huit articles enfin voilà c’est assez décevant dans l’ensemble pour l’instant. Ai-je loupé quelque chose ?

    Merci

    • Audric Mas

      Salut,

      Tant que la page d’accueil ne s’affiche pas, les mots-clés « slider », « icone » et « image_sommaire » ne renvoient rien.

      Le problème c’est d’être automatiquement redirigé sur la page de la rubrique 1. Il faut d’abord résoudre ce souci et les choses devraient rentrer dans l’ordre.

    • jfredd

      Rebonjour,

      le problème venait d’un plugin multilinguisme qui dirigeait automatiquement vers la rubrique en français donc ça c’est réglé et ça ne venait absolument pas de votre squelette, mes excuses donc.

      Par contre je ne trouve pas la page que je dois modifier pour changer la présentation du plan. Pouvez-vous m’indiquer le fichier à modifier ? Merci

    • Audric Mas

      Pas de souci ;)

      Si vous parlez de la page « plan du site ». Le fichier à modifier se situe plugins/auto/z/v1.7.21/contenu/page-plan.html

    • jfredd

      ok merci beaucoup je ne suis pas encore très familier des squelettes basés sur Zpip

    • jfredd

      Désolé encore une question. Quelle est la feuille de style qui me permet d’agir sur les dimensions des div de l’entête (je ne trouve pas.

    • Audric Mas

      Le style de l’entête (header) est géré dans la feuille de style « habillage.css » située plugins/auto/theme_einsteiniumist/habillage.css

    • jfredd

      ok merci je commence à mieux comprendre le fonctionnement de tout cela. J’ai encore des questions. J’ai créé un répertoire squelette dans lequel j’ai recopié l’intégralité des fichiers du plugin squelette_einsteinumist et c’est là que je fais mes changements. J’y met aussi les fichiers zpip que je modifie.

      1) Puis-je supprimer dans ce répertoire squelette les fichiers inchangés par rapport au plugin. Est-ce que cela accélèrera le traitement ou est-ce que c’est égal ?

      2) Comment procéder s’il y a mise à jour du plugin ? A priori je ne peux pas être sûr que les fichiers que j’aurais modifiés auront la même structure, les mêmes interactions dans la MàJ ou même qu’ils existeront toujours, si ?

      3) Que faire des fichiers du thème_einsteinumist que je modifie ? où les recopier ?

      Merci d’avance et merci pour l’aide déjà apportée.

    • Audric Mas

      SPIP repose sur un système de surcharge de fichier, je vous renvoie à ce lien pour plus d’explication (Priorité des dossiers de squelettes).

      1) Les fichiers situés dans le dossier « squelettes » sont appelés en premier. Il est donc inutile de surcharger dans ce dossier les fichiers que vous ne souhaitez pas modifier.

      2) S’il y a une mise à jour du plugin, il faudra veiller à modifier les fichiers surchargés dans votre dossier « squelettes ». Tout dépend de l’ampleur de la màj mais bien souvent il suffira de modifier quelques lignes dans votre fichier surchargé si vous souhaitez garder vos modifications sinon (re)surcharger le fichier « source » du plugin et appliquez y vos modifications.

      3) Les fichiers du thème sont aussi à surcharger dans votre dossier « squelettes ».

    • jfredd

      Rebonjour c’est remoi ;-)

      Alors j’ai une rubrique News qui sera à base de brèves. j’ai donc bossé sur l’affichage de la liste des brèves sur la page rubrique avec ce code

      [(#REM) Breves du secteur ]
<B_breves>
<div class="liste breves">
		#ANCRE_PAGINATION
		<ul class="liste-items">
				<BOUCLE_breves(BREVES) {id_rubrique} {par date}{inverse} {pagination 6}>
				<li><h3 class="h3 entry-title"><a href="#URL_BREVE" rel="bookmark">[(#LOGO_BREVE||image_reduire{100,0})][(#DATE|affdate_jourcourt) &ndash; ]#TITRE</a></h3>
			    </li>
				</BOUCLE_breves>
		</ul>
		[
		<p class="pagination">(#PAGINATION{page_precedent_suivant})</p>]
</div>
</B_breves>

      Ça va sauf que le logo de la brève ne s’ affiche pas (voir image jointe)

      et pourtant quand je vais dans le code source de la page html générée il y est

      <div class="liste breves">
		<a name='pagination_breves' id='pagination_breves'></a>
				<ul class="liste-items">
						<li><h3 class="h3 entry-title"><a href="spip.php?breve1" rel="bookmark"><img class='spip_logos' alt="" src="local/cache-vignettes/L100xH44/breveon1-1f6e0.jpg" width='100' height='44' />30 mai &ndash; Apéro Riff</a></h3>
			    </li>
				</ul>
		</div>

      Donc je me dis qu’il doit y avoir dans le squelette ou le thème quelque chose qui empêchje son affichage sur la page

      Une idée ?

      Merci d’avance.

    • Audric Mas

      Le logo ne s’affiche pas car il récupère le style appliqué à .liste-items .spip_logos (ligne 1209 habillage.css). Il suffit de modifier (supprimer) la propriété css margin-left: -190px pour voir apparaître le logo.

      Si vous souhaitez rester sur votre construction de boucles brèves, appliquez un style différent aux logos qui se trouvent sur une page_breve.

      Sinon, reprenez la construction de base de la boucle brève qui se situe plugins/auto/z/v1.7.21/contenu/breve.html et adaptez-la dans votre dossier squelettes.

      P.S. : pour identifier plus facilement les erreurs en CSS, veillez à bien désactiver la compression des feuilles de style sous SPIP (Configuration > Fonctions avancées > Optimisations et compression > ne pas cocher la case « Activer la compression des feuilles de style (CSS) ») et servez-vous des consoles de développement intégrés aux navigateurs tels que Firebug sous Firefox.

    • jfredd

      Bon comme je vous ai tous bien sollicités voici ce que ça donne

      http://www.judgefreddcustomworks.com/

      Merci pour ton support Audric

    Répondre à ce message

  • 1
    Trystan

    Bonjour... Comment fait-on pour supprimer la section ARTICLES LES PLUS POPULAIRES ?? Cela m’est guerre utile pour mon école et j’aimerais vraiment le supprimer. Merci !

    • Audric Mas

      Bonjour,

      Pour supprimer la section « Articles les plus populaires » située en bas de page, il vous suffit d’ouvrir le fichier contact.html qui se trouve dans plugins/auto/squelette_einsteiniumist/v1.0.2/inclure/contact.html et de supprimer ce qui suit (lignes 3 à 18) :

      <div class="widget-bar widget-bar-1">
<div class="contact-info">
			
<B_art_contact>
<h2><:articles_populaires:></h2>
<ul>
<BOUCLE_art_contact(ARTICLES){par popularite}{0,3}>
<li>
<a href="#URL_ARTICLE" title="#TITRE"><h3>#TITRE</h3></a>
<div class="texte-intro"><a href="#URL_ARTICLE" title="#TITRE">#INTRODUCTION{150}</a></div>
</li>
</BOUCLE_art_contact>
</ul>
</B_art_contact>

</div>
</div>

    Répondre à ce message

  • rjadot

    Pour un multilingualisme plus poussé, il serait intéressant d’ajouter, dans page-sommaire.html, le filtre « lang ? » (pas d’espace normalement entre lang et « ? », mais c’est automatiquement ajouté ici) dans les boucles suivantes :

    * < BOUCLE_slider(ARTICLES) >
    * < BOUCLE_allslider(ARTICLES) >
    * < BOUCLE_items(ARTICLES )>
    * < BOUCLE_items2(ARTICLES) >
    * < BOUCLE_articles1(ARTICLES) >
    * < BOUCLE_articles2(ARTICLES )>

    Ainsi lorsqu’on sélectionne une langue, seulement la version dans la sélectionnée d’un article est affichée dans le slider ou dans les autres parties de la page d’accueil. Ça évite par exemple d’avoir le même article qui s’affiche en plusieurs langue dans le slider :p

    C’est d’ailleurs applicable à quelques autres très beaux thèmes comme Mapaaran etc.

    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