Blog Documentation Book a Demo
Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How to modify the homepage to show a dynamic content?

alaiksanderalaiksander New
in Vanilla 2.0 - 2.8

Hi, I am a complete newbie here. I would like to know if there is a plugin or ways where I can customize my homepage to show certain discussion of certain categories. It is like HotNews, HotDiscussion etc. with the possibility to show images and text. An example I know is something like www.kaskus.co.id. Thanks

Best Answer

Answers

  • rbrahmsonrbrahmson ✭✭✭

    Hi @alaiksander, welcome to the community.
    @R_J is the best tutor if you have interest in coding (and if you've never done it you should try - it's fun). But if you are not inclined to do any coding do not despair - Vanilla is still a good place for you.

    Let me address your question in two parts:
    You wrote

    "customize my homepage to show certain discussion of certain categories. It is like HotNews, HotDiscussion etc."

    For this I'd use the Announcement feature. It's the ability to mark specific discussions as "announcements" so that they will appear on top of the discussion list. There are two types of announcements - those that appear on top on the "main page" and those that only appear on top of the specific category they are listed under.

    There are also other ways to highlight specific discussions:

    • The Discussion Alert plugin can be used to mark a discussion with an eye grabber icon.
    • The Discussion Note plugin also shows an eye grabbing icon on specific discussions that have "post-it"-like notes added to them and can even show the note in the discussion list. You can set notes on specific discussions that deserve attention.

    These two also work with the Announcement feature.

    You also wanted another feature:

    ...with the possibility to show images and text.

    Discussions can include images and text, that's nothing new or special. There are plugins to show images in the discussion list itself - I'm not sure you want to go that way, but it's available.

    Give Vanilla a try and don't give up. If you have questions post them in this forum. Good luck!

  • alaiksanderalaiksander New
    edited July 2017

    @R_J and @rbrahmson I have a very basic css, php and html knowledge. I do interested in programming, though never actually make something, I would learn to code and would love to do that. I had learnt python and I also tried electronics (arduino) lately, never actually stayed on one programming language though. With the help of this community, I hope I can achieve my goal. Definitely will try the addons and suggestion. Thanks.

  • alaiksanderalaiksander New
    edited July 2017

    @R_J I have installed the addon and my forum now have a page called "GREETING". I think I should begin to edit "howtovanillapage.php" in the addon /views folder, am I in the correct direction here?

  • alaiksanderalaiksander New


    The page I wanted to achieve is like this with hot thread etc as frontpage.

  • rbrahmsonrbrahmson ✭✭✭

    @r_j is your guru - follow his advice and you will learn a lot. When I started I knew nothing about Vanilla or how to program in it. Now I have several published plugins and few unpublished ones. It was all made possible with the help of this community.

    The grid-like presentation of the Hot Threads example you want can be achieved with CSS. You will learn that later.

    Good programming is one which the effort achieves the goals one needs, so it is best to spend some thought about the requirements.

    From the screen capture I get the impression that it is from a smart phone. If indeed your audience will use phones rather than mostly a desktop browser you will need to consider which Vanilla phone "Theme" you will need and how your design is influenced by the small real estate available on the screen. Also you will need a "responsive" design (one which changes based on different screen sizes, landscape or portrait modes). Vanilla can handle that, but you should be aware that your goal isn't simple for a novice and I recommend that you:

    1. Articulate the requirements first (and why you need each of them)
    2. Get to your target in small steps
    3. Leave the presentation matter to the end (you will see that in Vanilla it is separate from the rest)

    I'm sure R_J has more valuable insights.

    Good luck and welcome to Vanilla!

  • alaiksanderalaiksander New

    @rbrahmson said:
    @r_j is your guru - follow his advice and you will learn a lot. When I started I knew nothing about Vanilla or how to program in it. Now I have several published plugins and few unpublished ones. It was all made possible with the help of this community.

    I hope I will benefit the same as you did.

    The grid-like presentation of the Hot Threads example you want can be achieved with CSS. You will learn that later.

    I was clueless with what it is called, I did stumble upon a Metro-like bootstrap theme. When you know the keyword, everything seems clearer hehe..

    From the screen capture I get the impression that it is from a smart phone. If indeed your audience will use phones rather than mostly a desktop browser you will need to consider which Vanilla phone "Theme" you will need and how your design is influenced by the small real estate available on the screen. Also you will need a "responsive" design (one which changes based on different screen sizes, landscape or portrait modes). Vanilla can handle that, but you should be aware that your goal isn't simple for a novice and I recommend that you:

    1. Articulate the requirements first (and why you need each of them)
    2. Get to your target in small steps
    3. Leave the presentation matter to the end (you will see that in Vanilla it is separate from the rest)

    I am from Indonesia, and the smartphone users are ever growing and people seldom use computers for a simple browsing or social media. I also aware about the learning process I am about to experience and I dont set my goal in anytime near. Thanks for all your info and input @rbrahmson.

  • rbrahmsonrbrahmson ✭✭✭

    @alaiksander said:)

    I am from Indonesia, and the smartphone users are ever growing and people seldom use computers for a simple browsing or social media.

    I hear you loudly. For now you will have to live with the browser mobile theme. Maybe one day Vanilla will have a native app

    @phreak , @Linc - you may find the above comment worthy.

  • R_JR_J Admin

    Those are very good advices! The first one is the most important. You need to know exactly what you want before you write a single line of code. I've seen the screenshot you have provided and that is a start.

    @alaiksander said:
    The page I wanted to achieve is like this with hot thread etc as frontpage.

    "Hot threads" and "etc" are no exact information we can get from the database :wink:

    By the way, don't call discussions "threads"

    1. What makes a discussion hot?

    The first question is far more complex than you might think. Here are the info you can get from the database and which might be helpful:

    • CountComments - the number of replies to a discussion
    • CountBookmarks - the number of users who have bookmarked that discussion
    • CountViews - how often that discussion has been viewed
    • DateInserted - the date the discussion was started
    • DateLastComment - the date of the last comment in that discussion

    You will also be able to find out the number of different users participating in a discussion.

    A few things that you should consider:

    • If a discussion has been hot a long time ago and somebody writes a new comment to it today, it most probably shouldn't be "hot" again.
    • When there are only one or two users in a discussion, could it be really hot?
    • If a discussion meets al your "hot" criteria shouldn't that "hotness" expire some day?
    • CountViews can be spoofed

    2. How to handle pictures?

    In that screenshot it is quite easy: there is one nice picture for every article. If you own a blog you can ensure that all your articles have one nice picture. But if you own a forum, there most probably wouldn't be pictures in your discussions. But if there are, there might be more than one picture. Which one would you like to present? All (maybe in a slideshow), a random one, the biggest one or even a mosaic? What if that picture is in portrait format? Should it be clipped to match a horizontal format? And what if that picture is smaller than it should?

    There are a thousand things you have to consider, sorry...

    But to get you started, just let assume a hot discussion is a discussion with more than 10 comments in the last 48 hours. That's simple.

    What are your skills? Please elaborate a little bit so that I know when I have to be a little bit more talkative and when not...

  • R_JR_J Admin

    Oh, and by the way: search the net for "masonry javascript" for the layout.

  • R_JR_J Admin

    You have started with the "howToVanillaPage" plugin? Rename it. It is an awful name for your plugin. Those are the steps you have to take:

    1. deactivate it
    2. rename the folder to "fancyHomepage" or whatever you like. Naming convention is to start with a lower case letter
    3. Look at the first line of code and make the key of that array the same as the new name of the folder $PluginInfo['fancyHomepage']
    4. Change all the other information in that $PluginInfo array so that they match to your project: your name, the description, a link etc.
    5. Find the class definition line and change it to your new name class FancyHomepagePlugin extends Gdn_Plugin {. Your plugin is a class and a class name should begin with an upper case letter. In order to make clear that it is a plugin, you should append the word "Plugin" after plugins name.

    Now you can enable the plugin.

    The plugin shows how to make a custom route for your plugin page. Don't care about that right now. At the very last step we would make that page be the homepage.

    At first I will show you how to get data from the database.

    Next step is to pass that data from the controller (the method in our plugin that is called when you open your custom page) to the view.

    Afterwards I show you some ways to present that data.

    Maybe on the way you have some ideas what that "etc" is that you would like to show additonally ;-)

  • R_JR_J Admin

    Right now I'm helping another user how to write a discussion ban plugin. You should read what I have written about object oriented development and the way MVC works in Vanilla. It would be great if you are able to take benefit from what I have written there.

    Search for the line public function vanillaController_howToVanillaPage_create($sender, $args) {. Having such a line in a plugin would create something that we can call by adding /vanilla/howtovanillapage to the forum url.
    vanillaController is the controller which routes our request, howToVanillaPage is the name that we wanted to be the name in the url and create is a signal for Vanilla that this method should create that endpoint.

    You have renamed the plugin. Let that new name be reflected in there, too. Change the above line to public function vanillaController_fancyHomepage_create($sender, $args) {. Now you can see your page at "example.com/vanilla/fancyHomepage".

    There are several places in the plugin where that address is replaced (with a new route). Try to figure out how to change the code so that you can create your own custom route. As a hint: if you have changed the right place, you would have to disable the plugin and afterwards re-enable the plugin in order for the altered route to take effect.

    But you could always access your page with the long /vanilla/fancyHomepage

    While in the discussion ban plugin I had an ID of a discussion I wanted to inspect, we now have some criteria by which we pick the top 10, I'd say.

    Do you know some SQL? That would be great! If not you will find that it is quite readable. If you have problems writing your own SQLs just ask and we will find out how to do together. SQL is the Structured Query Language which helps us querying the database.

    Find this two lines:

    // Let's pass this example to our view.
$sender->setData('name', $name);

    Below them, add this:

            $commentTime = date('Y-m-d H:i:s', strtotime('-48 hours'));
        $discussions = Gdn::sql()
            ->select('d.DiscussionID, d.Name, d.Body, d.Format')
            ->select('c.CommentID', 'count', 'RecentCommentCount')
            ->from('Discussion d')
            ->join('Comment c', 'd.DiscussionID = c.DiscussionID', 'left')
            ->where('c.DateInserted <=', $commentTime)
            ->groupBy('d.DiscussionID, d.Name, d.Body, d.Format')
            ->orderBy('RecentCommentCount', 'desc')
            ->limit('10')
            ->get();
        decho($discussions, '"Hot" discussions', true);

    Now look at your custom page again.

    I've chosen which information I would like to see with the select command. I've said I want them from table Discussion and that the table Comment should be joined to Discussion. I've only included comments that are younger than now - 48 hours. I wanted to see the result ordered by the count of recent comments, descending. And I only wanted to see 10 of them.
    In SQL, whenever you have a count or a sum or any aggregate function, you need to group the result.

    And then, with the call to get() the query is sent to the database and the result is available in the variable $discussions.

    decho() is a handy tool to output data while developing.

  • alaiksanderalaiksander New

    I hear you loudly. For now you will have to live with the browser mobile theme. Maybe one day Vanilla will have a native app

    I hope it will soon. +1 for native app

    @R_J oh I feel so blessed that I had joined this forum. I'll try it and I'll let you know.

Sign In or Register to comment.