- In your projects you'll need images to be associated with whatever is included in your marketplace
- We're going to do this using something called Active Storage
- This is built into Rails and you can kind of just follow the docs in terms of getting things to work
- A puppy school management system where you have a visual database of dogs with a name, age and image
- We need an index page to show all dogs, a form to add dogs and a show page for each dog with its image
Create the app
$ rails new puppy-school-managagement-system -d postgresql
$ rails db:create
Add the puppy model
$ rails g model Puppy name:string age:string
Add the puppies controller
$ rails g controller puppies
Follow the rails guide to add the stuff we need for Active Storage.
Remember after all this we have to
$ rails db:migrate
3 different routes:
- Show all puppies (and have form)
- Show 1 puppy
- Create a puppy (post request tied to form)
A puppy has_one_attached :uploaded_image
We need a index, show and create action in our puppies controller.
We also need our puppy_params permitting only name, age and uploaded_image.
For the form we need to remember to include enctype="multipart/form-data"
in the <form>
tag as we're uploading a file.
In our show page we need to use the image_tag
<%= image_tag @puppy.uploaded_image %>
It produces an <img>
html element.
We can also use an if statement to ensure something displays even if a puppy for some reason has no image.
<% if @puppy.uploaded_image.attached? %>
<%= image_tag @puppy.uploaded_image, class: 'image-size' %>
<% else %>
<p>No image for this puppy</p>
<% end %>
- It's a file storage service
- It's part of amazon web services (AWS)
- Create an AWS account
- Make an S3 bucket
- Copy the API keys
- Add them to the
credientials.yml
file via vim
$ EDITOR=/usr/bin/vim rails credentials:edit
$ EDITOR="code --wait" rails credentials:edit
- Change the
storage.yml
file so it includes the correct region and bucket - If you want to you can test AWS in local environment
In your development.rb file change this
config.active_storage.service = :local
to this
config.active_storage.service = :amazon
Now in your show.html.erb change this line
<%= image_tag @puppy.uploaded_image, class: 'image-size' %>
to this
<%= image_tag @puppy.uploaded_image.service_url, class: 'image-size' %>
and then inspect the <img src="">
to see if it includes an amazon link now.
Change your production.rb file to from this
config.active_storage.service = :local
to this
config.active_storage.service = :amazon
as well. When we deploy you can take out the service_url
part. We can test this out later today after the heroku lecture.
- SASS stands for syntactically awesome style sheets
- .scss is just the file extension for SASS
- SASS is really just a new syntax for CSS
- It compiles down to CSS
- Is nesting 🦅
- Lets change our form so that it looks a bit nicer using SASS's nesting
- There's also SASS's own version of CSS variables, partials rely on SASS, and there's other features like mixins and operators that I personally don't use too much
- The SASS guide is an excellent resource if you to refer to docs