Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Astuces Forumactif

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB

Membres connectés récemment
Voir tous les membres

[PhpBB2] Changer le lien d'une image par une icone font awesone


2 participants

 :: Astuces Forumactif :: Les sujets résolus

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

Sujet résolu [PhpBB2] Changer le lien d'une image par une icone font awesone

1
fascicularia
fascicularia
https://altitudetropicale.forums-actifs.com/

Messagefascicularia Dim 18 Aoû 2019 - 23:11

  • Version du forum :
    PhpBB2
  • Templates modifiés :
    oui
  • Navigateur :
    Opera
  • Version du forum :
    PhpBB2
  • Templates modifiés :
    oui
  • Navigateur :
    Opera
Bonjour à tous,
j'ai ce js sur lequel il me faudrait changer l'image par une icone font awesone dans cette partie :

Code:
[url=https://altitudetropicale.forums-actifs.com"+e+"-quotealtitudetropicale#"+i+"][img]https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png[/img][/url]

L'image en question
https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png

Le js :

Code:
/* Citation avec ancre*/
$(function(){$("a[href*='&mode=quote']").on("click",function(t){t.preventDefault();var e=location.pathname.slice(0,location.pathname.indexOf("-")),i=$(this).attr("href").slice(8,$(this).attr("href").indexOf("&")),a=$(this).attr("href");$.get(a,function(t){quote_text_info=$("textarea",t).val(),$(".sceditor-container").find("textarea").sceditor("instance").val("[url=https://altitudetropicale.forums-actifs.com"+e+"-quotealtitudetropicale#"+i+"][img]https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png[/img][/url]"+quote_text_info+"\n"),$("html, body").animate({scrollTop:$(".sceditor-container").find("textarea").offset().top-100},500,function(){$(".sceditor-container").find("textarea").focus()})})}),$("a[href*='-quotealtitudetropicale#']").each(function(){$(this).prependTo($(this).next().find("cite:first"))})});

le code font awesone : \f024

Ce js permet de rajouter le lien d'un message citée sous cette forme

Code:
[url=https://altitudetropicale.forums-actifs.com/t4650-quotealtitudetropicale#38121][img]https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png[/img][/url][quote="grandan08"]Il est tout récent et dans un pot enterré,  il passera l'hiver au sous sol car il peut faire assez froid par ici...
D'ailleurs c'est quoi la limite basse pour le zébrina ?[/quote]

en direct

[PhpBB2] Changer le lien d'une image par une icone font awesone Flag_r10
grandan08 a écrit:Il est tout récent et dans un pot enterré,  il passera l'hiver au sous sol car il peut faire assez froid par ici...
D'ailleurs c'est quoi la limite basse pour le zébrina ?

Il suffit de cliquer sur le drapeau pour se rendre directement sur le message cité.

Vous auriez une idée de la manière de procéder ?

Merci par avance


Dernière édition par fascicularia le Dim 25 Aoû 2019 - 13:52, édité 1 fois

Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

2
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 19 Aoû 2019 - 8:10

Hello Stéphane,
tu peux tester ce script:
Code:
$(function(){
$('a[href*="&mode=quote"]').on('click',function(t){t.preventDefault();
var e=location.pathname.slice(0,location.pathname.indexOf("-")),i=$(this).attr("href").slice(8,$(this).attr("href").indexOf("&")),a=$(this).attr("href");
$.get(a,function(t){quote_text_info=$("textarea",t).val(),
$(".sceditor-container").find("textarea").sceditor("instance").val('<a class="M14_AncoR_PosT"href="https://altitudetropicale.forums-actifs.com'+e+'-quotealtitudetropicale#'+i+'"></a>\n'+quote_text_info+'\n'),$("html, body").animate({scrollTop:$(".sceditor-container").find("textarea").offset().top-100},500,function(){
$(".sceditor-container").find("textarea").focus()})})}),
$("a[href*='-quotealtitudetropicale#']").each(function(){
$(this).prependTo($(this).next().find("cite:first"))})});


J'ai purement remplacé le contenu du textarea:
Code:
.val("[url=https://altitudetropicale.forums-actifs.com"+e+"-quotealtitudetropicale#"+i+"][img]https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png[/img][/url]"+quote_text_info+"\n")


Par:
Code:
.val('<a class="M14_AncoR_PosT"href="https://altitudetropicale.forums-actifs.com'+e+'-quotealtitudetropicale#'+i+'"></a>\n'+quote_text_info+'\n')

On passe donc du Bbcode au html.
Tout ce changement afin d'avoir une class("M14_AncoR_PosT") .

Puis le style:

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajoutes ceci:

Code:

a.M14_AncoR_PosT:before
{content: "\f024";font-family: FontAwesome;}

Penses a cliquer sur le bouton [PhpBB2] Changer le lien d'une image par une icone font awesone Sans_t10




Ce qui suit est facultatif Stéphane:


Ensuite, tu peux utiliser cet autre script qui va rechercher l'image actuelle déjà présente sur tes messages:

[PhpBB2] Changer le lien d'une image par une icone font awesone Flag_r10

et va ajouter la même class à la balise a[href] et avec la css on masquera l'image pour laisser s'afficher l'icône de la bibliothèque Awesome .


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mets un titre explicite.
Coches Sur les sujets
Déposes ceci:
Code:

$(function(){
$('img[src="https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png"]').each(function(){
$(this).closest('a').addClass('M14_AncoR_PosT');});});

Penses a cliquer sur le bouton Valid

Et le style dans la feuille de style:
Code:
a.M14_AncoR_PosT img[src="https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png"]{display: none !important;}








Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

3
fascicularia
fascicularia
https://altitudetropicale.forums-actifs.com/

Messagefascicularia Lun 19 Aoû 2019 - 15:06

Bonjour Philippe, 
merci pour cette aide et pour avoir pensé à mettre en conformité l'ensemble des quotes avec le deuxième js.

Sur le premier js, tout fonctionne hormis l'affichage de l'icone.

Bizarrement, celle-ci s'affiche bien sur d'autres parties du forum mais le css n'a pas d'effet avec ce nouveau js

[PhpBB2] Changer le lien d'une image par une icone font awesone Milouz11

J'ai installé le css dans l'overall header en tout début de la feuille de style .

en code par contre, tout baigne :
Code:
<a class="M14_AncoR_PosT"href="https://altitudetropicale.forums-actifs.com/t2849-quotealtitudetropicale#26676"></a>
[quote="jeff"]Bonjour

[url=http://fern72.free.fr/growinglist/titre2.htm][color=#ff0000]LIEN[/color][/url]

ces listes ne prennent  en compte que les plantes qui me sont cheres  ( celles qui m'interessent vraiment )  , certaines sont tempérées  ,d'autres plus de climats tropicaux- subtropicaux -equatoriaux  , sous le ciel de la sarthe plutot en chambre de culture ou terrarium  et non en exterieur  sauf pour quelques unes en été.

bien sur j'ai un petit jardin exterieur  avec d'autres vegetaux + ou - rares  ( qui ne sont pas reportées dans ces listes)

si comme moi vous avez des plantes  hobby  qui deviennent  vos spécialités , n’hésitez pas a poster  vos listes . Peut être  trouverez vous , alors,  votre alter ego  pour des échanges .

 :dingo: 

NB: merci  aux administrateurs  pour cette nouvelle rubrique  qui j’espère vous servira .

jeff[/quote]

Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

4
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 19 Aoû 2019 - 18:35

Re Stéphane,
tu as bien déposé:
Code:
a.M14_AncoR_PosT:before
{content: "\f024";font-family: FontAwesome;}

si l'icône Awesome ne s'affiche pas, c'est que tu n'as pas installer la bibliothèque:

Si tu as un lien a me donner sur ton fofo, ce serait un plus pour le visuel.

https://forum.forumactif.com/t377879-comment-installer-et-utiliser-font-awesome-sur-son-forum#3187002
Suivre cette procédure:
Code:
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    {T_HEAD_STYLESHEET}


Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

5
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 19 Aoû 2019 - 19:01

Je reviens sur le non affichage:

sur ce message:
https://altitudetropicale.forums-actifs.com/t2849-listes-de-culture-de-jeff#38137
On voit bien le drapeau Stéphane:
[PhpBB2] Changer le lien d'une image par une icone font awesone 122

De plus, tu as un doublon de style:
Code:

a.M14_AncoR_PosT::before {
    content: "\f024";
    font-family: FontAwesome;
}
a.M14_AncoR_PosT::before {
    content: "\f024" !important;
    font-family: FontAwesome !important;
}



Celui-ci peut être supprimé:
Code:
a.M14_AncoR_PosT::before {
    content: "\f024" !important;
    font-family: FontAwesome !important;
}


Dernière édition par Milouze14 le Lun 19 Aoû 2019 - 19:07, édité 1 fois

Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

6
fascicularia
fascicularia
https://altitudetropicale.forums-actifs.com/

Messagefascicularia Lun 19 Aoû 2019 - 19:06

re Philippe,
strange sous opera j'ai un carré et même chose sous Chrome.

J'ai pourtant vidé mes caches par deux fois cet après midi.

Je refais un vidage au cas ou.

Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

7
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 19 Aoû 2019 - 19:11

Ahhh, ces navigateurs!!!!!!!!
Tu peux modifier ainsi le style:

Code:
a.M14_AncoR_PosT:before {
    content: "\f024";
    font-family: FontAwesome;
position: absolute;
margin: 0px 0px 0px -16px;
}

Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

8
fascicularia
fascicularia
https://altitudetropicale.forums-actifs.com/

Messagefascicularia Lun 19 Aoû 2019 - 19:38

Bonjour Philippe, 
le nouveau css fonctionne à la perfection.

Bizarrement les anciens quotes ne fonctionnent plus.

Hélas, je dois aller m'occuper du paternel. 

Si cela ne te dérange pas je me penche sur le soucis dés demain.

Merci encore pour cette aide et désolé de remettre la suite à plus tard.

Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

9
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 19 Aoû 2019 - 19:43

Ah merdouille,
pas de soucis Stéphane,en regardant ce message:
https://altitudetropicale.forums-actifs.com/t3631-mettre-une-image-derriere-les-videos-youtube#38043

Le drapeau donne ce code html:

Code:
<a href="https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png"><img src="https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png" alt="mettre une image derriére les vidéos youtube Flag_r10" class="" id="M14_img_0" style="display:inline" border="0"></a>

En fait le lien reprend le src de l'image heuu


Dernière édition par Milouze14 le Mar 20 Aoû 2019 - 7:57, édité 1 fois

Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

10
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 20 Aoû 2019 - 7:50

Coucou Stéphane,

tu peux ajouter ce script sur ton fofo(pour les anciennes citations nommées):
Code:
$(function(){
$('img[src="https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png"]').each(function(){
$(this).replaceWith('<span class="M14_AncoR_PosT"></span>');

});});

Puis dans ta feuille de style proprement dit: ajoutes ceci (tu as encore de la place):
Code:

.M14_AncoR_PosT:before
{
content: "\f024";
font-family: FontAwesome;
position: absolute;
margin: 0px 0px 0px -16px;
}


Car comme je ne trouvais pas la c.s.s mentionnée ici:
https://www.milouze14.com/t32230-phpbb2-changer-le-lien-d-une-image-par-une-icone-font-awesone#613475

Il faudra la chercher et la supprimer puisque tu l'as déposé dans ta feuille de style .

Avec le script on avait la balise a ayant la class "M14_AncoR_PosT" .
Ce n'est donc plus une obligation de mettre la balise a avec la class:
Code:
a.M14_AncoR_PosT
comme nous avons aussi une balise span ayant la même class (pour les anciennes citations) que le script va remplacer l'image par :
Code:
<span class="M14_AncoR_PosT"></span>'

Hum, je ne sais pas si je me suis bien fait comprendre car même moi je m'y perd  lOL

Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

11
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mar 20 Aoû 2019 - 9:06

Hum, tu vas avoir de la lecture pasvuT .
Dans ton template, tu ne prends pas l'url directe mais juste l'ancre.
On va remédier à cela en cachant l'url du message ainsi que son titre.


J'ai testé un autre script toujours dans la même optique mais lui va te donner le lien du sujet et au survol de l'icône, tu auras le titre.

Dans ton template viewtopic_body (ligne 238) ,
tu as ceci:
Code:
<td> <span class="postdetails"style="float: left;">

Juste après dépose ceci:

Code:
<a class="M14_topic" href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a>

Penses a enregistrer puis à valider en cliquant respectivement sur Enregistr puis Ajout


Ajoutes ceci dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:

Code:

a.M14_topic{display:none;}

Penses a cliquer sur le bouton [PhpBB2] Changer le lien d'une image par une icone font awesone Sans_t10

Puis le script de citation nommée:
Code:
/* Citation avec ancre*/
$(function(){
$('a[href*="&mode=quote"]').on('click',function(t){t.preventDefault();
var a=$(this).attr('href');                                                 
var e=$(this).closest('table').next().find('a.M14_topic[href^="/t"]').attr('href');
var f=$(this).closest('table').next().find('a.M14_topic[href^="/t"]').text();                                                 
$.get(a,function(t){quote_text_info=$("textarea",t).val(),$(".sceditor-container").find("textarea").sceditor("instance").val('<a class="M14_AncoR_PosT"href="'+e+'"title="'+f+'"></a>\n'+quote_text_info+'\n'),$("html, body").animate({scrollTop:$(".sceditor-container").find("textarea").offset().top-100},500,function(){$(".sceditor-container").find("textarea").focus()})})}),$("a[href*='-quotetestdesforums#']").each(function(){$(this).prependTo($(this).next().find("cite:first"))})});


Avec ce script tu arriveras directement au message désiré sans avoir besoin d'ouvrir une nouvelle fenêtre.






Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

12
fascicularia
fascicularia
https://altitudetropicale.forums-actifs.com/

Messagefascicularia Jeu 22 Aoû 2019 - 22:07

Bonjour Philippe, 

Oups, désolé pour ce retard de suivi👀 .

Je teste tout cela de suite.

edit : tout fonctionne hormis la redirection des anciens quotes qui ne s'effectue plus . 

par exemple :
https://altitudetropicale.forums-actifs.com/t4318-colocasia-morning-dew#37883

Merci encore pour cette aide Philippe  tape la

Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

13
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 23 Aoû 2019 - 6:03

Hello Stéphane,
ce qui me choque est que je ne touche pas au lien présent mais bel et bien à l'image.
A l'heure actuelle,comme mentionné ici:
https://www.milouze14.com/t32230-phpbb2-changer-le-lien-d-une-image-par-une-icone-font-awesone#613479

Je ne trouve pas la cause, es tu certain que ces anciens codes html étaient fonctionnels auparavant ?

Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

14
fascicularia
fascicularia
https://altitudetropicale.forums-actifs.com/

Messagefascicularia Ven 23 Aoû 2019 - 16:14

Bonjour Philippe, 
tout fonctionnait à la base.

Je suis tout aussi étonné que toi vu que l'url de redirection est bien présente.

Code:
[url=https://altitudetropicale.forums-actifs.com/t4650-quotealtitudetropicale#38121][img]https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png[/img][/url][quote="grandan08"]Il est tout récent et dans un pot enterré,  il passera l'hiver au sous sol car il peut faire assez froid par ici...
D'ailleurs c'est quoi la limite basse pour le zébrina ?[/quote]


Je  viens d'aposer le script (avec les modifs de lien du forum) sur floratropica

http://floratropica.forumactif.org/t85-pour-milouze#465

le script
Code:
/* Citation avec ancre*/
$(function(){$("a[href*='&mode=quote']").on("click",function(t){t.preventDefault();var e=location.pathname.slice(0,location.pathname.indexOf("-")),i=$(this).attr("href").slice(8,$(this).attr("href").indexOf("&")),a=$(this).attr("href");$.get(a,function(t){quote_text_info=$("textarea",t).val(),$(".sceditor-container").find("textarea").sceditor("instance").val("[url=http://floratropica.forumactif.org/"+e+"-quotefloratropica#"+i+"][img]https://i.servimg.com/u/f48/16/58/89/73/flag_r10.png[/img][/url]"+quote_text_info+"\n"),$("html, body").animate({scrollTop:$(".sceditor-container").find("textarea").offset().top-100},500,function(){$(".sceditor-container").find("textarea").focus()})})}),$("a[href*='-quotefloratropica#']").each(function(){$(this).prependTo($(this).next().find("cite:first"))})});


Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

15
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Sam 24 Aoû 2019 - 8:31

Coucou Stéphane,
ce script génère une erreur, en passant le curseur de la souris sur le drapeau, on s'aperçoist que le lien est erroné Stéphane:
[PhpBB2] Changer le lien d'une image par une icone font awesone 123


Il devrait récupérer ;
http://floratropica.forumactif.org/t85-pour-milouze#462

On se retrouve avec une double barre slash:
http://floratropica.forumactif.org//t85-pour-milouze#462



Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

16
fascicularia
fascicularia
https://altitudetropicale.forums-actifs.com/

Messagefascicularia Sam 24 Aoû 2019 - 22:56

Effectivement, bien que le lien renvois bien au message cité.

Bon, je pense que je vais abandonner mon idée de remplacer l'image et remettre le script original même avec ce défaut.

Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

17
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 25 Aoû 2019 - 10:12

Hello Stéphane,
hum, à ta place je laisserais l'actuel car de toutes façon ,
tu ne pourras récupérer le lien de l'image, je pense plus à un bug de Forumactif à une période donnée car sinon,tu aurais ce désagrément partout .

Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

18
fascicularia
fascicularia
https://altitudetropicale.forums-actifs.com/

Messagefascicularia Dim 25 Aoû 2019 - 13:52

Bonjour Philippe, 

oui, effectivement tu as raison, je vais laisser le nouveau js.

Un grand merci pour cette aide  tape la .

Sujet résolu Re: [PhpBB2] Changer le lien d'une image par une icone font awesone

19
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Dim 25 Aoû 2019 - 14:57

De rien Stéphane,


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil

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

Sujets similaires
» [EDGE] Comment changer l'icone : intégrer du contenu enrichi via la balise EMBED
» [PHPBB2] Lien d'un message spécifique dans un topic
» [PhpBB2] Changer le nom d'un groupe
»  [PHPBB2] L' icône news message sur les catégories plus fonctionnelles.
» [PHPBB2] Mettez une icône ou une couleur à un membre choisi

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Astuces Forumactif :: Astuces Forumactif :: Les sujets résolus

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit