Pages statiques

Danger

Depuis Geotrek-Rando V3, le composant Bootstrap n’est plus utilisĂ© pour gĂ©rer les diffĂ©rentes tailles d’écran. Cela signifie que la mise en page crĂ©Ă©e dans Geotrek-Admin n’est pas reproduite sur le site public. Cette documentation n’est valable que pour Geotrek-Rando V2 en attendant sa mise Ă  jour expliquant le fonctionnement actuel. Voir le ticket : https://github.com/GeotrekCE/Geotrek-rando-v3/issues/466

Les pages statiques sont les pages d’information et de contextualisation de votre portail web Geotrek-rando. Comme pourraient l’ĂȘtre les premiĂšres pages d’un topo-guide papier. Elles peuvent aussi ĂȘtre consultĂ©es dans votre application Geotrek-mobile.

../_images/flatpages-gtecrins.jpg

Exemple de page statique (http://www.grand-tour-ecrins.fr/informations/le-grand-tour-des-ecrins/)

Elles permettent de fournir Ă  l’internaute et futur randonneur des informations gĂ©nĂ©riques : prĂ©sentation de votre structure, votre projet de randonnĂ©e, recommandations, informations pratiques, etc.

Elles sont gérées depuis le module de configuration de Geotrek-admin et sont ensuite publiées sur Geotrek-rando à chaque synchronisation du contenu.

../_images/flatpages-adminsite.jpg

CrĂ©er une page statique

Depuis le module de configuration de Geotrek-admin, sĂ©lectionnez “Pages statiques” dans la rubrique “Flatpages”.

../_images/flatpages-flatpages.png

Vous accĂ©dez alors Ă  la liste des pages statiques. Cliquer sur “Ajouter Page statique” en haut Ă  droite de l’écran pour crĂ©er une premiĂšre page.

Construire une page statique

SĂ©lectionnez la langue du contenu que vous souhaitez saisir : en / fr / it


Saisissez :

  • un titre (sans guillemets, parenthĂšses, etc.)

  • un ordre optionnel (pour dĂ©finir l’ordre d’apparition dans le menu de votre Geotrek-rando)

  • cochez « publié » lorsque vous souhaiterez mettre en ligne votre page

  • dĂ©finissez la « source » (comprendre ici la destination d’affichage et donc votre Geotrek-rando)

  • sĂ©lectionnez une cible (Geotrek-rando et/ou Geotrek-mobile ou cachĂ©e pour crĂ©er une page qui ne sera pas listĂ©e dans le menu).

Attention, à chaque fois que cela vous est demandé, veillez à sélectionner la langue de votre contenu.

../_images/flatpages-form.jpg

L’interface permet de construire sa page en responsive design, c’est-Ă -dire qu’il est possible de disposer les blocs de contenu pour s’adapter aux diffĂ©rentes tailles d’écrans des utilisateurs.

../_images/flatpages-bootstrap-responsive.jpg

Choisissez le gabarit sur lequel vous souhaitez construire votre page : 12 / 6-6 / 4-4-4 / etc. Ce sont des formats prĂ©dĂ©finis d’assemblage de blocs basĂ©s sur 12 colonnes qui occupent 100% de la largeur de l’écran (Bootstrap).

../_images/flatpages-bootstrap-grids.jpg

Vous pouvez aussi utiliser ou vous inspirer des 2 gabarits d’exemple (Gabarit 1 et Gabarit 2).

../_images/flatpages-blocks.jpg

Vous pouvez ajouter autant de gabarits que vous le souhaitez sur une seule page.

Une fois que vous avez ajustĂ© vos blocs de contenu pour un affichage sur ordinateur (Desktop), vous devez basculer sur l’affichage sur mobile (Phone) pour l’adapter Ă  de plus petits Ă©crans (en cliquant sur les + et - bleus de chaque bloc). PrivilĂ©giez alors des blocs sur une colonne faisant 100% de large.

../_images/flatpages-blocks-edit.jpg

Ajouter du contenu dans un bloc

En cliquant dans la zone de texte, une barre d’édition apparaĂźt. Sur un format classique comme dans les logiciels de traitement texte, plusieurs menus et outils sont alors disponibles :

  • File : (fichier)

  • Edit : retour, copier-coller,

  • Insert : InsĂ©rer une image, un lien, des caractĂšres spĂ©ciaux

../_images/flatpages-wysiwyg.jpg

InsĂ©rer une image : cela ouvre une nouvelle fenĂȘtre avec diffĂ©rents champs Ă  remplir :

  • Source : insĂ©rer l’URL de l’image (idĂ©alement dans le rĂ©pertoire /custom/public/images/ de votre Geotrek-rando)

  • Image description : lĂ©gender l’image pour optimiser son rĂ©fĂ©rencement

  • Dimensions : ajuster le format et cocher « Constrain proportions »

InsĂ©rer un lien : cela ouvre une nouvelle fenĂȘtre avec diffĂ©rents champs Ă  remplir :

  • URL : lien de destination

  • Title : texte Ă  afficher pour le lien

  • Target : « New window » si vous souhaitez que le lien s’ouvre dans un nouvel onglet

  • View : « Show blocks » permet de faire apparaĂźtre les diffĂ©rents paragraphes de votre texte. Elles sont utiles Ă  la structure de votre texte.

  • Format : gras, italique, souligner, etc. Le sous-menu « Formats » permet de choisir un style prĂ©dĂ©fini pour les titres (Heading 1, Heading 2, etc.). Pour que le style s’applique uniquement au titre et non pas Ă  tout le texte, faire un retour Ă  la ligne et vĂ©rifier sa prise en compte en activant « Shox blocks ».

  • Table : insertion de tableau

  • Tools : Afficher le code source de la page

Astuces

  1. Ne jamais utiliser la touche retour du clavier [ ? ] sans avoir le curseur sélectionné dans une zone de texte. Cela équivaut à revenir à la page précédente et vous perdrez tout votre contenu sans le sauvegarder.

  2. Pour reproduire une page dans une langue diffĂ©rente : copier le Code Source et coller-le Code Source de votre nouvelle langue. Vous n’aurez plus qu’à traduire votre texte ! Idem pour traduire un contenu dans une autre langue.

  3. Si deux de vos pages ont le mĂȘme numĂ©ro d’ordre d’apparition, une seule des deux sera affichĂ©e sur la plate-forme numĂ©rique.