Personnalisation de la visionneuse de carrousel customizing-carousel-viewer

Toutes les personnalisations visuelles et la plupart des personnalisations comportementales de la visionneuse de carrousel s’effectuent en créant un fichier CSS personnalisé.

Le processus suggéré consiste à prendre le fichier CSS par défaut pour la visionneuse appropriée, à le copier à un autre emplacement, à le personnaliser et à spécifier l’emplacement du fichier personnalisé dans la commande style=.

Les fichiers CSS par défaut se trouvent à l’emplacement suivant :

<s7viewers_root>/etc/dam/viewers/s7viewers/html5/CarouselViewer_dotted_light.css

La visionneuse est fournie avec quatre fichiers CSS prêts à l’emploi, pour les indicateurs numériques et de visionneuse avec points, chacun dans un jeu de couleurs « clair » et « sombre ». La version « Lumière pointillée » est utilisée par défaut, mais il est facile de passer à une autre version en utilisant un CSS standard différent et en définissant le paramètre SetIndicator.mode . D’autres fichiers CSS standard se trouvent à l’emplacement suivant :

<s7_viewers_root>/html5/CarouselViewer_dotted_dark.css

<s7_viewers_root>/html5/CarouselViewer_numeric_dark.css

<s7_viewers_root>/html5/CarouselViewer_numeric_light.css

Le fichier CSS personnalisé doit contenir les mêmes déclarations de classe que le fichier par défaut. Si une déclaration de classe est omise, la visionneuse ne fonctionne pas correctement, car elle ne fournit pas de styles par défaut intégrés pour les éléments de l’interface utilisateur.

Une autre manière de fournir des règles CSS personnalisées consiste à utiliser des styles incorporés directement dans la page web ou dans l’une des règles CSS externes liées.

Lors de la création d’un CSS personnalisé, gardez à l’esprit que la visionneuse attribue .s7carouselviewer classe à son élément DOM conteneur. Si vous utilisez un fichier CSS externe transmis avec la commande style=, utilisez .s7carouselviewer classe comme classe parente dans le sélecteur descendant pour vos règles CSS. Si vous ajoutez des styles incorporés à la page web, qualifiez également ce sélecteur avec un identifiant de l’élément DOM du conteneur comme suit :

#<containerId>.s7carouselviewer

Création d’un CSS en responsive design section-0bb49aca42d242d9b01879d5ba59d33b

Il est possible de cibler différents appareils et tailles d’incorporation dans le CSS pour faire en sorte que votre contenu s’affiche différemment, selon l’appareil d’un utilisateur ou d’une utilisatrice ou une mise en page web particulière. Cette technique inclut, sans s’y limiter, différentes mises en page, tailles d’élément de l’interface utilisateur et résolution de l’illustration.

La visionneuse prend en charge deux mécanismes de création de CSS conçus en responsive design : les marqueurs CSS et les requêtes multimédias CSS standard. Vous pouvez utiliser ces deux mécanismes indépendamment ou ensemble.

Marqueurs CSS

Pour faciliter la création d’une feuille de style CSS en responsive design, la visionneuse prend en charge les marqueurs CSS. Ces marqueurs sont des classes CSS spéciales qui sont affectées dynamiquement à l’élément de conteneur de visionneuse de niveau supérieur. Ils sont basés sur la taille de la visionneuse d’exécution et le type d’entrée utilisé sur l’appareil actuel.

Le premier groupe de marqueurs CSS contient des classes .s7size_large, .s7size_medium et .s7size_small. Elles sont appliquées en fonction de la zone d’exécution du conteneur de la visionneuse. Par exemple, si la zone de la visionneuse est égale ou supérieure à la taille d’un moniteur de bureau commun, utilisez .s7size_large. Si la zone est proche d’une tablette commune, attribuez-lui des .s7size_medium. Pour des zones similaires aux écrans de téléphone mobile, utilisez .s7size_small. L’objectif principal de ces marqueurs CSS est de créer différentes dispositions d’interface utilisateur pour différents écrans et tailles de visionneuse.

Le deuxième groupe de marqueurs CSS contient .s7mouseinput et .s7touchinput. Le marqueur CSS .s7touchinput est défini si l’appareil actuel est une entrée tactile. Dans le cas contraire, la .s7mouseinput est utilisée. Ces marqueurs sont principalement destinés à créer des éléments d’entrée de l’interface utilisateur avec différentes tailles d’écran pour différents types d’entrée, car normalement l’entrée tactile nécessite des éléments plus grands.

L’exemple de CSS suivant définit la taille du bouton de zoom avant sur 28 x 28 pixels sur les systèmes dotés d’une entrée de souris et sur 56 x 56 pixels sur les appareils d’entrée tactile. Si la visionneuse est encore plus petite, elle est définie sur 20 x 20 pixels.

.s7carouselviewer.s7mouseinput .s7imagemapeffect .s7icon {
    width:28px;
    height:28px;
}
.s7carouselviewer.s7touchinput .s7imagemapeffect .s7icon {
    width:56px;
    height:56px;
}
.s7carouselviewer.s7size_small .s7imagemapeffect .s7icon {
    width:20px;
    height:20px;
}

Pour cibler des appareils avec une densité de pixels différente, vous devez utiliser des requêtes multimédias CSS. Le bloc de requête de média suivant contiendrait un CSS spécifique aux écrans haute densité :

@media screen and (-webkit-min-device-pixel-ratio: 1.5)
{
}

L’utilisation des marqueurs CSS est le moyen le plus flexible de créer un CSS en responsive design, car il vous permet de cibler non seulement la taille d’écran de l’appareil, mais également la taille réelle de la visionneuse, ce qui s’avère utile pour les mises en page en responsive design.

Vous pouvez utiliser le fichier CSS de visionneuse par défaut comme exemple d’approche de marqueurs CSS.

Requêtes multimédias CSS

Vous pouvez également effectuer une détection d’appareil à l’aide de requêtes multimédias CSS pures. Tous les éléments inclus dans un bloc de requête de média donné sont appliqués uniquement lorsqu’ils sont exécutés sur un appareil correspondant.

Lorsqu’elles sont appliquées aux visionneuses mobiles, les quatre requêtes de média CSS, définies dans votre CSS, dans l’ordre indiqué ci-dessous :

En utilisant une approche de requêtes de média, vous devez organiser le CSS avec la détection d’appareil comme suit :

Il n’est pas nécessaire de dupliquer l’intégralité du CSS de la visionneuse dans chaque requête de média. Seules les propriétés spécifiques à des appareils donnés sont redéfinies dans une requête de média.

Sprites CSS section-9b6d8d601cb441d08214dada7bb4eddc

De nombreux éléments de l’interface utilisateur de la visionneuse sont stylisés à l’aide d’illustrations bitmap et présentent plusieurs états visuels distincts. Un bon exemple est un bouton qui comporte normalement au moins trois états différents : up, over et down. Chaque état nécessite l’attribution de sa propre illustration bitmap.

Avec une approche classique du style, le CSS dispose d’une référence distincte au fichier image individuel sur le serveur pour chaque état de l’élément d’interface utilisateur. Voici un exemple de CSS pour la mise en forme d’un bouton de zoom avant :

.s7carouselviewer .s7imagemapeffect .s7icon {
background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_up_touch.png);
}
.s7carouselviewer .s7imagemapeffect .s7icon:hover {
background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_over_touch.png);
}

L’inconvénient de cette approche est que l’utilisateur final fait face à un scintillement ou à un retard de réponse de l’interface utilisateur lors de la première interaction avec l’élément. Cette action se produit, car l’illustration de l’image du nouvel état de l’élément n’a pas encore été téléchargée. En outre, cette approche peut avoir un léger impact négatif sur les performances en raison d’une augmentation du nombre d’appels HTTP au serveur.

CSS sprites est une approche différente où l’illustration d’image pour tous les états d’élément est combinée dans un seul fichier PNG appelé « sprite ». Ce « sprite » possède tous les états visuels pour l’élément donné positionnés les uns à la suite des autres. Lors de la mise en forme d’un élément de l’interface utilisateur avec des sprites, la même image sprite est référencée pour tous les différents états dans le CSS. En outre, la propriété background-position est utilisée pour chaque état afin de spécifier quelle partie de l’image « sprite » est utilisée. Vous pouvez structurer une image « sprite » de n’importe quelle manière appropriée. Les visionneuses l’ont normalement empilé verticalement.

Voici un exemple basé sur « sprite » de mise en forme de la même icône de zone réactive :

.s7carouselviewer .s7imagemapeffect .s7icon {
background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_up_touch.png);
background-position: -0px -56px; width: 56px; height: 56px;
}
.s7carouselviewer .s7imagemapeffect .s7icon:hover {
background-position: -0px -0px; width: 56px; height: 56px;
}

Notes et conseils généraux sur le style section-95855dccbbc444e79970f1aaa3260b7b

Éléments courants de l’interface utilisateur section-d6330c9be8c444aa9b2a07886e3dbc2a

Voici la documentation de référence sur les éléments de l’interface utilisateur qui s’applique à la visionneuse d’images vidéo :