Vue liste de contacts d'une catégorie et image associée

[juanalan]

Bonsoir,

Deux questions plus ou moins techniques concernant l'affichage de l'image associée à un contact dans une vue non pas détail mais liste :
1) Peut-on ajouter un paramètre dans la partie administration afin de décider si oui ou non on peut afficher l'image associée au contact dans cette vue ? et si oui comment ?
2) A défaut ou en complément, peut-on intervenir en aval dans cette vue spécifique pour rémédier ? Et si oui, code php vraisemblablement, mais où ? et lequel ?

Si vous avez déjà procédé à cette modif ou simili, je suis preneur de toutes les pistes.
Par avance merci

JA
----------
Joomla 3.2.1

[Rajoz]

Re : Vue liste de contacts d'une catégorie et image associée

Bonjour Juanalan,

Pour afficher dans une liste des contacts d'une catégorie les images des contacts avec la possibilité de choisir de les afficher ou pas, il faut faire une surcharge du fichier PHP affichant les contacts de la liste et ajouter un peu de code CSS.

Pour comprendre ce qu'est une surcharge lire http://kiwik.net/joomla/25/trucs-ast...charges-joomla

Si le template est Protostar, il faut créer le répertoire templates/protostar/html/com_contact/category et y copier les fichiers default.php, default_children.php et default_items.php venant du répertoire components/com_contact/views/category/tmpl/

Note : Plutôt que de faire les modifications dans le template Protostar avec le risque qu'elles soient écrasées à la prochaine mise à jour il est prudent de faire une copie du template (Extensions > Gestion des templates > Templates > Protostar Détails et fichiers > Copier le template) et de travailler avec le nouveau template.

Ensuite il faut modifier le default_items.php copié dans le template en y ajoutant la ligne marquée en rouge (aux environs de la ligne 69) :

<div class="list-title">
    <a href="<?php echo JRoute::_(ContactHelperRoute::getContactRoute($item->slug, $item->catid)); ?>">
        [COLOR=#ff0000]<img class="contact-catlist" src="<?php echo $item->image; ?>">[/COLOR]
        <?php echo $item->name;?></a>

J'ai mis dans cette ligne une classe que j'ai appelée "contact-catlist" pour permettre d'adapter via CSS le style de l'image (taille, bordure, marge, etc.). Par exemple pour avoir une image de largeur 60 pixels dans la liste il suffira d'ajouter à la fin du fichier templates/protostar/css/template.css ce petit code :

img.contact-catlist { width: 60px; }

Pour aller plus loin, on peut aussi utiliser cette classe "contact-catlist" et un paramètre du lien de menu pour définir si le lien de menu doit afficher ou pas l'image :

1) D'abord remplacer le code précédent à la fin de template.css par :

img.contact-catlist { width: 60px; display: none; }
.catlist-img a img.contact-catlist { display: inherit; }

2) Avec ce CSS, pour afficher les images il faut mettre dans le lien de menu à Paramètres d'affichage de la page > Classe de page la classe " catlist-img" (attention à l'espace devant). Pour ne pas afficher les images, il suffit de laisser ce paramètre sans valeur.

Note : s'il s'agit d'un autre template, comme par exemple beez3, le répertoire html/com_contact/category et le fichier default_items.php existent peut-être déjà. Dans ce cas il s'agira de modifier les fichiers existants et la modification dépendra du template.

Amicalement,
Rajoz

[lefabdu51]

Re : Vue liste de contacts d'une catégorie et image associée

vu que l image ne concerne que certains contacts, il faut une boucle conditionnelle entourant la ligne en rouge.
sinon excelente reponse, elle serat utile a beaucoup.
n etant pas sur mon pc, je n ais pas acces a mon environnement de test donc je ne peut fournir de code.

pour ajouter un parameter, voir le fichier xml associe au module.

[Robert.Pcn]

Re : Vue liste de contacts d'une catégorie et image associée

Bonjour,

Tout d'abords merci pour le post car c'est exactement ce que je cherchais.
Ensuite, je débute en Php et dans l'environnement Joomla, donc veuillez m'excuser si la question qui suit pouvait paraitre "simpliste".

Jusqu'à cette explication, tout fonctionne...
Maintenant, comme l'image et/ou son affichage sont conditionnels, j'ai décidé d'y ajouter un simple "If", ce qui me donne:

<?php if ($this->params->get('show_image')) : ?>
<img class="contact-list-img" src="<?php echo $item->image; ?>">
<?php else : ?>
<img class="contact-list-img" src="/images/MembresPhotos/Person_default.jpg" alt="Image de contact"/>
<?php endif; ?>

Pour la première condition, l'image s'affiche et pas de pb. Mais pour la deuxième condition, aucune image !!
Et lorsque je regarde dans le code généré via mon browser l'url correspondant à src est "/" seulement ???

Ce que je ne comprends pas, c'est que j'ai ajouté ces mêmes lignes à "/templates/montemplate/html/com_contact/contact/default.php", et cela ne pose aucun problème.

Pour info, le code Css pour la classe "contact-list-img":
img.contact-list-img
{
max-width:72px;
height:auto;
}

Merci par avance,

Robert

[Rajoz]

Re : Vue liste de contacts d'une catégorie et image associée

Bonjour,

@ lefabdu51,
J'avais choisi de présenter un "paramétrage" via css plutôt que par xml parce que je n'aime pas trop modifier les fichiers du core de Joomla! (risque qu'ils soient écrasés à la mise à jour suivante). Comme il s'agit du composant contact il faut modifier deux xml. Je mets le code ici pour ceux qui seraient plutôt intéressés par cette solution.

@ Robert.Pcn,
Le "if" ne marche pas parce que le paramètre "show_image" est prévu pour l'affichage d'une fiche de contact, il n'existe pas pour l'affichage en liste. Pour le lien vers l'image il ne faut pas mettre le / devant images. Je retiens pour le code ci-après la bonne idée de mettre une image par défaut quand le contact n'a pas d'image.

Note : J'ai réutilisé des clés de langue existantes du composant contact pour faciliter l'intégration dans un site multilingue.

1) Ajout du paramètre "Image" dans l'onglet "Listes" des paramètres globaux du composant contact.
Dans le fichier administrator/components/com_contact/config.xml, ajouter le code en rouge aux environs de la ligne 567 :

<field name="show_headings" type="radio"
    default="1"
    class="btn-group btn-group-yesno"
    description="JGLOBAL_SHOW_HEADINGS_DESC"
    label="JGLOBAL_SHOW_HEADINGS_LABEL"
>
    <option value="1">JSHOW</option>
    <option value="0">JHIDE</option>
</field>

[COLOR=#ff0000]<field name="show_image_headings" type="radio"[/COLOR]
[COLOR=#ff0000]    default="1"[/COLOR]
[COLOR=#ff0000]    class="btn-group btn-group-yesno"[/COLOR]
[COLOR=#ff0000]    description="COM_CONTACT_FIELD_PARAMS_SHOW_IMAGE_LABEL"[/COLOR]
[COLOR=#ff0000]    label="COM_CONTACT_FIELD_PARAMS_SHOW_IMAGE_LABEL"[/COLOR]
[COLOR=#ff0000]>[/COLOR]
[COLOR=#ff0000]    <option value="1">JSHOW</option>[/COLOR]
[COLOR=#ff0000]    <option value="0">JHIDE</option>[/COLOR]
[COLOR=#ff0000]</field>[/COLOR]

<field name="show_position_headings" type="radio"

2) Ajout du paramètre "Image" dans l'onglet "Listes" des paramètres du lien de menu.
Dans le fichier components/com_contact/views/category/tmpl/default.xml, ajouter le code en rouge aux environs de la ligne 142 :

<field name="show_headings" type="list"
    description="JGLOBAL_SHOW_HEADINGS_DESC"
    label="JGLOBAL_SHOW_HEADINGS_LABEL"
>
    <option value="">JGLOBAL_USE_GLOBAL</option>
    <option value="0">JHIDE</option>
    <option value="1">JSHOW</option>
</field>

[COLOR=#ff0000]<field name="show_image_headings" type="list"[/COLOR]
[COLOR=#ff0000]    description="COM_CONTACT_FIELD_PARAMS_SHOW_IMAGE_LABEL"[/COLOR]
[COLOR=#ff0000]    label="COM_CONTACT_FIELD_PARAMS_SHOW_IMAGE_LABEL"[/COLOR]
[COLOR=#ff0000]>[/COLOR]
[COLOR=#ff0000]    <option value="">JGLOBAL_USE_GLOBAL</option>[/COLOR]
[COLOR=#ff0000]    <option value="0">JHIDE</option>[/COLOR]
[COLOR=#ff0000]    <option value="1">JSHOW</option>[/COLOR]
[COLOR=#ff0000]</field>[/COLOR]

<field name="show_position_headings" type="list"

3) Ajout des deux tests sur paramètre "show_image_headings" et sur présence ou pas d'une image.
Dans le fichier templates/nom_template/html/com_contact/category/default_items.php, ajouter le code en rouge aux environs de la ligne 69 :

<div class="list-title">
    <a href="<?php echo JRoute::_(ContactHelperRoute::getContactRoute($item->slug, $item->catid)); ?>">
        [COLOR=#ff0000]<?php if ($this->params->get('show_image_headings')) : ?>[/COLOR]
[COLOR=#ff0000]            <?php if (!empty($item->image)) : ?>[/COLOR]
[COLOR=#ff0000]                <img class="contact-list-img" src="<?php echo $item->image;?>" alt="<?php echo JText::_('COM_CONTACT_IMAGE_DETAILS');?>" >[/COLOR]
[COLOR=#ff0000]            <?php else : ?>[/COLOR]
[COLOR=#ff0000]                <img class="contact-list-img" src="images/contact-default.jpg" alt="<?php echo JText::_('COM_CONTACT_IMAGE_DETAILS');?>" >[/COLOR]
[COLOR=#ff0000]            <?php endif; ?>[/COLOR]
[COLOR=#ff0000]        <?php endif; ?>[/COLOR]
        <?php echo $item->name;?></a>

4) Code css à la fin de template.css pour le style des images. C'est celui de Robert.Pcn avec la classe contact-list-img. On peut bien sûr y ajouter tout autre style (bordure, marge, ombre, arrondi, etc.) :

img.contact-list-img {
    max-width: 72px;
    height: auto;
}

Amicalement,
Rajoz

[lefabdu51]

Re : Vue liste de contacts d'une catégorie et image associée

if (($this->contact->id) == '[id du contact N°1 qui doit avoir l image affichée]') || (($this->contact->id) == '[id du contact N°2 qui doit avoir l image affichée]') || (($this->contact->id) == '[id du contact N°3 qui doit avoir l image affichée]') {

// affichage de l image

}

C est a une boucle de ce style que je pensait. Pas besoin de modifier un fichier du noyau pour ca...
Une mise en page alternative est suffisante.
Tu cible les contacts qui doivent avoir leur image.
Parceque si j ai bien lu sa premiere question, cela ne devait concerner que certains contacts, et non tous...
D ou la remarque que j ai faite.

[Robert.Pcn]

Re : Vue liste de contacts d'une catégorie et image associée

Bonjour,

Et bien merci @Rajoz

Impeccable cela fonctionne. Pour moi c'est bien ce que je voulais, je ne voulais pas "cibler" des contacts, mais bien tous les contacts.

Grand merci !

Robert

[juanalan]

Re : Vue liste de contacts d'une catégorie et image associée

Bonsoir,

Je vous remercie de vos retours et m'en vais de ce pas tester et vous faire un retour.

JA