Cadre automatique autour de toutes les images entre balise [img]

[Kaehlyth]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Bonsoir à tous et toutes !

Je viens vers vous car je n'arrive pas à trouver ce que je veux en terme de code malgré les années et années de passionnés et d'échange sur le forumactif. Soit effectivement il y a trop de pages et l'outil recherche a fait de son mieux, soit ma demande est inédite ! (J'en doute )

> Je souhaiterai que lorsqu'on poste une image directement hébergée ou via un lien classique, un cadre stylisé entoure l'image.

Je peux le faire bien sur de manière individuel en HTML + CSS (comme donner la classe "cadrephoto" et l'appeler dans mon HTML du post) mais j'aimerai que cela soit automatisé si je puis dire ?

Il s'agit d'un forum RP, alors un gadget visuel, on n'est jamais contre !

L'image jointe vous montre grossièrement un cadre autour d'une image hébergée sur Zupimages.
Le but serait de pouvoir ajouter à chaque côté une image d'un côté pour faire style cadre photo.

Donc une image coupée en 4 appelée en CSS pour la balise [img] qui ferait en sorte que tous les liens entre balise [img] soit personnalisé ainsi. Ce que j'ai peur en faisant :

Code:

img {
border: 2px groove #daac53;
background:
url(lien de l image en haut et à gauche) no-repeat left top,
url(lien de l image en haut et à droite) no-repeat right top,
url(lien de l'image en bas et à droite) no-repeat right bottom,
url(lien de l'image en bas et à gauche) no-repeat left bottom;}

qui ferait que les images aient un cadre de 2px, c'est que TOUTES LES IMAGES DU FORUM aient un cadre, ce qui pourrait parasiter l'ensemble du visuel.

J'ai tenté de manière séparé dans une page HTML :

Code:

<div class="hearts">
</div>

<style>
  .hearts {
  border: 20px solid pink;
  border-image-source: url(https://zupimages.net/up/24/22/sy60.png);
  border-image-slice: 20 22;
  border-image-repeat: round;
}

body {background-color: #1D1F1F;}

div {
  width: 20vw;
  height: 20vh;
  margin: 4em auto;
}
</style>

Pour donner l'effet en "simplifié" en haut et en bas , pour l'effet encadrement parchemin.
Pensez-vous qu'il est possible que ce soit applicable et + simple pour la balise [img] ?

Merci beaucoup de votre lecture.

Cordialement

[Lixyr]

Bonjour Kaehlyth.

Effectivement, quand on utilise l'appel à la balise img, on appelle toutes les images, donc le CSS s'applique à toutes les images. Le BBcode ne se différencie pas du HTML dans ces cas-là, car si vous regardez bien dans le code source d'un message contenant cette balise BBCode, cette balise est retraduite en HTML. Donc img appellera toutes les images, quelque soit la façon dont celles-ci ont été codées, HTML ou BBcode.

Le seul moyen serait de mettre une classe à la balise, donc en HTML c'est mieux, ou bien d'entourer tout le message d'une div contenant une classe, elle, et d'appeler les images contenues dans cette div. Cela demanderait à tous vos membres qui souhaitent ce cadre d'utiliser cette div à chaque fois.

Exemple :

Code:

<div class="div_img_cadr">ICI LE CONTENU DU RP AVEC LES IMAGES</div>

et en CSS :

Code:

.div_img_cadr img {
    border: 2px groove #daac53;
    background:
    url(lien de l image en haut et à gauche) no-repeat left top,
    url(lien de l image en haut et à droite) no-repeat right top,
    url(lien de l'image en bas et à droite) no-repeat right bottom,
    url(lien de l'image en bas et à gauche) no-repeat left bottom;}

On ne peut pas automatiser. A partir du moment où vous souhaitez cibler telle image ou telle image, il faut une classe ou un identifiant quelque part. Le plus simple est d'utiliser la balise HTML img avec une classe. Après, c'est vous qui voyez.

[Kaehlyth]

Bonsoir Lixyr !

D'accord, au moins votre message permet de clarifier définitivement mes doutes.

Je le faisais avant par class par automatisme, dans le sens où si je veux personnaliser quelque chose, on se fait une petite ligne HTML doublé de CSS, on y pense et hop on la fait.

Je me disais donc : est-ce possible avec une balise bbcode ?

Ce n'est donc pas le cas, je classe donc le sujet comme "résolu".

Merci à vous.