Galerie : Remplacer "BBCode de la Photo :" par "URL de la Photo:" dans les informations

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Galerie : Remplacer "BBCode de la Photo :" par "URL de la Photo:" dans les informations

Message par Rasa Mer 14 Mar 2018, 19:10

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://crysalis.frbb.net/

Description du problème

Bonjour,
J'ai pas mal chercheé sur le net et ce forum avant de poster ici,
mais vu que je n'y connait absolument rien en code j'suis un peu perdu.

J'ai fait une galerie pour élargir un peu le nombre d'avatar disponible pour les menbres.
Je voudrai donc ajouter un champ avec l'url de la photo à la place du BBcode de la photo.

Galerie : Remplacer "BBCode de la Photo :" par "URL de la Photo:" dans les informations Bbcode10

J'ai trouvé l'emplacement du code dans Template > Galerie > album_showpage_body :

Code:
<form name="select_all1" action="#">
 <dl>
 <dt><label>{L_PIC_BBCODE} {L_PICTURE} :</label></dt>
 <dd><input name="BBCode" class="inputbox" value="{PIC_BBCODE1}" type="text" readonly="readonly" onclick="javascript:this.form.BBCode.focus();this.form.BBCode.select();" /> <input type="button" name="btn_bb" value="{L_COPY}" class="button2" onclick="javascript:this.form.BBCode.focus();this.form.BBCode.select();copy_to_clip(this.form.BBCode.value);" /></dd>
 </dl>
 </form>

Je voudrai pouvoir afficher uniquement l'url de l'image dans un champ similaire.

Merci.

Rasa
_______

Résolu !

J'ai enfin fini par trouver une solution après de longues heures d'essais et d'erreurs.
Je vais donc poster ici ma solution pour ce problème au cas ou certain seraient intéressés.

J'ai commencé par chercher à remplacer value="{PIC_BBCODE1}" par un code qui me donnerai l'url
J'ai fini par trouvé une page sur github avec une liste des codes pour "album_showpage_body" :
Liens vers > github : album_showpage_body
Après quelques essais je suis tombé sur {U_PIC}, et parfait, ça marche, l'url de l'image s'affiche.

Les problèmes suivant étaient de trouver comment remplacer les scripts pour "SelectAll" et "CopyToClipboard".
J'ai donc commencé par chercher un script pour le "CopyToClipboard" et j'ai trouvé ma solution sur :
Liens vers > w3schools : howto_js_copy_clipboard
Pour le "SelectAll" du champ de texte dans lequel se trouve l'adresse de l'image j'ai trouvé ma solution ici :
Liens vers > javascript-array : onclick_select_all_text_in_field

A partir de là j'ai passé beaucoup de temps à essayer (bidouiller) différentes solutions pour intégrer tout ça.
Je vous donne donc ici le code final qui fonctionne (à priori) pour cette box url.


Dans </> Template > Galerie > album_showpage_body :
Code:
<fieldset>
 <input name="u" class="inputbox" value="{U_PIC}" type="text" readonly="readonly" id="txtfld" onClick="SelectAll('txtfld');" /><div class="tooltip">
 <input type="button" name="copy_to_clip" value="{L_COPY}" class="button5" onClick="myFunction()" onmouseout="outFunc()" />
 <span class="tooltiptext" id="myTooltip">Copier l'adresse</span></div>
 </fieldset>

Pour les JavaScript je les ai également ajouter à album_showpage_body.
(je n'sais pas si j'ai fait proprement ou pas mais ça fonctionne très bien)

Pour le "SellectAll" :
Code:
function SelectAll(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}

Pour le "CopyToClipboard" :
Code:
function myFunction() {
  var copyText = document.getElementById("txtfld");
  copyText.select();
  document.execCommand("Copy");
  
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copié";
}

function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copier l'adresse";
}

Je vous donne également le CSS pour l'InputBox, le bouton Copier et le ToolTip :
Code:
input#txtfld {
    height: 16px;
    width: 50%;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #ffffff;
    background-color: #1b2224;
    vertical-align: middle;
    font-family: sans-serif;
}

.button5 {
    margin-left: 15px;
    width: 80px;
    height: 24px;
    vertical-align: middle;
    border-radius: 10px;
    border: 1px solid black;
    font-family: sans-serif;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #fff;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Voici le résultat final :
Galerie : Remplacer "BBCode de la Photo :" par "URL de la Photo:" dans les informations Bbcode11

En espérant que certains d'entre vous trouverons ce post utile.

Merci et bonne journée.
Rasa

Rasa
Nouveau membre

Masculin
Messages : 1
Inscrit(e) le : 26/10/2016

http://crysalis.frbb.net/
Rasa a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum