Skip to content

Instantly share code, notes, and snippets.

Last active April 26, 2022 18:26
  • Star 6 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Random Aww


Dashing widget to display a random cute picture from

The display of the widget is heavily based on the Image widget, however it does not prepend the src with 'assets' which allows for external images.


You can set a placeholder image in the event that reddit is down, or otherwise unresponse. This is set at the top of random_aww.rb as follows:

placeholder = '/assets/nyantocat.gif'

This can be an image in /assets/images, or a full path to a remotely hosted image.


To use this widget, copy random_aww.html,, and random_aww.scss into the /widgets/random_aww directory. Put the random_aww.rb file in your /jobs folder.

To include the widget in a dashboard, add the following snippet to the dashboard layout file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="aww" data-view="RandomAww"></div>



class Dashing.RandomAww extends Dashing.Widget
ready: ->
# This is fired when the widget is done being rendered
onData: (data) ->
# Handle incoming data
# You can access the html node of this widget with `@node`
# Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
<div style="" class="image_container" data-bind-style="image"></div>
require 'net/http'
require 'json'
placeholder = '/assets/nyantocat.gif'
SCHEDULER.every '60s', first_in: 0 do |job|
http ='')
response = http.request("/r/aww.json"))
json = JSON.parse(response.body)
if json['data']['children'].count <= 0
send_event('aww', image: placeholder)
urls = json['data']['children'].map{|child| child['data']['url'] }
# Ensure we're linking directly to an image, not a gallery etc.
valid_urls ={|url| url.downcase.end_with?('png', 'gif', 'jpg', 'jpeg')}
send_event('aww', image: "background-image:url(#{valid_urls.sample(1).first})")
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #2d2e29;
// ----------------------------------------------------------------------------
// Widget-image styles
// ----------------------------------------------------------------------------
.widget-random-aww {
background-color: $background-color;
.image_container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
Copy link

jwalton commented Sep 19, 2013

Hi Chelsea! I made a few minor improvements here:

  • By using a background image, I made it preserve the aspect ratio of the image. Also, this makes it so your widget will work in different sized containers. You can have a 300x300px image, or a 600x600px image no problem.
  • I made it pull from r/kittens, which are way cuter than dogs. ;)

Copy link

chelsea commented Mar 11, 2014

Thanks jwalton, I've updated it a bit to better work with table cells. Using relative dimensions had some unpredictable behaviours, but kept the use of /r/aww, I'm equal opportunity with cute things.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment