Retour à Ajouter du contenu (partie 1).

  1. Le liens hypertexte :

Dans la barre de menu de l'éditeur "ckeditor" devraient figurer les boutons "lien" et "supprimer le lien". Si  ce n'est pas le cas vérifiez que votre format de saisie de texte permet l'ajout des liens ( Full HTML au lieu de Filtered HTML par exemple).
Sélectionner le texte qui deviendra l'hypertexte puis cliquer sur le bouton "lien".La fenêtre "lien" figurée ci-contre s'ouvre. Si votre fenêtre ne montre pas de bouton "explorer le serveur", il vous faut modifier la configuration de l'éditeur.

Vous pouvez alors saisir l'URL de votre lien, par exemple "http://dhumbert.info/" ou "avec l'explorateur de fichier, naviguer à la recherche de cette cible sur votre serveur.
Si la cible figure  encore sur votre ordinateur et que ckeditor est bien configuré, vous pourrez télécharger cette cible sur votre serveur grâce au menu "transfert" de l'explorateur.

Grâce à l'onglet "cible" de la fenêtre "lien", vous indiquerez que comment s'affichera la cible du lien ( dans un nouvel onglet, dans une nouvelle fenêtre popup...

Vous remarquerez qu'il n'est pas possible de lier votre texte ( votre image) à une page de votre site par cette méthode. En effet, les pages sous Drupal ne sont pas stockées sous forme de fichiers ( html - php) sur le serveur mais comme enregistrement d'une base de données. L'installation du module "Linkit" résout cette limitation.

  1. LinkIt :

Si le bouton "linkit" n'apparait pas dans votre éditor, vérifiez  que :

  • le module est activé dans votre installation de drupal.
  • la case linkit est cochée dans la configuration de ckeditor.
  • le bouton est bien ajouté dans votre barre de bouton pour le format de saisie que vous utilisez.

Un clic sur le bouton "linkIt se traduit, si un profil linkIt est créé,  par l'ouverture de la fenêtre ci-contre. En saisissant un mot dans la zone de recherche, vous obtenez une liste des pages recherchées.

  1. Améliorer la mise en page

Vous trouverez ici quelques "astuces" pour affiner la mise en page de vos contenus grâce aux balises html  "div" (ou "p")  et quelques classes CSS bien pensées.

Note : la classe doit être placée avec les autres classes dans le fichier CSS du thème.

Ci-dessous, vous lirez un exemple pour afficher une partie de votre contenu dans 2 colonnes.

Pour afficher deux blocs côte à côte ( comme c'est le cas ici) : j'ai créé  un premier bloc "div" de classe : deux-colonnes (décrite dans la colonne droite). Puis j'ai créé dans ce blocs, 2 autres blocs "div" sans classe particulière. Dans le 1er bloc j'ai placé dans un paragraphe unique, le contenu qui figurera dans la colonne de gauche. Dans le 2nd bloc, également dans un paragraphe unique, j'ai placé le contenu qui figurera dans la seconde colonne. Attention, si l'espace dans le flux d'affichage  n'est pas suffisant , les 2 blocs s'afficheront l'un en dessous de l'autre.

Cliquez sur l'image pour l'agrandir.

 

La classe  "deux-colonnes" utilisée :
.deux-colonnes>div+p{
    width: 44%;
    display: inline-block;
    padding: 0 1em;
    vertical-align: text-top;
    }
.deux-colonnes>div+p+div+p{
    display: inline-block;
    width: 44%;
    padding: 0 1em;
    vertical-align: text-top;
    }