L'Agora sur Chronica – Photo intégrée ailleurs avec ses étiquettes et ses liens

Re: Photo intégrée ailleurs avec ses étiquettes et ses liens

2025-05-30T18:58:48Z

Éric m'a donc concocté un fichier pour intégrer ailleurs l'image avec ses tags et les liens. C'est un clone allégé de showmedia.php qui n'affiche à peu près que l'image et pas le reste de la page. J'ai donc posé à la racine showmedia2.php
showmedia2.php.zip 5.7 (136)

Aujourd'hui, j'ai demandé à Éric si l'on pouvait mettre en _blank les liens des tags vers les pages personnelles. C'est possible, mais cela ouvre les liens des étiquettes dans une nouvelle page du TNG en popup. Et cela sera valable non seulement pour l'image intégrée sur les sites externes, mais également pour les tags d'image cliquées sur le TNG même.

Il faut pour cela forker le fichier /js/img_viewer.js ligne 853 et remplacer :

function handleTagClick(e) {
    if(this.link)
        parent.location.href = this.link;
}

par

function handleTagClick(e) {
    if(this.link)
        window.open(this.link, '_blank', 'location=yes,height=1000,width=auto,scrollbars=yes,status=yes');
}

Éric avait proposé d'autres dimensions pour le popup (height=500,width=500), mais j'ai modifié selon ma préférence

Voilà ce que ça donne sur mon site principal : https://chauvigne.info/pages/363-serge- … ine-fr.php

Ou sur mon album Piwigo (2e photo, en commentaire de celle au-dessus) : https://album.chauvigne.info/picture?/B … e/category

Le fork sera bien sûr à refaire chaque fois qu'une mise à jour de TNG modifiera le fichier javascript.

Re: Photo intégrée ailleurs avec ses étiquettes et ses liens

2025-02-26T15:12:26Z

Merci Éric, j'ai remplacé par iframe et ça va bien sur mes 4 ou 5 navigateurs sous windows. Je maîtrise de moins en moins la chose, faudrait que je ralentisse sur les expérimentations.

Re: Photo intégrée ailleurs avec ses étiquettes et ses liens

2025-02-26T14:58:04Z

Avec Safari, "embed" ne fonctionne pas. Je ne vois pas de message d'erreur. Par contre en remplaçant "embed" par "iframe, ça marche.

Eric

Re: Photo intégrée ailleurs avec ses étiquettes et ses liens

2025-02-25T16:12:14Z

Désolée Eric, j'ai changé le titre et cela a changé l'URL : essaye là
https://chauvigne.info/pages/363-serge- … ine-fr.php

Re: Photo intégrée ailleurs avec ses étiquettes et ses liens

2025-02-25T15:52:29Z

J'ai une erreur 404 sur cette page.

Vu que showmedia contient un iframe et modifie sa dimension après avoir chargé son contenu, on a un iframe dans un embed, ce qui risque d'être compliqué à mesurer.

Eric

Re: Photo intégrée ailleurs avec ses étiquettes et ses liens

2025-02-24T18:20:52Z

Génial Éric, j'ai juste posé ton fichier à la racine du TNG, et changé l'appel du fichier sur mon autre site et voilà le travail :
https://chauvigne.info/pages/363-serge- … nks-fr.php

Un grand merci

Faut encore que je trouve comment rendre ça responsive. Je cherche ...

Re: Photo intégrée ailleurs avec ses étiquettes et ses liens

2025-02-24T17:42:32Z

oh oui oh oui, si tu veux bien.
Un copain m'avait fait une intégration du nuage de noms, mais je sais pas si je saurais le refaire. Le principe était d'ajouter une div et de n'intégrer que cette div, mais ça impliquait de forker les 2 sites, origine et destination.
C'est là, en bas de page : https://chauvigne.info/

Re: Photo intégrée ailleurs avec ses étiquettes et ses liens

2025-02-24T17:35:10Z

Bonjour,

Il faudrait utiliser une version légèrement modifiée de showmedia.php qui supprime les parties non nécessaires. Je t'envoie un fichier par email.

Eric

Photo intégrée ailleurs avec ses étiquettes et ses liens

2025-02-23T05:19:17Z

Mon site principal, Ma Tribu, est un CMS fait de pages classées en catégories. On y cause de la famille, de ses histoires, de biographies ...
Dans la section de Serge, je voulais afficher une photo de groupe de son mariage, avec les étiquettes au survol et les liens vers les pages TNG de chacune des personnes identifiées et présentes dans l'arbre. Et après plusieurs essais, ça marche. (Note, ceux sont l'étiquette a un fond blanc ont une page joignable sur le site de généalogie. Ceux dont l'étiquette a un fond bleu ont été identifiés, mais ne sont pas dans l'arbre, donc pas de lien.) Mais, je dois intégrer toute la page, pas seulement la photo (avec ses étiquettes et ses liens)

Voici le lien vers cette page : https://chauvigne.info/pages/363-serge- … nks-fr.php
Voilà le code dans la page de Ma Tribu.

Et le css laisse à désirer pour un rendu responsive sur toute largeur d'écran. Je cherche à améliorer. Voilà ce que j'ai, pas encore très efficace.

.embed-responsive {position: relative;display: block;height: 0;padding: 0;overflow: hidden;}
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object {  position: absolute;  top: 0;  left: 0;  bottom: 0;  height: 100%;  width: 100%;  border: 0;}
.embed-responsive.embed-responsive-kat {  padding-bottom: 100%;}
.embed-responsive.embed-responsive-16by9 {padding-bottom: 56.25%;}
.embed-responsive.embed-responsive-4by3 {padding-bottom: 75%;}

Qui aurait des idées pour n'intégrer que la photo avec ses étiquettes et les liens qui vont bien ?