<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="/stylesheets/rss.css"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/">
  <channel>
    <title>OnMyList Blog: attachment_fu and s3 woes, or how I spent most of Friday</title>
    <link>http://blog.onmylist.com/articles/2007/11/10/attachment_fu-and-s3-woes-or-how-i-spent-most-of-friday</link>
    <language>en-us</language>
    <ttl>40</ttl>
    <description>List your pants off!</description>
    <item>
      <title>attachment_fu and s3 woes, or how I spent most of Friday</title>
      <description>&lt;p&gt;At &lt;span class="caps"&gt;OML&lt;/span&gt; we use Amazon S3 for storage, when we launched the site Gravatar was very unreliable so we had to roll our own with attachment_fu, and it worked fairly well.&lt;/p&gt;


	&lt;p&gt;With our redesign we want to make all avatars square coz the site looks better that way, so I added a JavaScript image cropper to help you crop your uploaded pictures into squares. It didn&amp;#8217;t take long to write and it worked fine in my local development machine. But I was using file_system in attachment_fu locally instead of S3. (Now in retrospect I should&amp;#8217;ve setup my own test bucket on S3)... I switched it to S3 on the beta site and it stopped working, that is, the images don&amp;#8217;t get cropped properly! After about 10 hours of tracing through attachment_fu and trying silly things such as writing my own with_image override in s3_backend.rb, in the end I only had to add a single line and a minor change. Here are the before and after code&amp;#8230;&lt;/p&gt;


	&lt;p&gt;before:&lt;/p&gt;


&lt;div class="typocode"&gt;&lt;pre&gt;&lt;code class="typocode_ruby "&gt;  &lt;span class="keyword"&gt;def &lt;/span&gt;&lt;span class="method"&gt;crop2square&lt;/span&gt;&lt;span class="punct"&gt;(&lt;/span&gt;&lt;span class="ident"&gt;args&lt;/span&gt;&lt;span class="punct"&gt;)&lt;/span&gt;
    &lt;span class="ident"&gt;image2crop&lt;/span&gt; &lt;span class="punct"&gt;=&lt;/span&gt; &lt;span class="ident"&gt;find_or_initialize_thumbnail&lt;/span&gt;&lt;span class="punct"&gt;(&lt;/span&gt;&lt;span class="symbol"&gt;:full&lt;/span&gt;&lt;span class="punct"&gt;)&lt;/span&gt;
    &lt;span class="ident"&gt;image2crop&lt;/span&gt;&lt;span class="punct"&gt;.&lt;/span&gt;&lt;span class="ident"&gt;with_image&lt;/span&gt; &lt;span class="keyword"&gt;do&lt;/span&gt; &lt;span class="punct"&gt;|&lt;/span&gt;&lt;span class="ident"&gt;img&lt;/span&gt;&lt;span class="punct"&gt;|&lt;/span&gt;
      &lt;span class="attribute"&gt;@data&lt;/span&gt; &lt;span class="punct"&gt;=&lt;/span&gt; &lt;span class="ident"&gt;img&lt;/span&gt;&lt;span class="punct"&gt;.&lt;/span&gt;&lt;span class="ident"&gt;crop&lt;/span&gt;&lt;span class="punct"&gt;(&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;&lt;span class="expr"&gt;#{args[:width]}&lt;/span&gt;x&lt;span class="expr"&gt;#{args[:height]}&lt;/span&gt;+&lt;span class="expr"&gt;#{args[:x1]}&lt;/span&gt;+&lt;span class="expr"&gt;#{args[:y1]}&lt;/span&gt;&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;)&lt;/span&gt;
    &lt;span class="keyword"&gt;end&lt;/span&gt;
    &lt;span class="ident"&gt;attachment_options&lt;/span&gt;&lt;span class="punct"&gt;[&lt;/span&gt;&lt;span class="symbol"&gt;:thumbnails&lt;/span&gt;&lt;span class="punct"&gt;].&lt;/span&gt;&lt;span class="ident"&gt;each&lt;/span&gt; &lt;span class="punct"&gt;{&lt;/span&gt; &lt;span class="punct"&gt;|&lt;/span&gt;&lt;span class="ident"&gt;suffix&lt;/span&gt;&lt;span class="punct"&gt;,&lt;/span&gt; &lt;span class="ident"&gt;size&lt;/span&gt;&lt;span class="punct"&gt;|&lt;/span&gt; &lt;span class="ident"&gt;create_or_update_thumbnail&lt;/span&gt;&lt;span class="punct"&gt;(&lt;/span&gt;&lt;span class="attribute"&gt;@data&lt;/span&gt;&lt;span class="punct"&gt;,&lt;/span&gt; &lt;span class="ident"&gt;suffix&lt;/span&gt;&lt;span class="punct"&gt;,&lt;/span&gt; &lt;span class="punct"&gt;*&lt;/span&gt;&lt;span class="ident"&gt;size&lt;/span&gt;&lt;span class="punct"&gt;)&lt;/span&gt; &lt;span class="punct"&gt;}&lt;/span&gt;
  &lt;span class="keyword"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

	&lt;p&gt;after:&lt;/p&gt;


&lt;div class="typocode"&gt;&lt;pre&gt;&lt;code class="typocode_ruby "&gt;  &lt;span class="keyword"&gt;def &lt;/span&gt;&lt;span class="method"&gt;crop2square&lt;/span&gt;&lt;span class="punct"&gt;(&lt;/span&gt;&lt;span class="ident"&gt;args&lt;/span&gt;&lt;span class="punct"&gt;)&lt;/span&gt;
    &lt;span class="ident"&gt;image2crop&lt;/span&gt; &lt;span class="punct"&gt;=&lt;/span&gt; &lt;span class="ident"&gt;find_or_initialize_thumbnail&lt;/span&gt;&lt;span class="punct"&gt;(&lt;/span&gt;&lt;span class="symbol"&gt;:full&lt;/span&gt;&lt;span class="punct"&gt;)&lt;/span&gt;
    &lt;span class="ident"&gt;image2crop&lt;/span&gt;&lt;span class="punct"&gt;.&lt;/span&gt;&lt;span class="ident"&gt;temp_path&lt;/span&gt; &lt;span class="punct"&gt;=&lt;/span&gt; &lt;span class="ident"&gt;image2crop&lt;/span&gt;&lt;span class="punct"&gt;.&lt;/span&gt;&lt;span class="ident"&gt;create_temp_file&lt;/span&gt;
    &lt;span class="ident"&gt;image2crop&lt;/span&gt;&lt;span class="punct"&gt;.&lt;/span&gt;&lt;span class="ident"&gt;with_image&lt;/span&gt; &lt;span class="keyword"&gt;do&lt;/span&gt; &lt;span class="punct"&gt;|&lt;/span&gt;&lt;span class="ident"&gt;img&lt;/span&gt;&lt;span class="punct"&gt;|&lt;/span&gt;
      &lt;span class="attribute"&gt;@data&lt;/span&gt; &lt;span class="punct"&gt;=&lt;/span&gt; &lt;span class="ident"&gt;img&lt;/span&gt;&lt;span class="punct"&gt;.&lt;/span&gt;&lt;span class="ident"&gt;crop&lt;/span&gt;&lt;span class="punct"&gt;(&amp;quot;&lt;/span&gt;&lt;span class="string"&gt;&lt;span class="expr"&gt;#{args[:width]}&lt;/span&gt;x&lt;span class="expr"&gt;#{args[:height]}&lt;/span&gt;+&lt;span class="expr"&gt;#{args[:x1]}&lt;/span&gt;+&lt;span class="expr"&gt;#{args[:y1]}&lt;/span&gt;&lt;/span&gt;&lt;span class="punct"&gt;&amp;quot;)&lt;/span&gt;
    &lt;span class="keyword"&gt;end&lt;/span&gt;
    &lt;span class="ident"&gt;attachment_options&lt;/span&gt;&lt;span class="punct"&gt;[&lt;/span&gt;&lt;span class="symbol"&gt;:thumbnails&lt;/span&gt;&lt;span class="punct"&gt;].&lt;/span&gt;&lt;span class="ident"&gt;each&lt;/span&gt; &lt;span class="punct"&gt;{&lt;/span&gt; &lt;span class="punct"&gt;|&lt;/span&gt;&lt;span class="ident"&gt;suffix&lt;/span&gt;&lt;span class="punct"&gt;,&lt;/span&gt; &lt;span class="ident"&gt;size&lt;/span&gt;&lt;span class="punct"&gt;|&lt;/span&gt; &lt;span class="ident"&gt;create_or_update_thumbnail&lt;/span&gt;&lt;span class="punct"&gt;(&lt;/span&gt;&lt;span class="attribute"&gt;@data&lt;/span&gt;&lt;span class="punct"&gt;.&lt;/span&gt;&lt;span class="ident"&gt;path&lt;/span&gt;&lt;span class="punct"&gt;,&lt;/span&gt; &lt;span class="ident"&gt;suffix&lt;/span&gt;&lt;span class="punct"&gt;,&lt;/span&gt; &lt;span class="punct"&gt;*&lt;/span&gt;&lt;span class="ident"&gt;size&lt;/span&gt;&lt;span class="punct"&gt;)&lt;/span&gt; &lt;span class="punct"&gt;}&lt;/span&gt;
  &lt;span class="keyword"&gt;end&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;

	&lt;p&gt;I don&amp;#8217;t really feel like explaining why this works right now, and if you&amp;#8217;re having the same problem I&amp;#8217;m sure you won&amp;#8217;t care either and you just want to copy and paste the code and move onto your next problem.&lt;/p&gt;


	&lt;p&gt;Hope this helps&amp;#8230;&lt;/p&gt;</description>
      <pubDate>Sat, 10 Nov 2007 04:32:00 -0500</pubDate>
      <guid isPermaLink="false">urn:uuid:6ac49798-431b-4601-bca0-9feb946e29d6</guid>
      <author>Andrew</author>
      <link>http://blog.onmylist.com/articles/2007/11/10/attachment_fu-and-s3-woes-or-how-i-spent-most-of-friday</link>
      <category>Ruby on Rails</category>
      <category>attachment_fu</category>
      <category>amazon</category>
      <category>s3</category>
      <category>ec2</category>
      <category>aws</category>
      <category>ruby</category>
      <category>RoR</category>
      <category>rubyonrails</category>
      <category>rails</category>
      <category>crop</category>
      <category>javascript</category>
      <trackback:ping>http://blog.onmylist.com/articles/trackback/29</trackback:ping>
    </item>
    <item>
      <title>"attachment_fu and s3 woes, or how I spent most of Friday" by DDDDepressionnnn</title>
      <description>Depression Depression Depression aaaaaaaa
HEEEEELP :( :( :(
I hate winter! I want summer!</description>
      <pubDate>Thu, 20 Nov 2008 21:18:56 -0500</pubDate>
      <guid isPermaLink="false">urn:uuid:82074047-48d3-4d83-b502-b06b72b98c07</guid>
      <link>http://blog.onmylist.com/articles/2007/11/10/attachment_fu-and-s3-woes-or-how-i-spent-most-of-friday#comment-46675</link>
    </item>
    <item>
      <title>"attachment_fu and s3 woes, or how I spent most of Friday" by DDDepressionnn</title>
      <description>There has come winter :(
It became cold and cloudy! 
Mood very bad :(
Depression Begins</description>
      <pubDate>Thu, 20 Nov 2008 13:29:11 -0500</pubDate>
      <guid isPermaLink="false">urn:uuid:d88800f9-9b0e-4677-9796-5ffed9805976</guid>
      <link>http://blog.onmylist.com/articles/2007/11/10/attachment_fu-and-s3-woes-or-how-i-spent-most-of-friday#comment-46571</link>
    </item>
    <item>
      <title>"attachment_fu and s3 woes, or how I spent most of Friday" by Carl Youngblood</title>
      <description>Care to post your javascript cropper?  That would be very handy, if you are able to share it.</description>
      <pubDate>Mon, 22 Sep 2008 18:37:22 -0400</pubDate>
      <guid isPermaLink="false">urn:uuid:b5b24cb4-ed9f-4c26-9913-6611beeb46d0</guid>
      <link>http://blog.onmylist.com/articles/2007/11/10/attachment_fu-and-s3-woes-or-how-i-spent-most-of-friday#comment-32499</link>
    </item>
    <item>
      <title>"attachment_fu and s3 woes, or how I spent most of Friday" by David Furber</title>
      <description>THANK YOU!!!

For those of you using the Kropper application, add this line to the crop! method:

self.temp_path = self.create_temp_file

Put it right before the comment:
    # call the appropriate crop method for the image processor we're using with attachment_fu

Thanks again you saved me hours of attachment_fu debugging hell!</description>
      <pubDate>Sat, 19 Apr 2008 15:04:58 -0400</pubDate>
      <guid isPermaLink="false">urn:uuid:839ca015-680b-4185-b6cb-cef524cfbd6c</guid>
      <link>http://blog.onmylist.com/articles/2007/11/10/attachment_fu-and-s3-woes-or-how-i-spent-most-of-friday#comment-13783</link>
    </item>
    <item>
      <title>"attachment_fu and s3 woes, or how I spent most of Friday" by wilson</title>
      <description>hey,
where you have     attachment_options[:thumbnails].each { |suffix, size| create_or_update_thumbnail(@data.path, suffix, *size) }


I'm getting an error at the path reference:
NoMethodError Exception: undefined method `path' for #

when i run the debugger
(rdb:1) p @data
[CORRECT_FILENAME_HERE]= PNG 57x64=1x1 DirectClass 16-bit 643b

It shows the right file but the path method isn't defined.. I'm using Rmagick 2.0

Any ideas?</description>
      <pubDate>Tue, 15 Apr 2008 00:04:21 -0400</pubDate>
      <guid isPermaLink="false">urn:uuid:0a90f892-12c6-40cc-94ef-af948f70d2a1</guid>
      <link>http://blog.onmylist.com/articles/2007/11/10/attachment_fu-and-s3-woes-or-how-i-spent-most-of-friday#comment-12935</link>
    </item>
  </channel>
</rss>
