Logo du forum en l'occurrence en bas dans les photos dans "Montres aujourd'hui

[Michel F Reims.]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://passion51.forumgratuit.org

Description du problème

Bonjour,

J'aimerai apposer systématiquement, automatiquement le logo MMPM dans le sujet "Montres aujourd'hui", ceci dans le but de ne pas se faire spolier les photos et de faire connaître un peu plus le forum. Celà se pratique sur d'autres forums par des hébergeurs différents.

Est-ce possible par notre hébergeur?

Si oui comment faire? Svp de la façon la plus simple possible n'étant pas un pro en informatique.

Merci à l'avance pour votre aide et merci de transférer ce sujet si je ne suis pas au bon endroit.

Cordialement.

[Oka.mi]

Bonjour,

Malheureusement ce n'est pas avec du code que vous pourrez faire quelque chose d'efficace à ce sujet (à moins de passer par du php, ce qui n'est pas accessible côté utilisateurs). Il faudra passer par un logiciel de graphisme, ou un des nombreux sites qui permettent d'ajouter un logo sur une image, comme par exemple celui-ci : https://addlogo.imageonline.co/fr/

[Michel F Reims.]

Bonsoir,

Déjà un grand merci Oka.mi pour votre réponse.

Donc d'après ce que je comprends (si j'ai bien compris), par codage ce n'est pas possible?

Il faut donc passer par un prestataire autre que notre hébergeur ?

Je n'ai pas compris le php? Il me semble que j'y suis déjà, non? Ou alors par moi ce n'est pas possible?

En définitive c'est plus compliqué que je pensais.

Cordialement

[Oka.mi]

Donc d'après ce que je comprends (si j'ai bien compris), par codage ce n'est pas possible?

C'est possible de coder quelque chose pour poser un logo sur chaque image, mais cela ne protègera pas vos images d'un vol. Du css ou du javascript, ça s'enlève et se désactive facilement. Par contre si vous passez par un logiciel de graphisme (ou site spécialisé), il sera impossible de retirer le logo à moins de posséder le fichier original comprenant les calques séparés.

Je n'ai pas compris le php? Il me semble que j'y suis déjà, non?

Je suppose que vous comprenez "phpbb" mais je parle du langage php https://fr.wikipedia.org/wiki/PHP Il n'est pas possible de gérer ça côté utilisateurs, et à raison puisque cela permettrait trop de choses.

[Michel F Reims.]

Ok, merci.

Cette fois c'est clair pour moi.

Serait-il possible de connaître quand même la procédure pour apposer un petit logo " forum MMPM " en bas de chaque photo, (j'ai demandé à un membre du forum si je pouvais apposer son logo créé par lui) je précise pour l'instant je n'ai pas de réponse) mais en cas de refus j'aimerai mettre quand même un logo.

Cordialement.

[Michel F Reims.]

Voilà un des 2 logos que j'aimerai apposer en bas des images  ( en petit, plus clair si c'est possible ).

.

Avec une préférence pour le deuxième.

Merci.

[Toryudo]

Bonjour !

Pour le coup, après des tests, j'ai pu m'apercevoir qu'en utilisant des canvas, on peut faire en sorte de "redessiner/retoucher" des images à la volée. Alors voici ma contribution, un code JavaScript à ajouter dans vos scripts personnalisés, qui devrait faire apparaitre le logo sur toutes les photos du sujet Montres aujourd'hui... :

Code:

$(function(){
   const images = document.querySelectorAll(`img[alt*="Montres aujourd'hui..."]`);
   var logo = document.createElement('img');
   logo.onload = function() {
      images.forEach(function(img) {
         if ((img.loading != 'lazy') && (img.width > 300)){
            let c = document.createElement('canvas');
            c.width = img.width;
            c.height = img.height;
            let ctx = c.getContext('2d');
            ctx.drawImage(img, 0, 0);
            ctx.globalAlpha = 0.4;
            ctx.drawImage(logo, 2, c.height - 57 - 2, 180, 57);
            img.replaceWith(c);
         }
      });
   }
   logo.src = 'https://i.servimg.com/u/f85/14/71/40/89/img_2319.jpg';
});


J'ai repris votre deuxième image, je l'ai rétrécie et ai diminué son opacité pour la faire apparaitre en bas dans les photos ; j'espère que ça vous conviendra.

[Michel F Reims.]

Bonjour Toryudo, ainsi qu'à toutes et tous.

D'abord je vous remercie pour votre réponse et pour votre érudition, (j'ai un peu peur de faire une bêtise en essayant d'appliquer cette méthode dans mon panneau d'administration).

Serait-ce possible sans trop vous demander (ou à quelqu'un du Staff de le faire à ma place? Au moins je serais sûr qu'il n'y aurait pas de bêtise de faite et également sûr du résultat). Je ne suis pas très franc pour le faire moi-même.

Quoi qu'il en soit un grand merci ainsi qu'à toute l'équipe de Forumactif.

On sait pourquoi on est là et on peut compter sur votre aide, votre disponibilité et votre expérience.

Bien cordialement.

[Toryudo]

Bonjour !
Allez, j'insiste un peu pour que vous essayiez, les tutos sont là pour ça, ce n'est pas si effrayant qu'on peut l'imaginer
https://forum.forumactif.com/t311791-gestion-des-codes-javascript

Si vraiment vous n'y arrivez vraiment pas, envoyer-moi un MP, on verra ça ensemble.

[Michel F Reims.]

Bonjour,

D'accord Toryudo, je vais m'y pencher dès la semaine prochaine, (un peu chargé ce week-end), j'espère ne pas faire de bêtise et que ça va marcher.

Cette partie n'est vraiment pas mon fort.

Merci encore.

Excellent Week-end à toutes et tous.

[Michel F Reims.]

Bonjour,

Après avoir relu le tuto (bien expliqué d'ailleurs)

Je viens de mettre le codage que vous m'avez indiqué.

Ça ne fonctionne pas?

Je pense que celà vient sûrement de moi, pourtant j'ai appliqué, peut-être mal?

Svp, pouvez-vous regarder ce qui cloche?

Merci à l'avance.

[Oka.mi]

Bonjour Michel,

C'est parce que vous n'avez copié qu'une partie du script. Le vôtre s'arrête à ctx.drawImage(img, 0, 0);, il manque le reste que vous pourrez voir en faisant défiler le petit bloc de code que vous a donné Toryudo.
Petite astuce : en cliquant sur cette icône en haut à droite du bloc de code vous sélectionnez en un clic tout le contenu du code sans devoir défiler. Il ne vous restera alors plus qu'à copier, et coller.

[Michel F Reims.]

Bonjour Oka.mi et à toutes et tous.

D'accord, je n'avais pas vu qu'il fallait défiler ce codage ce pourquoi, je me suis arrêter au 11 🤭

Merci beaucoup, je vais de ce pas essayer de compléter en espérant que je serais plus efficace.

Cordialement.

[Michel F Reims.]

re :

J'ai pas dû faire comme il faut car ça ne fonctionne pas.

Donc pour l'instant ce n'est PAS RÉSOLU.

Pouvez-vous svp me dire ou intervenir pour que ça fonctionne?

J'ai tout essayé mais je suis un autodidacte dans ce domaine et cela dépasse de loin mes compétences.

Sans votre intervention je dois me résoudre à penser que celà ne pourra se faire. (Pourtant depuis un moment cette possibilité me tenait à coeur).

Cordialement

[orpheus]

Bonjour,

si je peux me permettre, je pense que le plus fiable et le plus simple à mettre en place pour un système de tague sur vos images serait de passer par un logiciel de retouche d'image qui fera ça très bien.

Il vous suffit d'acheter un logiciel comme Photofiltre Studio ou prendre un équivalent gratuit/open source comme Gimp (mais qui à mon sens est moins intuitif), vous ouvrez l'image à taguer, vous ouvrez le logo et il vous suffit de copier/coller le logo sur l'image à taguer.

Après le gros inconvénient, c'est que cela va demander du temps dans le sens ou vous devrez taguer chaque image une par une mais au moins comme ça, vous êtes sur que vos images seront bien protégés contre les vols.

[Michel F Reims.]

Merci Orpheus pour votre réponse mais je fais confiance à Toryudo, s'il m'a dit que ça fonctionnait c'est que ça fonctionne, je pense que j'ai dû faire une erreur ou ne pas faire ce qu'il aurait fallut faire.

Il y a quelque chose qui cloche, venant je pense de ma part, le problème c'est que je ne sais pas quoi et où.

Montres aujourd'hui sur mon forum représente des milliers de réponses avec un peu près 100 000 vues (voir plus), je ne me vois pas indiquer sur chaque image le logo, c'est quasi inapplicable.

Cordialement

[Oka.mi]

Bonjour,

Comme je disais dans ma toute première réponse, la solution développée par Orpheus (passer par un logiciel de graphisme) est la plus fiable, car un Javascript, ça se désactive facilement, même si on peut imaginer qu'un utilisateur non initié ignorera cette possibilité.

J'ai jeté un coup d’œil à votre code. J'ai l'impression que vous vous êtes amusé à le copier à la main, car il y a plein de différences à plusieurs niveaux. Forcément, si le code n'est pas le même, il ne fonctionnera pas. Au lieu de le copier à la main, vous devez juste effectuer un clic droit (après avoir tout sélectionné avec ) et sélectionner "copier" puis de clic droit "coller" dans la page du JavaScript.

[Michel F Reims.]

Oui j'ai tout copié à la main car je ne suis pas actuellement dans ma résidence principale et ne dispose pas de mon ordinateur mais simplement d'un téléphone rudimentaire donc possibilité réduite, ce pourquoi je vous demandais aussi d'intervenir directement.

La solution de Toryudo me convenait parfaitement tout en ayant conscience qu'elle pouvait comporter un inconvénient, mais peu importe.

Cordialement.

[Michel F Reims.]

Bonjour,

Dernière demande si ce n'est pas possible, svp classez le sujet merci.

Je ne suis pas comme vous le constatez parvenu à recopier correctement le codage à la main. (Actuellement je ne peux le faire autrement).

Comme vous l'avez réalisé déjà une fois à ma demande dans mon panneau il y a longtemps, pouvez-vous faire en sorte que ce code soit recopier correctement?

En vous remerciant quoi qu'il arrive.

Cordialement

[Oka.mi]

Bonjour,

Je vous ai envoyé un mp à ce sujet.

[Michel F Reims.]

Merci Oka.mi

Je fais le nécessaire.

Cordialement

[Michel F Reims.]

Bonsoir,

Je tiens à remercier particulièrement le Forum des forums et 2 membres que sont Toryudo et Oka-mi qui ont fait en sorte de réaliser cette demande qui me tenait tant à coeur.

Un grand merci.

Amicalement.

[Toryudo]

Pour information, j'ai eu des difficultés finales, voici le script corrigé final :

Code:

$(function(){
  const images = document.querySelectorAll(`img[alt*="Montres aujourd"]`);
  var logo = document.createElement('img');
  logo.onload = function() {
      images.forEach(function(img) {
        if (img.complete){
            if ((img.loading != 'lazy') && (img.width > 300)){
              let c = document.createElement('canvas');
              c.width = img.width;
              c.height = img.height;
              let ctx = c.getContext('2d');
              ctx.drawImage(img, 0, 0);
              ctx.globalAlpha = 0.4;
              ctx.drawImage(logo, 2, c.height - 57 - 2, 180, 57);
              img.replaceWith(c);
            }
        } else {
          img.onload = function() {
            if ((img.loading != 'lazy') && (img.width > 300)){
              let c = document.createElement('canvas');
              c.width = img.width;
              c.height = img.height;
              let ctx = c.getContext('2d');
              ctx.drawImage(img, 0, 0);
              ctx.globalAlpha = 0.4;
              ctx.drawImage(logo, 2, c.height - 57 - 2, 180, 57);
              img.replaceWith(c);
            }
          };
        }
      });
  };
  logo.src = 'https://i.servimg.com/u/f85/14/71/40/89/img_2319.jpg';
});

Pour la compréhension des modifications, il y a deux cas de figure à chaque fois : soit l'image est chargée au moment où le script passe, soit elle est toujours en train de charger. Si elle est chargée, on lui met le logo, sinon, on attend qu'elle soit chargée puis on lui met le logo.
C'était les difficultés de dernière minute !