Last Updated on November 30, 2019 by Christopher G Mendla
When you are working with Ruby on Rails and run a scaffold, you will have edit and destroy options on each resulting record in the index for that particular scaffold. The edit and destroy links are simply link_to’s that point to the appropriate action. The issue is that the words ‘edit’ and ‘destroy’ or ‘delete’ will sometimes take up some valuable real estate.
You can swap out the standard links with a modest amount of effort and replace them with an icon.
The first task is to find a suitable set of icons such as http://www.123freeicons.com/free-web-development-icons-set/#.VuHGKfkrKUk. Keep the licensing in mind, especially if it is a commercial project.
Edit the files (assuming a knowledge of gimp/photoshop using copy, crop and scale to get the images to about 25×25 and export them as a gif.). In other words, select the icon you want and copy it into a new image of about 25×25 pixels, then crop and export as a .gif.
Put these images in a handy folder so you can use them in all of your projects.
Save the files in the /assets/images folder in your Ruby/Rails project. You can simply copy the files to that folder.
You will need to have the following in your initializersassets.rb
Rails.application.config.assets.precompile += %w[*.png *.jpg *.jpeg *.gif]
This directive will cause rails to precompile the specified assets. The line above has *.gif which will cover us in the case of gifs.
You will need to restart your rails server for the precompile to take affect.
The standard edit link created by Rails scaffolding will look something like:
<%= link_to “edit” edit_post_path(post) %>
The link we will want to use will combine the link and image tag and will be similar to the following.
<%= link_to image_tag(“edit.gif”,size: “20×20”, alt: “Edit post”, :style => “margin: 0px”), edit_post_path(post) %>
When I set this up without the style, there was a 7 pixel margin around the graphics. That made the lines in the resulting table have too much vertical space. The style parameter fixed that problem by removing the margins. Remember that the Inspect function in your browser will help identify solutions for problems like this .
Your email address will not be published. Required fields are marked *
Save my name, email, and website in this browser for the next time I comment.