Last Updated on September 21, 2023 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) %>
- link_to – sets up the image as a link
- image_tag – specifies the image. Note, if you put it in the assets/images folder as noted above, then Rails will be able to find it.
- size – you can do some scaling here – remember to keep the proportions the same
- alt – alternative text or text that will show if there is no image or on a mouseover.
- style – the style statement here will remove any extra margins
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 .