psychobunny / nodebb-plugin-blog-comments

Lets NodeBB act as a comments engine/widget for your blog
BSD 2-Clause "Simplified" License
98 stars 55 forks source link

Avatar Path Issue #72

Closed ComputerCarl closed 6 years ago

ComputerCarl commented 7 years ago

I have a Ghost blog and NodeBB forum proxied through Apache at https://bliss.asia and https://bliss.asia/forum respectively.

When I am not logged into NodeBB, the default Gravatar is displayed beside the new comment textarea. When I am logged into NodeBB, no avatar is displayed due to the 404 which occurs from some piece of the Ghost=commentPLugin=NodeBB puzzle adding a second /forum path to the URL.

https://bliss.asia/forum/forum/assets/uploads/profile/2-profileavatar.png

psychobunny commented 7 years ago

Hi Carl,

I just had a look through your forum and I think I know what the issue is. Can you replace comments.tpl in node_modules/nodebb-plugin-blog-comments/public/templates/comments.tpl with the following and then re-build and restart NodeBB?

<!-- IF tid -->
    <!-- IF atTop -->
        <div class="topic-profile-pic user">
            <!-- IF isLoggedIn -->
                <!-- IF user.picture -->
                <img src="{user.picture}" alt="{user.username}" class="profile-image" title="{user.username}">
                <!-- ELSE -->
                <div class="profile-image" style="background-color: {user.icon:bgColor}" title="{user.username}" alt="{user.username}">{user.icon:text}</div>
                <!-- ENDIF user.picture -->
            <!-- ELSE -->
            <img src="https://1.gravatar.com/avatar/177d180983be7a2c95a4dbe7451abeba?s=95&d=&r=PG" class="profile-image" />
            <!-- ENDIF isLoggedIn -->
        </div>
        <form action="{relative_path}/comments/reply" method="post">
            <textarea id="nodebb-content" class="form-control" name="content" placeholder="Join the conversation" rows="3"></textarea>
        <!-- IF isLoggedIn -->
            <small>Signed in as <strong>{user.username}</strong>. <strong id="nodebb-error"></strong></small>
            <button class="btn btn-primary">Post a Reply</button>
            <input type="hidden" name="_csrf" value="{token}" />
            <input type="hidden" name="tid" value="{tid}" />
            <input type="hidden" name="url" value="{redirect_url}" />
        </form>
        <!-- ELSE -->
        </form>
        <button class="btn btn-primary" id="nodebb-register">Register</button>
        <button class="btn btn-primary" id="nodebb-login">Login</button>
        <br />
        <!-- ENDIF isLoggedIn -->
    <!-- ENDIF atTop -->

    <ul id="nodebb-comments-list">
        <!-- BEGIN posts -->
        <li <!-- IF pagination --> class="nodebb-post-fadein" <!-- ENDIF pagination --> <!-- IF !posts.index --> class="nodebb-post-fadein" <!-- ENDIF !posts.index --> >
            <div class="topic-item">
                <div class="topic-body">
                    <div class="topic-profile-pic">
                        <a href="{relative_path}/user/{user.userslug}">
                            <!-- IF user.picture -->
                            <img src="{user.picture}" alt="{user.username}" class="profile-image" title="{user.username}">
                            <!-- ELSE -->
                            <div class="profile-image" style="background-color: {user.icon:bgColor}" title="{user.username}" alt="{user.username}">{user.icon:text}</div>
                            <!-- ENDIF user.picture -->
                        </a>
                    </div>
                    <div class="topic-text">
                        <div class="post-content" itemprop="text"><small><strong>{user.username}</strong> commented {posts.timestamp}</small><br />{posts.content}</div>
                    </div>
                </div>
            </div>
        </li>
        <!-- END posts -->
    </ul>
    <br />

    <!-- IF atBottom -->
        <div class="topic-profile-pic user">
            <!-- IF isLoggedIn -->
            <img src="{user.picture}" class="profile-image" />
            <!-- ELSE -->
            <img src="http://1.gravatar.com/avatar/177d180983be7a2c95a4dbe7451abeba?s=95&d=&r=PG" class="profile-image" />
            <!-- ENDIF isLoggedIn -->
        </div>
        <form action="{relative_path}/comments/reply" method="post">
            <textarea id="nodebb-content" class="form-control" name="content" placeholder="Join the conversation" rows="3"></textarea>
        <!-- IF isLoggedIn -->
            <small>Signed in as <strong>{user.username}</strong>. <strong id="nodebb-error"></strong></small>
            <button class="btn btn-primary">Post a Reply</button>
            <input type="hidden" name="_csrf" value="{token}" />
            <input type="hidden" name="tid" value="{tid}" />
            <input type="hidden" name="url" value="{redirect_url}" />
        </form>
        <!-- ELSE -->
        </form>
        <button class="btn btn-primary" id="nodebb-register">Register</button>
        <button class="btn btn-primary" id="nodebb-login">Login</button>
        <br />
        <!-- ENDIF isLoggedIn -->
    <!-- ENDIF atBottom -->

    <small class="nodebb-copyright">Powered by <a href="http://nodebb.org" target="_blank">NodeBB</a> &bull; <a href="{relative_path}/topic/{tid}">View original thread</a></small>
    <button class="btn btn-primary" <!-- IF !posts.length -->style="display: none"<!-- ENDIF !posts.length --> id="nodebb-load-more">Load more comments...</button>
<!-- ELSE -->
    Commenting has been disabled.
    <!-- IF isAdmin -->
    <form action="{relative_path}/comments/publish" method="post">
        <button class="btn btn-primary">Publish this article to NodeBB</button>
        <input type="hidden" name="markdown" id="nodebb-content-markdown" />
        <input type="hidden" name="title" id="nodebb-content-title" />
        <input type="hidden" name="cid" id="nodebb-content-cid" />
        <input type="hidden" name="tags" id="nodebb-content-tags" />
        <input type="hidden" name="id" value="{article_id}" />
        <input type="hidden" name="url" value="{redirect_url}" />
        <input type="hidden" name="_csrf" value="{token}" />
    </form>
    <!-- ENDIF isAdmin -->
<!-- ENDIF tid -->

I'm just heading out but I thought I'd give you a bit of a head start. My plan is to update this plugin to the latest version of NodeBB (and ghost/wordpress) and fix a couple of issues including this one over the next week.

ComputerCarl commented 7 years ago

Thank you for taking a look at this so quickly. However, there is still a 404 from the /forum/forum issue, and a new issue has arisen wherein a Gravatar image is not displayed when there is no user logged into NodeBB.