Liste de choix avec image

[Agrepe]

Bonjour,
Dans un fichier PHP, j'ai besoin de créer une liste de choix (à choix unique) mais que les item soient des images. (Comme dans la capture écran jointe)
J'essaye avec un champ de type list mais je n'arrive pas au bon résultat. Je ne peux pas passer par un fichier XML, vu que je modifie un fichier existant.

Cela se passe dans un fichier "Easysocial"

<div class="mentions" >
                        <div data-mentions-overlay data-default="<?php echo $this->html('string.escape', $story->overlay); ?>"><?php echo $story->overlay; ?></div>
                        <textarea class="es-story-textfield" name="content" data-story-textField data-mentions-textarea
                        data-default="<?php echo $this->html('string.escape', $story->content); ?>"
                        data-initial="<?php echo ($story->overlay) ? JString::strlen($story->overlay): '0'; ?>"                                        
                        placeholder="<?php echo $nameUser; echo ", ";?><?php echo JText::_('COM_EASYSOCIAL_STORY_PLACEHOLDER'); ?>"><?php echo $story->content; ?></textarea>                    

                <!-- Boutons pour les liens des styles -->                    
                        <img src="/images/styles/rouge.png"/>
                        <img src="/images/styles/bleu.png"/>
                        <img src="/images/styles/coeur.png"/>
                <!-- ********************************************** -->
                </div>

L'idée est que les images contiennent un "value" que j'envoie ensuite dans une table de la base de données.

Quelqu'un aurait-il une idée ?

Cordialement.

Eric

[Agrepe]

Bonsoir,
Je tourne en rond depuis quelques jours pour mettre en oeuvre une idée:
Je souhaite utiliser une image pour sélectionner une valeur qui sera ensuite envoyé dans une base de données.

L'idée est de construire une liste de choix (qui sera horizontale) ou les items sont des images.
Comme on trouve par exemple sur Facebook pour choisir un style au post.

Je regarde du côté des différents types de champs utilisables, mais je ne trouve rien qui pourrait répondre à mon besoin.
Quelqu'un aurait-il une idée ?

Cordialement.

Eric

[lomart]

Bonsoir Eric,

Pour moi, il n'y a pas de champs sélecteur d'images. Il faut le programmer de A à Z. Peut-être en partant d'un champ existant. Voir https://docs.joomla.org/Creating_a_c..._field_type/fr

[Agrepe]

Bonsoir lomart,
Comment vas-tu ?
Merci beaucoup, je vais regarder cela.

Au départ je pensais utiliser une liste et afficher une image à la place du libellé de l'item dans le style :

<field name="style" type="list">
<option value="blue"><img src="/images/styles/bleu.png"></option>
<option value="red"><img src="/images/styles/red.png"></option>
</field>

Mais cela ne fonctionne pas.
Ensuite, il faut que j'utilise ce bouton pour envoyer dans la colonne "style" de ma table. Ce bouton enregistre déjà les info dans la table.

<button class="btn btn-es-primary btn-sm es-story-submit" data-story-submit type="button"><?php echo JText::_("COM_EASYSOCIAL_STORY_SHARE"); ?></button>

Cela me permet de styliser le contenu d'un area. blue et red sont des classes css que j'appelle ensuite dans le formatage du texte quand j'affiche ce texte.

Cordialement. Eric

[lomart]

Bonjour,

Essaie le champ "combo" https://docs.joomla.org/Combo_form_field_type/fr
Il peut afficher une image dans la liste, et ne retourne que le texte

On ne peut pas cliquer sur l'image mais uniquement le texte.
Il doit être possible de créer son propre type de champ à partir de celui-ci

[Wismer]

Pourquoi tu n'associerais pas un event javascript, ajax quand tu cliques sur l'image?

Voila une idee.

++
Wis

[lomart]

Merci de ne pas ouvrir une nouvelle discussion sur le même sujet. C'est très pénible à lire et à suivre

https://forum.joomla.fr/node/1972067

[SimonG]

Bonjour,

je viens de fusionner les messages.

[Agrepe]

Bonjour,
Voilà ce que j'ai fait et cela fonctionne si cela peut aider.
Effectivement j'ai trouvé une solution en JS comme l'a suggérer Wismer.

<input type="hidden" id="js-image-link-value" value="" />
        <img src="images/styles/bleu.png" class="js-image-link" data-value="blue" />
        <img src="images/styles/rouge.png" class="js-image-link" data-value="red" />

        <script>
          var imageLinkValue = document.getElementById('js-image-link-value');
          var imageLinks = document.querySelectorAll('.js-image-link');

          function onImageLinkClick() {
            imageLinkValue.value = this.getAttribute('data-value');
          }

          Array.prototype.forEach.call(imageLinks, function (imageLink) {
            imageLink.addEventListener('click', onImageLinkClick.bind(imageLink));
          });
        </script>

Et au cas ou un petit bout de CSS:

.js-image-link {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

Cordialement.

Eric

[lesoutier]

Merci de passer la discussion en [RÉGLÉ]