Submitted on Sep 8, 2015

Sites that allow users to post and vote on content such as Reddit and Digg are hugely successful. In this tutorial we are going to create a Reddit style website in Drupal. What do I mean by "Reddit style website"?

  1. A user can post a link to an external URL.
  2. Users can upvote or downvote posted content.
  3. The content will appear displaying an automatically generated thumbnail from the external website.
  4. Users can filter results based on the content's rating and when it was posted.

Below is a screenshot of what we will be creating.

Step 1: Configure ShrinkTheWeb

One of the nice things about Reddit is that is automatically creates a thumbnail of the website a user links to. This is helpful because it gives users a sneak peak at what they are about to visit.

Luckily, ShrinkTheWeb is a module that does just this.

  1. Create a free account at ShrinkTheWeb.
  2. After you register, go to the home tab and do the following:
    1. Copy your Access Key and Secret Key
    2. Add your domains to My Allowed Domains & IPs:
  3. Now that you have an account, install and enable the ShrinkTheWeb module.
  4. Navigate to admin/config/media/shrinktheweb and setup the following configuration:
    1. Add your Access Key and Secret Key from step 2.1
    2. (Optional) Set the size of the Default Thumbnail size to xlg. This is the largest you can make the generated thumbnail with the free plan.

Step 2: Create a Link Content Type

Now that we configured ShrinkTheWeb, we can create a new custom content type. This will allow users to post links to external URLs.

  1. Before you create a new custom content type, install and enable the Link module.
  2. Create a new content type by going to admin/structure/types/add
    1. Name your custom content type and adjust any configurations as you see fit.
    2. Add a link field and make it required.

    3. Under the teaser display admin/structure/types/manage/your-new-content-type/display/teaser set the Link label to Hidden and the format to [ShrinkTheWeb] Separate title and URL.

Step 3: Configure Rate Module

Now that we have the content type configured, we need to add the ability for users to rate content.

  1. Install and enable the Rate module
  2. Navigate to admin/structure/rate/ and add a Number up / down widget.
  3. On the next page, name your widget and configure the following settings:
    1. Under NODE TYPES select the content type you created in Step 2
    2. Under DISPLAY SETTINGS make sure Display in teaser is checked, and Appearance in teaser is set to Full widget.
    3. Under INTERACTION set Which rating should be displayed? to Average rating. Set Which rating should be displayed when the user just voted? to Average rating. Set Should a second click on the same button delete the vote? to No.
    4. Under PERMISSIONS set Roles to authenticated user and any other role you wish to grant this permission to. Check Allow author to rate his / her own content. Set Behaviour when user has no permission to vote to Redirect to login and show message.

Step 4: Configure The View

Now we have everything we need to create a view that will display our content and allow users to sort based in specific criteria.

  1. First, install and enable Views.
  2. Then, create a new view by going to admin/structure/views/add
    1. Configure the view to show Content of the content type you created in step 2 sorted by unsorted. Create a page of teasers.
  3. Under RELATIONSHIPS add a Content: Vote results relationship.
    1. Set the Value type to points
    2. Set the Vote tag to Normal Vote
    3. Set the Aggregation function to Average vote
  4. Under FILTER CRITERIA add a Content: Post date field.
    1. Select Expose this filter to visitors, to allow them to change it
    2. Under Filter type to expose select Grouped filters
    3. Under Widget type chose Select
    4. Add the following filters
      1. Today, Is greater than or equal to, An offset from the current time,  - 24 hours
      2. This Week, Is greater than or equal to, An offset from the current time,  - 7 days
      3. This Month, Is greater than or equal to, An offset from the current time,  - 1 month
      4. This Year, Is greater than or equal to, An offset from the current time,  - 1 year
      5. All Time, Is greater than or equal to, An offset from the current time,  - 999 years
  5. Under SORT CRITERIA add Vote results: Value
    1. Select Expose this sort to visitors, to allow them to change it
    2. Relationship Vote results
    3. Select Sort descending
    4. Check Treat missing votes as zeros
  6. ​Under Under SORT CRITERIA add Content: Post date
    1. ​Select Expose this sort to visitors, to allow them to change it
    2. Select  Sort descending
    3. Under Granularity select Second
  7. Save your view

You can then set the path of this view to be the homepage of your website at admin/config/system/site-information

Conclusion

This is just a bare bones example of how to create a Reddit style website. There's obviously more to Reddit than just the above, but the ability for users to post and rate content is crucial. Adding the ShrinkToWeb functionality is a nice touch and adds an extra layer of detail. If you're looking to use the features we created today more than once, you can always create an installation profile as outlined by Awang Setiawan.