Get @jbuckle app front-end image sizes (thumbnails)

[bassettsj]

.thumbnail-s1{
 width: 85px;
 height: 85px;
}

.thumbnail-s1-2x,
.thumbnail-s2{
 width: 170px;
 height: 170px;
}

.thumbnail-span2-2x{
 height: 340px;
 width: 340px;
}

.thumbnail-s4{
 height: auto;
 width: 340px;
}

.thumbnail-s4-2x{
 height: auto;
 width: 680px;
}

.thumbnail-s10{
 width: 970px;
 height: auto;
}

.thumbnail-s10-2x{
 width: 1940px;
 height: auto;
}

[bassettsj]

.thumbnail-s1

.thumbnail-s1-2x, .thumbnail-s2

.thumbnail-s2-2x

.thumbnail-s4

.thumbnail-s4-2x

.thumbnail-s10

.thumbnail-s10-2x

[bassettsj]

picturefill-rails might be a good view helper to provide our responsive images needs.

[bassettsj]

 <span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
        <span data-src="small.jpg"></span>
        <span data-src="small_x2.jpg"      data-media="(min-device-pixel-ratio: 2.0)"></span>
        <span data-src="medium.jpg"        data-media="(min-width: 400px)"></span>
        <span data-src="medium_x2.jpg"     data-media="(min-width: 400px) and (min-device-pixel-ratio: 2.0)"></span>
        <span data-src="large.jpg"         data-media="(min-width: 800px)"></span>
        <span data-src="large_x2.jpg"      data-media="(min-width: 800px) and (min-device-pixel-ratio: 2.0)"></span>
        <span data-src="extralarge.jpg"    data-media="(min-width: 1000px)"></span>
        <span data-src="extralarge_x2.jpg" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></span>

        <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
        <noscript>
            <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
        </noscript>
</span>

[bassettsj]

Content Workflow

Images

Images get ALL the possible derivatives, but we would never scale up.

So if someone deposits an images that is 500px wide, we can only make .thumbnail-span2, .thumbnail-span2-2x & .thumbnail-span4 images.

PDF DOC cover images and Video poster images

Anything that falls would just generate an image from the cover should only generate these sizes.

.thumbnail-span2
.thumbnail-span2-2x
.thumbnail-span4
.thumbnail-span4-2x

[bassettsj]

For the .thumbnail-span2 and .thumbnail-span2-2x styles I think we would want to use the resize_to_fill RMagick method. Everything else would be resize_to_fit(new_width)

If we can use progressive jpegs would be best as well, they give the illusion of better performance.

[bassettsj]

@jbuckle Let me know if you need any clarification! I think all the sizes will allow us to grow in the future and also provide responsive images for better performance on smaller viewports.

[jbuckle]

I'll have to look into creating progressive jpegs, but other than that all of this should be doable. How urgently do you need it?

[jbuckle]

http://www.graphicsmagick.org/Magick++/Image.html#interlacetype I think this is what we want for generating progressive jpegs, which comes out to -> http://stackoverflow.com/questions/9682059/interlaced-image-with-rmagick something like this for actually implementing it.

[bassettsj]

@jbuckle I had to add one small one as well since the .thumbnail-s2 was just slightly too big.