캐리어웨이브 젬으로 썸네일 미리보기 만들기
Created by Miha Filej, @mfilej
Coach: 4단계에서 HTML의 이미지 가로 크기를 정하는 것을 설명하고 서버에 있는 이미지의 크기를 줄이는 것이 HTML의 크기를 정하는 것과 어떻게 다른지 설명하세요.
1.Installing ImageMagick
- 맥:
brew install imagemagick
실행합니다. 브류 명령을 실행하지 못하면 홈브류를 여기서 설치할 수 있습니다. - 윈도우즈: 이미지매직 인스톨러를 내려받아서 실행합니다(use the first download link).
-
리눅스: 우분투 또는 데비안에서
sudo apt-get install imagemagick
를 실행합니다. 다른 배포판에서는apt-get
대신에 다른 패키지 매니저를 사용합니다.
Coach: 이미지매직이 무엇인지 설명하고 앞서 설치한 다른 라이브러리나 젬과 어떻게 다른지 설명하세요. used before?
프로젝트의 Gemfile
을 수정합니다.
gem 'mini_magick', '3.8.0'
을 캐리어 웨이브 젬 아래에 추가합니다.
gem 'carrierwave'
터미널에서 아래와 같이 실행합니다:
bundle
2.Telling our app to create thumbnails when an image is uploaded
app/uploaders/picture_uploader.rb
파일을 아래와 같이 수정합니다:
# include CarrierWave::MiniMagick
주석 #
표시를 지웁니다.
Coach: 코드의 주석에 대해 설명하세요.
주석을 지운 줄 아래에 다음과 같이 추가합니다:
version :thumb do
process :resize_to_fill => [50, 50]
end
이후로 업로드한 이미지는 크기를 줄어듭니다. 그러나 이미 올려둔 파일은 크기가 바뀌지 않기때문에 이미 등록한 아이디어에 다시 사진을 추가합니다.
3.Displaying the thumbnails
업로드한 사진 크기가 줄어들었는지 확인하려면
app/views/ideas/index.html.erb
파일을 수정합니다.
<td><%= idea.picture %></td>
를 아래와 같이 수정합니다.
<td><%= image_tag idea.picture_url(:thumb) if idea.picture? %></td>
아이디어 전체 목록에서 썸네일 이미지가 보이는지 확인합니다.