Manuel d'intégration graphique v1.3.0, v1.4.0

Le plugin Annuaire de liens fournit un input data, permettant d'insérer les liens d'une ou plusieurs thématiques sur l'ensemble ou partie des pages du site.

Activation

Pour activer cet input data et définir son contenu, vous devez créer dans votre charte graphique, un fichier XML skins/[NOM_SKIN]/conf/link-themes.xml, qui contient pour chaque gabarit, les thématiques de liens à afficher :

<link-themes>
    <themes templates="index,page" configurable="true">
        <theme id="OUTILS"/>
    </themes>
	<themes templates="news" configurable="false">
        <theme id="ACTU"/>
		<theme id="OUTILS"/>
    </themes>
</link-themes>
  • L'attribut template contient le ou les gabarits affectés par cet input data, séparés par des virgules.
  • L'attribut configurable détermine si une personnalisation des liens par un utilisateur connecté est autorisée (true ou false)
  • Les balises <theme> permet de choisir quels liens (de quelle thématique seront affichés). Si aucune balise <theme> n'est présente, tous les liens seront affichable.

Données XML fournies

Le format de l'input data est le suivant:

<cms>
  <inputData>
    <linkDirectory applicable="true" configurable="true">
      <links>
        <link id="directoryLink://3e1d509b-7e3d-4ec4-98d5-e70e268e78d5" url="http://www.ametys.org/forum/" title="Forum" content="" alternative="Forum Ametys" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="chat.png" pictureSize="4497" imageType="metadata" grantAnyUser="false" limitedAccess="false">
          <themes>Outils</themes>
        </link>
        <link id="directoryLink://c9921cec-fa6e-46c9-a256-a7a800bcc1c3" url="https://www.google.com/contacts" title="Annuaire" content="" alternative="Annuaire" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="user.png" pictureSize="1868" imageType="metadata" grantAnyUser="true" limitedAccess="true">
          <themes>Outils</themes>
        </link>
        <link id="directoryLink://df2badfb-3e09-4a78-a74a-00b064d9ea38" url="https://fr-fr.facebook.com/AmetysCMS" title="Facebook" content="" alternative="Facebook" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="facebook.png" pictureSize="2809" imageType="metadata" grantAnyUser="false" limitedAccess="false">
          <themes>Outils</themes>
        </link>
        <link id="directoryLink://1a48f614-ba61-4cd5-b53f-fd06b924e80c" url="https://twitter.com/ametyscms" title="Twitter" content="" alternative="Twitter" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="twitter_black.jpg" pictureSize="5140" imageType="metadata" grantAnyUser="false" limitedAccess="false">
          <themes>Outils</themes>
        </link>
        <link id="directoryLink://edaa125f-80e3-425c-a2e7-f2aa5a013fe3" url="https://www.google.com/calendar" title="Agenda" content="" alternative="Agenda" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="agenda.png" pictureSize="4200" imageType="metadata" grantAnyUser="true" limitedAccess="true">
          <themes>Outils</themes>
        </link>
        <link id="directoryLink://d2c855a0-f815-4d6a-922f-c4b6d018acf4" url="http://www.google.fr" title="Google" content="" alternative="Google" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="google.png" pictureSize="7387" imageType="metadata" grantAnyUser="false" limitedAccess="false">
          <themes>Outils</themes>
        </link>
        <link id="directoryLink://3d9d910f-3a2e-4fdd-8155-5452252a011c" url="https://wiki.ametys.org/display/AMETYSFR/Documentation+du+CMS+Ametys" title="Wiki" content="" alternative="Wiki Ametys" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="wiki.png" pictureSize="7008" imageType="metadata" grantAnyUser="false" limitedAccess="false">
          <themes>Outils</themes>
        </link>
        <link id="directoryLink://54fe2ee1-f43f-42e5-8eda-aa4e5daaf1eb" url="https://fr.news.yahoo.com/" title="Yahoo" content="" alternative="Yahoo Actualités" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="yahoob.png" pictureSize="19406" imageType="metadata" grantAnyUser="false" limitedAccess="false">
          <themes>Outils</themes>
        </link>
        <link id="directoryLink://0485c278-9dcf-4880-966d-c2249b3ba946" url="http://www.lemonde.fr/rss/" title="Fils RSS" content="" alternative="Fils RSS - LeMonde.fr" pictureAlternative="" user-selected="false" pictureType="external" picturePath="picture" pictureName="rssb.png" pictureSize="5933" imageType="metadata" grantAnyUser="false" limitedAccess="false">
          <themes>Outils</themes>
        </link>
      </links>
    </linkDirectory>
  </inputData>
</cms>

Exemple d'utilisation dans la charte graphique

Le plugin Annuaire de liens fournit des helpers XSLT qui peuvent être utilisés dans la charte graphique. Pour cela il vous suffit d'importer le fichier pages/services/directory/utils/inputdata_utils.xsl du plugin est d'appeler les templates à l'endroit souhaité:

 

Nom du templateFonctionParamètres
display-configure-links-btn-inputdataInsère un lien "Personnaliser" pour configurer l'ordre d'affichage des liens.
Le lien est présent uniquement si les liens sont configurables.
Fournit une boite de dialogue javascript dans laquelle l'utilisateur pourra sélectionner
les liens qu'il souhaite voir en premier
  • maxCheckedLinks : Nombre maximun de liens sélectionnable par l'utilisateur
links-thumbnails-input-dataAffiche les liens de l'input data sous forme de vignettes

  • moreThreshold: Nombre maximum de liens visibles par défaut

  • height: largeur maximun des vignettes
  • width: largeur maximum des vignettes

 

 

<xsl:import href="plugin:link-directory://pages/services/directory/utils/inputdata_utils.xsl"/>

<xsl:template name="template">
	<-- // ... ->

	<xsl:if test="/cms/inputData/linkDirectory/@applicable = 'true'">
		<div class="block">
			<div class="header">
				<!-- Button pour configurer l'affichage des liens -->
				<xsl:call-template name="display-configure-links-btn-inputdata">
					<xsl:with-param name="maxCheckedLinks" select="7"/>	
				</xsl:call-template>
				<i18n:text i18n:key="SKINS_LINKS_HEADER" i18n:catalogue="skin.{$skin}"/>
			</div>
			<div class="body">
				<xsl:call-template name="links-thumbnails-inputdata">
             	    <xsl:with-param name="moreThreshold" select="8"/>
             	    <xsl:with-param name="height" select="50"/>
               		<xsl:with-param name="width" select="50"/>
           		</xsl:call-template>
			</div>
		</div>
	</xsl:if>

</xsl:template>

Pour aller plus loin
Pour pouvez personnaliser entièrement l'affichage des liens en surchargeant les templates XSLT fournit par le plugin.
Regardez aux fichier XSL du répertoire http://viewvc.ametys.org/viewvc/tags/1.1.0/plugins/link-directory/trunk/main/plugin-link-directory/pages/services/directory/utils/ et surchargez le ou les templates nécessaires.
Par exemple, si vous souhaitez remplacer le lien "Personnaliser" par une image, il vous faudra surcharger le template "configure-links-btn"

<xsl:template name="configure-links-btn">
	<xsl:param name="buttonId"/>

	<xsl:choose>
    	<xsl:when test="$rendering-context = 'front' and ametys:user()">
        	document.writeln("&lt;a id=\"configure-links-hyperlink-<xsl:value-of select="$buttonId"/>-disabled\" class=\"configure-links-service-button\" title=\"<i18n:text i18n:key="SKIN_LINKDIRECTORY_CONFIGURE_THUMBNAILS_TITLE_BO" i18n:catalogue="skin.{$skin}"/>\" i18n:attr=\"title\"&gt;");
			document.writeln("&lt;img alt=\"<i18n:text i18n:key="PLUGINS_LINKDIRECTORY_CONFIGURE_THUMBNAILS" i18n:catalogue="plugin.link-directory"/>\" src=\"<xsl:value-of select="ametys:skinImageURL('img/config;png', 20, 20)\"/&gt;");
			document.writeln("&lt;/a&gt;");
		</xsl:when>
       	<xsl:otherwise>
            <!-- NO FO user connected: the button is not displayed -->
        </xsl:otherwise>
    </xsl:choose>
</xsl:template>