Code für richtig formatierte Ghost-Discourse-Forum-Integration?

Hallo zusammen –

Problem: Hier ist, wie mein Ghost-Post als Thema auf meinem Discourse-Forum erscheint…

(Live-Link hier https://noobish.me/t/test-for-discourse-embedding/48)

Natürlich so möchte ich, dass das Einbetten tatsächlich im Forum-Post aussieht (ich möchte, dass es so aussieht, wie der Post auf der Blog-Seite erscheint)…

(Live-Link hier https://jen.studio/test-for-discourse-embedding/)

Hier ist mein post.hbs-Quellcode, wo ich den Discourse-Einbettungscode habe:

{{!
< default}}
{{#post}}
    <div class="tagShare">
        <div class="shareIcon icon-share"><!-- --></div>
        <div class="share">
            <a class="icon-twitter" href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}"
                    onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"></a>
            <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
                    onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;"></a>
        </div>
    </div>
    <article id="postMain" class="{{post_class}}">

      <section class="postContent doubleColumn">

        <h1 class="postTitle">{{{title}}}</h1>
        <div class="tags" style="color: #ef6752">#{{tags separator="#"}}</div>
        <time class="dateStamp" datetime="{{date format='YYYY-MM-DD'}}">
            <span>&mdash;&ensp;</span>
            <i>Published {{date format="DD MMM"}} by {{authors}}</i>
            <span>&ensp;&mdash;</span>
        </time>

        <center><p><i>{{{custom_excerpt}}}</i></p></center>
        {{#if prev}}
          <link rel="previous" href="{{page_url prev}}"></link>
        {{/if}}
        {{#if next}}
          <link rel="next" href="{{page_url next}}"></link>
        {{/if}}

        {{#if feature_image}}
        <figure class="article-image heroImage showHeroImage">
            {{!-- This is a responsive image, it loads different sizes depending on device
            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
            <img
                srcset="{{img_url feature_image size="s"}} 300w,
                        {{img_url feature_image size="m"}} 600w,
                        {{img_url feature_image size="l"}} 1000w,
                        {{img_url feature_image size="xl"}} 2000w"
                sizes="(min-width: 1400px) 1400px, 92vw"
                src="{{img_url feature_image size="xl"}}"
                alt="{{title}}"
            />
        </figure>
        {{/if}}

        {{content}}

      </section>

            <div id='discourse-comments'></div>
            <script type="text/javascript">
              DiscourseEmbed = { discourseUrl: 'https://noobish.me/',
                                 discourseEmbedUrl: '{{url absolute="true"}}' };

              (function() {
                var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
                d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
              })();
            </script>

    </article>

{{/post}}

Ich habe die Anweisungen hier befolgt…

Ich habe dies teilweise gelöst.

In den Discourse-Foren-Admin-Einstellungen unter https://noobish.me/admin/customize/embeddingsettings

Dort unter Crawler-Einstellungen

Ich habe nur den spezifischen CSS-Selektor hinzugefügt, wo (für das spezifische Thema, mit dem ich arbeite) der Hauptinhalt des Beitrags liegt…

Ich würde trotzdem gerne wissen, ob es eine Möglichkeit gibt, ein oder mehrere Bilder aus dem Blogbeitrag in den Foreneintrag zu übernehmen.

Sie können das überprüfen und versuchen, dasselbe mit Ihren Metadaten und etwas JavaScript-Code zu tun: GitHub - discourse/onebox: (DEPRECATED) A gem for turning URLs into website previews