Slimline – My first Ruby gem!

So I’ve been a Ruby developer for about 5 years now, and I’ve just created my first gem?! WHAT IS THIS? And why has it taken me this long to do it? It’s sooooooo useful(who’d have funk’d it?)

As I’m trying to get more and more into frontend, I wanted to try my hand at making progressive images, and trying to get some sort of lazy loading developed.

From trying to understand this I made…Slimline okay may not be the most fleshed out gem in the world and may…will have loads of bugs, it’s still something eh?

Below is the Readme, please feel free to fork my GitHub, or try the package out for yourself.

Slimline

Gem Version
A small basic helper to allow progressively loading images, Nothing really special this was done more as a test to myself to create a rails gem 🙂

Installation

Add this line to your application’s Gemfile:

gem 'slimline'

And then execute:

$ bundle

Or install it yourself as:

$ gem install slimline

Once installed to make sure that your images still work when javascript isn’t active add the following to the head tag

class="<%= slimline_js_check_class %>"

Then in the <head> section before any css rendering enter:

  <%= slimline_js_check %>

Usage

Now you have installed the about, you will be able to call in the body the slimine_image_tag like:

<%= slimline_image_tag 'test.jpg', width: 1000, small_image: 'test_small.jpg', alt: "Hello World" %>

Below is a crude example how to use this:

<!DOCTYPE html>
 <html class="<%= slimline_js_check_class %>">
  <head>
    <title>Slimline</title>
    <%= csrf_meta_tags %>
    <%= slimline_js_check %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <%= slimline_image_tag 'test.jpg', width: 1000, small_image: 'test_small.jpg', alt: "Hello World" %>
  </body>
 </html>

You are also able to add a srcset tag to the slimline_image_tag that will do srcsets too e.g:

<%= slimline_image_tag 'test.jpg', width: 1000, small_image: 'test_small.jpg', srcset: "<%= image_path 'test_x1.jpg' %> x1, <%= image_path 'test_x2' %> x2 ", alt: "Hello World" %>

Contributing

Tests are my next step in learning, so tests are currently not present.

To contribute, fork, make your change and do a pull request.

License

The gem is available as open source under the terms of the MIT License.

Leave A Comment

Your email address will not be published. Required fields are marked *