Skip to content

Blog Setup

Solved Customisation
  • So I have made a custom page which is /blog and created a route to show on the top bar. I am not sure how to make it so topics from that category display. I would like to have a card for each topic with a photo showing and the title and maybe a small excerpt.

    I am thinking that I need to use some custom code to pull in the topic from an api? I know when you edit the custom page you can do script tags.

    I would think there is a plugin out there that would do this already, but I haven’t seem to have found one from doing some searching.

    Thanks again for the help!

  • @Madchatthew Are you looking for something like this ?

    33794ce8-2c2f-4d2a-8bf7-2420cf476fe9-image.png

    This can be found here

    This uses the “Featured Topics” plugin

    https://github.com/yariplus/nodebb-plugin-featured-topics-extended

    Note, that I also use a custom URL for this, but allow it to redirect via JS code inside a widget in the page to the actual URL - this requires the “Custom Pages” plugin

    https://github.com/psychobunny/nodebb-plugin-custom-pages#readme

    Once installed, you just need to create the custom page / route as shown below

    33c6f797-da0d-4545-a81b-4478125e1603-image.png

    Note that this then also adds the associated widget area required in order to implement the below (somewhat cheap) redirect.

    4b0dee7f-3017-416f-90ec-a9ecfd017cd5-image.png

    The “Featured Topics” plugin does come with a couple of templates, although the one I am using is (unsurprisingly) custom. The code itself is here

    <div class="row blog-wrapper">
    <br>
    <!-- BEGIN topics -->
    <div class="col-xs-6 col-sm-4 post-holder" tid="{topics.tid}">
        <div class="blog-container" style="border: 1px solid {topics.category.bgColor};">
      <a href="{config.relative_path}/topic/{topics.slug}" class="post-box" style="min-height: 340px;">
          <div class="parent">
        <figure class="blog-image child" style="background: {topics.user.icon:bgColor}
          <!-- IF topics.imageurl -->
            url({topics.imageurl})
          <!-- END topics.imageurl -->
          ;">     
        </figure>
        </div>
        <p class="blog"><span class="category"><em>{topics.category.name}</em></span><br>{topics.title}</p>
      </a>
    </div>
    </div>
    <!-- END topics -->
    </div>
    
     <!-- IF paginator -->
      <div class="section sectionMain">
        <div class="PageNav">
          <nav>
            <!-- IF prevpage -->
            <a href="{config.relative_path}{featuredRoute}{prevpage}" class="btn btn-default paginate"></a>
            <!-- ENDIF prevpage -->
    
            <!-- BEGIN pages -->
            <a href="{config.relative_path}{featuredRoute}{pages.number}" class="btn <!-- IF pages.currentPage -->btn-primary active<!-- ELSE -->btn-default<!-- ENDIF pages.currentPage -->">{pages.number}</a>
            <!-- END pages -->
    
            <!-- IF nextpage -->
            <a href="{config.relative_path}{featuredRoute}{nextpage}" class="btn btn-default paginate"></a>
            <!-- ENDIF nextpage -->
          </nav>
        </div>
      </div>
      <!-- ENDIF paginator -->
    </div>
    

    Note that there is also custom CSS here which I added to get the layout I wanted, plus the colour scheme - essentially, it’s a “rip” of the “Scout” theme (from memory).

    There’s quite a lot here, so do let me know if any questions etc. The “Featured Topics” plugin is a bit of a learning curve, but great once you get the hang of it.

  • @phenomlab Very awesome!! Thank you very much!! Yes, I am looking for a layout like what you posted here. Would I just go to the github page for the featured topics plugin to see what the code for the themes are and then I am guessing there is a spot I can put the custom code to override what the theme is using so it uses the changed code? As you can see I am still in the process of learning how nodebb does things.

  • @Madchatthew Much easier in fact - you can apply it here

    47352f01-55bf-4430-8f67-80b873e0577d-image.png

  • @phenomlab Very nice, that is what I was hoping for. Thank you! I will play around with that and see what I come up with. Thank you again!

  • @Madchatthew No problems. Let me know if you need anything else.

  • @phenomlab On this page did you create a new list or do you just mark every post on your blog category as a featured item under news?

    6d1d0f1b-bf37-4564-aa41-a7bb14916ad3-image.png

    I am not sure what to enter into the Automatically feature new topics in these categories? I have tried entering blogs for the default category that is added on install. I can delete that one and make my own?

  • @Madchatthew If you open each post you want to feature, you should be able to do it like this

    a082d66b-a23a-48b4-b765-90543eca34e1-image.png

    02dc17fd-c222-4c7d-9445-2cb1d0a1ebd2-image.png

    That should include it in the “news” list, which you can then call with a widget, or from the url <your forum>/user/<userid>/blog

  • @phenomlab that is what I thought. I just wanted to make sure I didn’t need to do anything special. Thank you!

  • @phenomlab The following code is what was posted above. I have tried this code along with the code below your code. It seems no matter what I try, I can’t get a photo to show when I go to the blog page. I can make the title disappear, the content disappear but I can’t make the photo appear. When I look through the api list for nodebb I am unable to find the topics.imageurl. I am sure I am missing something simple but not sure what it is.

    I have been editing the two pieces of code and pasting into the custom code section that you showed up above, but for some reason it just doesn’t want to work. What am I missing?

    <div class="row blog-wrapper">
    <br>
    <!-- BEGIN topics -->
    <div class="col-xs-6 col-sm-4 post-holder" tid="{topics.tid}">
        <div class="blog-container" style="border: 1px solid {topics.category.bgColor};">
      <a href="{config.relative_path}/topic/{topics.slug}" class="post-box" style="min-height: 340px;">
          <div class="parent">
        <figure class="blog-image child" style="background: {topics.user.icon:bgColor}
          <!-- IF topics.imageurl -->
            url({topics.imageurl})
          <!-- END topics.imageurl -->
          ;">     
        </figure>
        </div>
        <p class="blog"><span class="category"><em>{topics.category.name}</em></span><br>{topics.title}</p>
      </a>
    </div>
    
    <div data-widget="featuredTopicsExBlocks" data-fte-widget="{fteWidget}">
      <div class="row grid" itemscope itemtype="http://www.schema.org/ItemList">
        <!-- BEGIN topics -->
        <div class="grid-item col-lg-3 col-md-6 col-sm-12 ftx-block-item" data-tid="{topics.tid}">
          <meta itemprop="name" content="{topics.title}">
    
          <div class="ftx-block-inner">
            <div class="ftx-block-card">
              <a href="{config.relative_path}/topic/{topics.slug}" style="display:block;">
                <div class="ftx-block-card-bg" style="
                  background-size: {backgroundSize};
                  background-position: {backgroundPosition};
                  color: {topics.category.color};
                  opacity: {backgroundOpacity};
                  <!-- IF topics.thumb -->background-image: url({topics.thumb});<!-- ELSE -->
                    <!-- IF topics.category.backgroundImage -->background-image: url({topics.category.backgroundImage});<!-- ENDIF topics.category.backgroundImage -->
                  <!-- ENDIF topics.thumb -->
                <!-- IF topics.category.bgColor -->background-color: {topics.category.bgColor};<!-- ENDIF topics.category.bgColor -->
                "></div>
              </a>
              <div class="ftx-block-card-inner">
                <div class="topic-info" style="color: {topics.category.color};">
                  <!-- IF topics.thumbs.id -->22222<!-- ENDIF topics.thumbs.id -->
                  <!-- IF topics.category.icon --><i class="fa {topics.category.icon} fa-4x"></i><!-- ENDIF topics.category.icon -->
                </div>
                <span class="badge" style="display:none;">
                  <i class="fa fa-chevron-up" data-toggle="tooltip" title="Upvotes"></i> <span class="human-readable-number" title="{topics.votes}"></span>&nbsp;
                  <i class="fa fa-pencil" data-toggle="tooltip" title="Posts"></i> <span class="human-readable-number" title=""></span>&nbsp;
                  <i class="fa fa-eye" data-toggle="tooltip" title="Views"></i> <span class="human-readable-number" title=""></span>
                </span>
              </div>
            </div>
            <div class="ftx-block-title" style="padding-top:110px;">
              <a href="{config.relative_path}/topic/{topics.slug}" itemprop="url">
                  <h4>{topics.title}</h4>
              </a>
            </div>
            <div class="ftx-block-content">
              {topics.post.content}
            </div>
          </div>
        </div>
        <!-- END topics -->
      </div>
    </div>
    
  • @Madchatthew for this to work, you’ll need to place an image in the post itself - ideally at the start. That specific line of code is looking for the first available image in the post.

  • @phenomlab ahh, that makes sense. I wonder why it won’t pull it from the api. There is a specific thumb entry point that is in there. You can also upload a thumb. It would be nice if that worked.

  • @phenomlab I haven’t been able to get this to work. I think there is something wrong with the setup on my part.

    When I go to edit profile and chose Featured Topics
    1388c5d6-8d0b-418f-8cb6-54746212e4db-image.png

    I get this
    0cd528ff-a138-4e93-913b-4db9f69008aa-image.png
    None of the topics are being added to this list. I can create a new list, but this list shows a blog list and a news list. I can’t delete either one. I can create another new list and it lets me delete the new one.

    Now when I go over to plugins --> Featured Plugins Extended
    91b98908-a0d9-4d48-82b2-ed9609e1abe6-image.png
    I get this page
    cd242a78-7a0f-4e35-a854-d6231bdc1921-image.png
    I have the code in their like you do. I have tried the Carasaul on and off, it doesn’t seem to make a difference.

    Now when I go to Here
    edac3c82-7828-4960-aa89-7c3421b27f4a-image.png
    And I get this page
    f14f7d3b-ca6e-42ea-969c-ea6ac31e42e0-image.png
    Which shows like it is supposed too. So I am wondering if there isn’t something wrong with my installation of the plugin. It must be the Featured items under the profile menu that controls what shows up under the blog page.

    When I just use the template and don’t have the script in the header on the template and then use the featured items widget in the content area, then everyone shows up.

    This is a really long post and I apologize. I hope I gave a clear picture of what is happening. I am hoping I can get this to work and maybe it is a lack of my own knowledge with programming. I don’t know, but it would be nice if things like this were a lot easier to configure.

    Thanks again for your help!

  • @Madchatthew I did say that there is a learning curve didn’t I ? 🙂 Do you see anything if you visit your site, and append with /news ? As for the blog page, this isn’t obvious at all - it is buried in the (very lacking) documentation in the original post over on the NodeBB Community Forums, but in order to list something on the “blog” page, you need to select the first post in the thread, and then use the options there to “Feature this Topic”

    54204ec3-b940-40f4-b906-de85c4f75bb2-image.png

    This then produces the popup below

    3a53773e-1364-425e-aa51-e476a62d9bf8-image.png

    You’ll notice that “Blog” is selected by default, so you just click “Add Topic”. Once you’ve done this, you can then review the blog posts by going to this link in your profile

    98a1cec3-90a7-4591-9db2-b14b2f3811de-image.png

    Once you’ve added a few articles, then you should land up with something that looks like the below

    18ccc724-550d-4896-ad30-f958ac5a8825-image.png

    Note, that /news and the blog slug are generated automatically. In order to get https://sitename.com/blog to work as desired, you’ll need to setup either a JS or NGINX redirect to point it to the URL from your profile page, which is what I do with https://sudonix.com/blog

    Confused yet ? 😄

  • @Madchatthew said in Blog Setup:

    @phenomlab ahh, that makes sense. I wonder why it won’t pull it from the api. There is a specific thumb entry point that is in there. You can also upload a thumb. It would be nice if that worked.

    No idea, but this is the way it works sadly. Makes more sense to use a Thumbnail image, I agree.

  • @phenomlab alright, I think I understand now and I am easily confused by the way 😂😂😂

    I’ll take another look at it. Thank you

  • Here is an update. So one of the problems is that I was coding on windows - duh right? Windows was changing one of the forward slashes into a backslash when it got to the files folder where the image was being held. So I then booted up my virtualbox instance of ubuntu server and set it up on there. And will wonders never cease - it worked. The other thing was is that there are more than one spot to grab the templates. I was grabbing the template from the widget when I should have been grabbing it from the other templates folder and grabbing the code from the actual theme for the plugin. If any of that makes sense.

    I was able to set it up so it will go to mydomain/blog and I don’t have to forward it to the user/username/blog. Now I am in the process of styling it to the way I want it to look. I wish that there was a way to use a new version of bootstrap. There are so many more new options. I suppose I could install the newer version or add the cdn in the header, but I don’t want it to cause conflicts. Bootstrap 3 is a little lacking. I believe that v2 of nodebb uses a new version of bootstrap or they have made it so you can use any framework that you want for styling. I would have to double check though.

    Thanks for your help @phenomlab! I really appreciate it. I am sure I will have more questions so never fear I won’t be going away . . . ever, hahaha.

    Thanks again!

  • Madchatthewundefined Madchatthew has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

  • 9 Votes
    26 Posts
    2k Views

    @Hari said in Virtualmin Setup DigitalOcean:

    i have felt it is very hard to manage Virtualmin the settings are confusing

    It’s a bit of a learning curve, admittedly, but very powerful and easy to use provided you understand the implications of what you are doing. For example, moving a VirtualMin server to subserver and then back again without changing underlying components that rely on the correct placement of the server, of course it will no longer work.

  • 5 Votes
    4 Posts
    575 Views

    @crazycells I guess the worst part for me was the trolling - made so much worse by the fact that the moderators allowed it to continue, insisting that the PeerLyst coming was seeing an example by allowing the community to “self moderate” - such a statement being completely ridiculous, and it wasn’t until someone else other than myself pointed out that all of this toxic activity could in fact be crawled by Google, that they decided to step in and start deleting posts.

    In fact, it reached a boiling point where the CEO herself had to step in and post an article stating their justification for “self moderation” which simply doesn’t work.

    The evidence here speaks for itself.

  • 0 Votes
    1 Posts
    216 Views
    No one has replied
  • 0 Votes
    1 Posts
    212 Views
    No one has replied
  • 109 Votes
    152 Posts
    12k Views

    https://news.sky.com/story/scarlett-johannsson-shocked-and-angered-after-openai-allegedly-recreated-her-voice-without-consent-13140514

    SCARLETT JOHANSSON’S STATEMENT IN FULL

    Last September, I received an offer from Sam Altman, who wanted to hire me to voice the current ChatGPT 4.0 system.

    He told me that he felt that by my voicing the system, I could bridge the gap between tech companies and creatives and help consumers to feel comfortable with the seismic shift concerning humans and AI.

    He said he felt that my voice would be comforting to people.

    After much consideration and for personal reasons, I declined the offer.

    Nine months later, my friends, family and the general public all noted how much the newest system named “Sky” sounded like me.

    When I heard the released demo, I was shocked, angered and in disbelief that Mr Altman would pursue a voice that sounded so eerily similar to mine that my closest friends and news outlets could not tell the difference.

    Mr Altman even insinuated that the similarity was intentional, tweeting a single word “her” - a reference to the film in which I voiced a chat system, Samantha, who forms an intimate relationship with a human.

    Two days before the ChatGPT 4.0 demo was released, Mr Altman contacted my agent, asking me to reconsider. Before we could connect, the system was out there.

    As a result of their actions, I was forced to hire legal counsel, who wrote two letters to Mr Altman and OpenAI, setting out what they had done and asking them to detail the exact process by which they created the “Sky” voice. Consequently, OpenAI reluctantly agreed to take down the “Sky” voice.

    In a time when we are all grappling with deepfakes and the protection of our own likeness, our own work, our own identities, I believe these are questions that deserve absolute clarity.

    I look forward to resolution in the form of transparency and the passage of appropriate legislation to help ensure that individual rights are protected.

  • 0 Votes
    1 Posts
    207 Views
    No one has replied
  • 0 Votes
    1 Posts
    260 Views
    No one has replied
  • 0 Votes
    3 Posts
    315 Views

    @justoverclock yes, completely understand that. It’s a haven for criminal gangs and literally everything is on the table. Drugs, weapons, money laundering, cyber attacks for rent, and even murder for hire.

    Nothing it seems is off limits. The dark web is truly a place where the only limitation is the amount you are prepared to spend.