CSS Editor, Omeka Classic : encore des pistes de personalisation

Ce billet est un complément du billet « Le plugin CSS Editor d’Omeka Classic » du 4 octobre dernier (2019). Ici, je ne fais que répondre à 3 questions « Comment faire ? » qui m’ont été posées.

Avant tout…

Ici, on est dans le cas d’un Nakalona (pack Omeka/Nakala d’Huma-Num) avec impossibilité de trifouiller dans le thème. Le thème utilisé est Seasons ! L’option « Item File Gallery (Check this box if you wish to display your item files as a grid of square thumbnails and icons.) » du thème a été activée.

Cas 1 : Modifier la largeur des blocs/colonnes afin que le bloc « Fichier » soit plus large, et les blocs en première colonne soit moins larges

Étape 0 – Configuration préalable au dépôt d’images

Si on demande simplement un affichage agrandi de l’image, on a un risque de perte de qualité. En effet, au moment où l’on dépose un fichier image, Omeka génère des versions allégées et redécoupées de l’image. Celle utilisée dans le bloc « Fichier » d’un page de contenu (ou page item/show) est l’image dite « Vignette carrée ». Sa taille par défaut est de 200x200px. Il y a redécoupage de l’image pour la rendre carrée. Si on indique en CSS d’afficher l’image avec une largeur (ou une hauteur) supérieure, elle sera floue. Il faut donc **avant** de déposer les images spécifier une taille supérieure pour la génération des vignettes carrées. Cette valeur peut être modifiée dans « Apparence » > onglet « Paramètres » > Taille des vignettes carrées Taille maximale des vignettes carrées (en pixels). Si vous voulez modifier les choses a posteriori (du dépôt des fichiers), soit vous devrez redéposer toutes les images, soit il va falloir générer par vous-même les images au bon format, puis les remplacer les fichiers concernés sur le serveur.

CSS Editor, code à utiliser

Pour mieux comprendre :

  • spécifier la largeur en % (de la largeur totale de la fenêtre) permet d’avoir un affichage qui s’adapte à la taille de l’écran ;
  • la somme des % des colonnes  de gauche (ayant l’identifiant primary) et de droite (sidebar) ne doit pas être de 100% au risque de voir la colonne de droite être reléguée sous la colonne de gauche. Cela est dû à la présence de marges. De base, les % sont de 35 et 61 ;
  • en CSS, il est possible de spécifier une taille minimale et/ou maximale comme on peut le voir dans cet exemple ;
  • ici, j’ai fait des choix en comparant le résultat sur deux écrans (mon grand fixe et celui de mon ordinateur portable). Le résultat est bien ;
  • si on utilise le thème Season et que l’on a coché l’option « Item File Gallery Check this box if you wish to display your item files as a grid of square thumbnails and icons.« , l’affichage est quelque peu modifié, et la zone d’affichage des fichiers est prévus pour afficher une grille de fichier (qui s’affichent donc les uns à côtés des autres et en plus petit). Il faut donc en plus ajouter une règle CSS pour écraser une règle activée par cette option ;

.show #primary {
   width: 35%; /* largeur de la colonne de gauche */
}

.show #sidebar {
   width: 61%; /* largeur de la colonne de droite */
   max-width: 650px; /* largeur maximale */
   min-width: 400px; /* largeur minimale */
}

.items.show #itemfiles #item-images div {
   width: 100%; /* le fichier doit bien prendre 100% de la largeur du bloc dont il fait partie */
}

Cas 2 : Modifier l’intitulé « Fichiers » du bloc où apparaît l’illustration

J’ai fouillé et il ne semble pas y avoir d’option (du thème, d’Omeka…) permettant de modifier cela. La seule solution est de passer par CSS Editor. Or CSS Editor n’accepte pas la propriété content, seule propriété (à ma connaissance) permettant en CSS de modifier du contenu. Deux solutions donc : (1) on fait avec l’intitulé « Fichier » ou (2) on n’affiche aucun intitulé. Cela peut apparaître frustrant, mais CSS n’est pas fait pour écrire du contenu dans les pages et CSS Editor est encore plus restrictif…

Pour ne pas afficher l’intitulé :

#itemfiles h2 {
    display: none;
}

Cas 3 : Ne pas afficher certaines métadonnées, notamment des fichiers

# Comme pour le cas 2… pas d’option ni dans le thème, ni dans l’apparence d’Omeka… donc je suggère une règle de non-affichage. À dupliquer et adapter à toutes les métadonnées concernées.

#original-filename {
    display: none;
}

 

C’est tout pour aujourd’hui !


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.