Procédure pas à pas : création d’une page d’accueil et d’un XSL Composant WebPart Contenu par requête personnalisés
Dernière modification : lundi 19 avril 2010
S’applique à : SharePoint Server 2010
Dans cet article
Faire flotter des vidéos
Création d’une image par défaut pour les vidéos qui n’ont pas d’image miniature
Ajouter un élément description à ItemStyle.xsl
Ajout d’un affichage de notation à ItemStyle.xsl
Cette rubrique est la quatrième et avant-dernière partie d’une série de procédures pas à pas dont l’objectif est de vous apprendre à créer et à personnaliser un site de partage de vidéos.
Après avoir effectué les tâches décrites dans la Procédure pas à pas : Création d’un site vidéo et la Procédure pas à pas : Personnaslisation de l’expérience de téléchargement de vidéo, vous pouvez créer une page d’accueil personnalisée et un XSL Composant WebPart Contenu par requête personnalisé, chacun conçu pour partager, afficher et gérer des vidéos.
La création de la page d’accueil et du XSL Composant WebPart Contenu par requête implique les quatre tâches suivantes :
Utiliser une définition de substitution CSS pour faire flotter les éléments affichés par l’objet ContentByQueryWebPart
Créer un nouveau style d’élément pour l’objet ContentByQueryWebPart
Créer une image par défaut pour les vidéos qui n’ont pas d’image miniature
Ajouter un affichage de notation au style d’élément
L’ajout d’un ou de plusieurs composants WebPart Contenu par requête à la page d’accueil est une étape essentielle pour concevoir un site qui maximise les options disponibles pour le tri et l’affichage de vidéos. Le composant WebPart Contenu par requête affiche une liste dynamique de vidéos ; vous pouvez choisir, par exemple, de mettre en évidence les vidéos les plus récemment téléchargées ou celles qui sont les mieux classées. Cette procédure pas à pas vous montre comment créer un style personnalisé pour le composant WebPart Contenu par requête qui est optimisé pour l’affichage de vidéos dans un format privilégiant les éléments visuels, tels que l’affichage d’images miniatures de grande taille, l’organisation de plusieurs vidéos par ligne dans une disposition flottante et l’affichage de notations.
Outre la personnalisation de l’aspect du site, vous pouvez diriger les utilisateurs vers un formulaire d’affichage personnalisé (créé dans Procédure pas à pas : Création d’un site vidéo) lorsque l’utilisateur clique sur un résultat vidéo. Au lieu de restituer un objet MediaWebPart, utilisez le formulaire d’affichage personnalisé pour lire le fichier vidéo directement ; il s’agit de l’action de défaut qui est déclenchée lorsque l’utilisateur clique sur un résultat vidéo.
Conditions requises
Effectuez les tâches décrites dans la Procédure pas à pas : Création d’un site vidéo et la Procédure pas à pas : Personnaslisation de l’expérience de téléchargement de vidéo.
Pour créer un nouveau style pour le composant WebPart Contenu par requête
Démarrez Microsoft SharePoint Designer 2010. Dans le menu Fichier, cliquez sur Ouvrir.
Accédez au dossier /Bibliothèque de styles/Feuilles de style XSL, puis ouvrez le fichier ItemStyle.xsl.
Procédez à l’extraction du fichier pour le modifier, ce qui vous permettra d’annuler les modifications en cas de besoin.
Copiez l’élément XSL:Template et tout son contenu ImageTopCentered en tant que nouveau modèle dans le fichier. Ceci est nécessaire, car le ItemStyle ressemble au style ImageTopCentered existant.
Modifiez les valeurs de l’attribut name et de l’attribut match de manière à ce qu’ils correspondent à la valeur du nouveau nom de style. Par exemple, pour affecter à l’attribut name la valeur ContosoWithRatings, mettez à jour la balise XSL:Template comme indiqué.
<xsl:template name="ContosoWithRatings" match="Row[@Style='ContosoWithRatings']" mode="itemstyle">Enregistrez le fichier ItemStyle.xsl mis à jour.
Vérifiez que le style est disponible en affichant le volet Propriétés du composant WebPart de n’importe quel composant WebPart Contenu par requête.
Ajoutez l’attribut de style suivant à la première balise <div> dans le style.
<div class="item centered" style="float:left;padding-left:20px;padding-right:20px; width:160px; height:240px; margin-left:auto; margin-right:auto">
Le fait d’ajouter l’attribut float et ses paramètres au style item centered a pour effet de centrer toutes les données de chaque élément. Attribuez aux valeurs de pixel dans le code le nombre exact de pixels que vous voulez.
Faire flotter des vidéos
Vous pouvez créer une définition de dépassement CSS personnalisée pour faire flotter les éléments retournés par des objets ContentByQueryWebPart. Après avoir écrit le code, appliquez-le à chaque disposition de page où le CQWP est utilisé, et non au XSL lui-même : le fait de modifier le XSL affecte tous les styles du composant WebPart Contenu par requête, et pas seulement les dispositions de page qui s’appliquent lorsque le composant WebPart Contenu par requête conçu pour la vidéo est utilisé.
Cette définition ajoute un attribut float au style dfwp-item que le composant WebPart Contenu par requête applique à chaque élément qui est affiché.
<style type=”text/css”>
.dfwp-item
{
float:left;
}
</style>
Création d’une image par défaut pour les vidéos qui n’ont pas d’image miniature
Par défaut, le style créé pour le composant WebPart Contenu par requête définit une URL d’image d’aperçu valide pour chaque image. Toute image qui n’a pas d’URL d’image d’aperçu valide n’est pas restituée correctement. Ajoutez une logique au nouveau modèle pour que la page affiche l’image vidéo par défaut qui est disponible par défaut dans SharePoint Server 2010 si aucune URL d’image d’aperçu n’existe.
Notes
Voici l’emplacement par défaut de l’image vidéo par défaut : http://<server>/_layouts/images/VideoPreview.png
Dans la feuille de style, enveloppez la balise <img> existante avec une instruction <xsl:choose>. L’instruction <xsl:choose> suit le comportement par défaut de SharePoint Server 2010 lorsqu’une URL d’image d’aperçu est présente ; sinon, l’image par défaut est utilisée.
<xsl:choose>
<xsl:when test="string-length($SafeImageUrl) != 0">
<img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}"height="120" width="160"/>
</xsl:when>
<xsl:otherwise>
<img class="image" src="http://<server>/_layouts/images/VideoPreview.png" alt="{@ImageUrlAltText}" height="120" width="160"/>
</xsl:otherwise>
</xsl:choose>
Ajouter un élément description à ItemStyle.xsl
Ajoutez un élément description au style en ajoutant des balises au style sous la balise <div>link-item. La balise <div>link-item et la balise <div>description du style Default dans le fichier ItemStyle.xsl se comportent de manière quasiment identique. La balise <div>description est affichée dans un petit emplacement à l’écran, ce qui a pour effet de couper la chaîne après 128 caractères. Le fait de couper la chaîne empêche le rendu en ligne de longues descriptions.
<div class="description">
<xsl:if test="string-length(@Description) > 128">
<xsl:value-of select="concat(substring(@Description,1,128),'…')" />
</xsl:if>
<xsl:if test="string-length(@Description) < 128">
<xsl:value-of select="@Description"/>
</xsl:if>
</div>
Ajout d’un affichage de notation à ItemStyle.xsl
Si vous ajoutez la personnalisation de notations au site de vidéos, l’affichage de notation permet l’affichage de notations pour chaque vidéo. L’ajout de l’élément rating au fichier ItemStyle.xsl revient à ajouter le style description. Pour afficher la notation avec une plage de 0 à 5 étoiles, téléchargez un fichier image pour chaque valeur (soit six fichiers en tout) sur le serveur. Chaque fichier doit afficher un nombre différent d’étoiles. Après avoir téléchargé les images, ajoutez la logique pour afficher l’image appropriée selon la valeur dans le champ rating. Nous vous recommandons de créer un nouveau dossier dans la Bibliothèque de styles du site à cette fin. L’exemple de code suppose que toutes les images ont été téléchargées dans un dossier nommé /Style Library/Rating CBQ Images et que les fichiers sont nommés 0Stars.png, 1Stars.png, 2Stars.png, etc. Si vous utilisez des noms différents, mettez à jour les balises en conséquence. Dans les URL, remplacez <server> par le nom de votre serveur
<div>
<span id = "rating" style = "vertical-align:top">
<xsl:choose>
<xsl:when test = "@Rating >= 5">
<img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/5stars.png"></img>
</xsl:when>
<xsl:when test = "@Rating >= 4">
<img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/4stars.png"></img>
</xsl:when>
<xsl:when test = "@Rating >= 3">
<img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/3stars.png"></img>
</xsl:when>
<xsl:when test = "@Rating >= 2">
<img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/2stars.png"></img>
</xsl:when>
<xsl:when test = "@Rating >= 1">
<img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/1stars.png"></img>
</xsl:when>
<xsl:when test = "@Rating >= 0">
<img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/0stars.png"></img>
</xsl:when>
<xsl:otherwise>
<img src = "http://<server>/Style%20Library/Rating%20CBQ%20Images/0stars.png"></img>
</xsl:otherwise>
</xsl:choose>
</span>
</div>
Étapes suivantes
Effectuez la Procédure pas à pas : création et personnalisation d’une page de canal.
Voir aussi
Concepts
Procédure pas à pas : Création et personnalisation d’un site de partage de vidéos