Code for Properly-Formatted Ghost-Discourse Forum Integration?

[denvergeeks]

Hi everyone –

Problem: Here is how my Ghost post appears as a Topic on my Discourse forum…

(Live link here Test for Discourse Embedding - From Jen.Studio - The nOObish Forum)

Of course, this is what I want the embed to actually look like in the forum post (I want it to look like the post appears on the blog page)…

(Live link here Test for Discourse Embedding)

Here is my post.hbs source where I have the Discourse embed code:

{{!< 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}}

I followed the instructions here…

Official Ghost + Discourse Integration

[denvergeeks]

I’ve partially solved this.

In the Discourse forum admin settings at https://noobish.me/admin/customize/embeddingsettings

There under Crawler Settings

I added just the specific CSS selector where (for the specific theme I’m working with) the main content of the post resides…

[denvergeeks]

I’d still like to know if there is a way to bring one or more images from the blog post into to the forum entry.

[matenauta]

You can check that and try to do the same using your metatag data and some javascript coding: GitHub - discourse/onebox: A gem for turning URLs into website previews