Comment ajouter du HTML client après « post_1 » (partie 2)

[valsha (KingPin)]

Selon ce post How to add customer HTML after "post_1"
et cet exemple :

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;
  const h = helper.h;
  if (firstPost) {
    return h("div#custom-ad", [
      h(
        "a.custom-ad-link",
        { href: "example.com" },
        h("img", { src: "https://picsum.photos/id/74/750/90" })
      )
    ]);
  }
});
</script>

Nous pouvons définir l’image souhaitée, mais comment centrer correctement cette image et s’assurer qu’elle soit mise à l’échelle pour la conception mobile ?

car actuellement, elle s’affiche comme ceci :

[Don]

Bonjour,

Vous devez utiliser du CSS pour réaliser cela.

Dans la vue commune (CSS) Mobile et Bureau, ajoutez une largeur de 100 % à l’image.

#custom-ad {
  .custom-ad-link {
    img {
      width: 100%;
    }
  }
}

---

Dans la vue Bureau (CSS), ajoutez une largeur maximale à l’ID #custom-ad pour définir la largeur de la bannière identique à celle de l’avatar du sujet + du corps du sujet. Cela correspondra à la largeur de l’image à 100 %, ce que nous avons ajouté ci-dessus pour la vue commune.

#custom-ad {
  max-width: calc(45px + 690px + (11px * 2));
}

45px = Largeur de l’avatar du sujet
690px + (11px * 2) = Largeur du corps du sujet et les marges intérieures de 11px à gauche et à droite utilisées sur la classe .cooked.

Cela ressemblera à

Vue Bureau (pleine largeur)

---

Vue Bureau (responsive)

---

Vue Mobile

[valsha (KingPin)]

Tout ensemble, cela ressemblera à ceci ?

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;
  const h = helper.h;
  if (firstPost) {
    return h("div#custom-ad", [
      h(
        "a.custom-ad-link",
        { href: "example.com" },
        h("img", { src: "https://picsum.photos/id/74/750/90" })
      )
    ]);
  }
});
</script>
#custom-ad {
  .custom-ad-link {
    img {
      width: 100%;
    }
  }
}
#custom-ad {
  max-width: calc(45px + 690px + (11px * 2));
}

[Don]

Non, vous devez les ajouter aux sections CSS.

Voici donc l’ensemble.

Commun / En-tête

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;
  const h = helper.h;
  if (firstPost) {
    return h("div#custom-ad", [
      h(
        "a.custom-ad-link",
        { href: "example.com" },
        h("img", { src: "https://picsum.photos/id/74/750/90" })
      )
    ]);
  }
});
</script>

---

Commun / CSS

#custom-ad {
  .custom-ad-link {
    img {
      width: 100%;
    }
  }
}

---

Bureau / CSS

#custom-ad {
  max-width: calc(45px + 690px + (11px * 2));
}

[valsha (KingPin)]

Merci beaucoup !

[system (system) A fermé ce sujet ()]

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.