צרי Thumbnails עם Carrierwave

נוצר ע”י Miha Filej, @mfilej

מדריך: הסבר מה קורה כאשר מגדירים רוחב לתמונה ב-HTML בסוף שלב 4, ומה ההבדל בין זה לבין resize של התמונה על השרת.

התקנת ImageMagick

מדריך: מה זה ImageMagick ואיך זה שונה מספריות/ג’מים שהשתמשנו בהם קודם?

פתחי את Gemfile בפרוייקט והוסיפי לו:

gem 'mini_magick', '3.8.0'

מתחת לשורה:

gem 'carrierwave'

בטרמיניל הריצי:

bundle

אמרי לאפליקציה שלך ליצור thumbnails כשמעלים תמונה

פתחי את app/uploaders/picture_uploader.rb ומצאי את השורה שנראית ככה:

# include CarrierWave::MiniMagick

הסירי את סימן ה #.

מדריך: הסבר את הקונספט של הערות בקוד.

מתחת לשורה שהרגע שינית, הוסיפי:

version :thumb do
  process :resize_to_fill => [50, 50]
end

התמונות שנעלה מעכשיו אמורות לעבור resize, אבל אלה שכבר העלנו לא השתנו. אז ערכי את אחד הרעיונות הקיימים והוסיפי מחדש את התמונה שלו.

הצגת ה-thumbnails

כדי לראות אם התמונה שהועלתה אכן עברה resize פתחי את app/views/ideas/index.html.erb. שני את השורה:

<td><%= idea.picture %></td>

ל-

<td><%= image_tag idea.picture_url(:thumb) if idea.picture? %></td>

הסתכלי ברשימת הרעיונות בדפדפן כדי לראות אם ה-thumbnail באמת נמצא שם.