Skip to content

Instantly share code, notes, and snippets.

Steve Desmond stevedesmond-ca

Block or report user

Report or block stevedesmond-ca

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View custom-templates.css
#custom-templates .empty-message {
padding: 5px 10px;
text-align: center;
stevedesmond-ca / complex.html
Last active Oct 27, 2015
responsive image complex example
View complex.html
<img src="IMG_4880-1280.jpg"
srcset="IMG_4880-0240.jpg 240w,
IMG_4880-0320.jpg 320w,
IMG_4880-0480.jpg 480w,
IMG_4880-0640.jpg 640w,
IMG_4880-0800.jpg 800w,
IMG_4880-0960.jpg 960w,
IMG_4880-1280.jpg 1280w,
IMG_4880-1600.jpg 1600w,
IMG_4880-1920.jpg 1920w,
stevedesmond-ca / index.html
Created Oct 27, 2015
responsive image example
View index.html
<img src="steve-0300.jpg"
srcset="steve-0100.jpg 100w,
steve-0150.jpg 150w,
steve-0200.jpg 200w,
steve-0300.jpg 300w"
sizes="(max-width: 767px) 100px, 150px" />
stevedesmond-ca / 1 ImageController.cs
Last active Oct 27, 2015
server-side responsive images
View 1 ImageController.cs
public FilePathResult Image(int id, int x, int y)
var image = db.Images.First(i => i.ID == id);
var newPath = image.GetFile(imagePath, new Size(x, y));
return File(newPath, "image/jpeg");
stevedesmond-ca / photo.js
Created Oct 27, 2015
server-side responsive images (client-side)
View photo.js
var x = screen.width * window.devicePixelRatio;
var y = screen.height * window.devicePixelRatio;
var url = '/image?id=' + id + '&x=' + x + '&y=' + y;
$('.lightbox').css('background-image', 'url("' + url + '")');
You can’t perform that action at this time.