Skip to content

Instantly share code, notes, and snippets.

@croxton

croxton/imgix_responsive _images_on_the_fly.md

Last active April 10, 2018 17:57
Show Gist options
  • Save croxton/9cfa0cca85fbb5f135441653a5b1dd9f to your computer and use it in GitHub Desktop.
Save croxton/9cfa0cca85fbb5f135441653a5b1dd9f to your computer and use it in GitHub Desktop.
Download ZIP
Responsive images with imgix.js 3.x
Raw
imgix_responsive _images_on_the_fly.md

These images are being sourced from https://hallmark-design.co.uk, which I have added as a "web folder" source in imgix. Please try it out with your own domain rather than use up my bandwidth :).

<!DOCTYPE html>
<html>

<head>
	<title>Test Imgix</title>
    	
	<!-- imgix config -->
	<meta property="ix:host" content="hallmark.imgix.net">
	<meta property="ix:useHttps" content="true">

	<style>
		body {
			margin:0;
			padding:0;
		}
		.cover {
			min-height: 300px;
			height: 50vh;
			background-repeat: no-repeat;
			background-size:cover;
			background-position: center center;
			background-attachment:scroll;
			overflow: hidden;
		}
		.cover img {
			display: none;
		}
	</style>
	
	<!-- legacy browser support -->
	<script>
		// Picture element HTML5 shiv
		document.createElement( "picture" );
	</script>
	<script src="https://cdn.rawgit.com/scottjehl/picturefill/master/dist/picturefill.min.js" async></script>

</head>

<body>

	<h1>Responsive image</h1>

	    <img
			ix-path="uploads/images/projects/venner_shipley/02_Core_Flexibility.jpg"
			ix-params='{
				"w": 400,
				"h": 200,
				"fit": "crop",
				"crop": "center"
			}'
			sizes="(min-width: 60em) 33.3vw, (min-width: 36em) 66.6vw, 100vw"
			alt="Test"
		>

	<h1>Responsive background image</h1>

	<div class="cover">
	    <img
		id="js-img"
			ix-path="uploads/images/projects/venner_shipley/02_Core_Flexibility.jpg"
			ix-params='{
				"w": 400,
				"h": 200,
				"fit": "crop",
				"crop": "center"
			}'
			sizes="100%"
			alt="Test"
		>
	</div>

	<h1>Responsive art directed image</h1>

	<picture>
		<source
		    media="(min-width: 880px)"
		    sizes="430px"
		    ix-path="uploads/images/projects/venner_shipley/02_Core_Flexibility.jpg"
		    ix-params='{
				"w": 300,
				"h": 300,
				"fit": "crop",
				"crop": "right",
				"flip" : "h"
		    }'
		>
		<source
		    media="(min-width: 640px)"
		    sizes="calc(100vw - 20px - 50%)"
		    ix-path="uploads/images/projects/venner_shipley/02_Core_Flexibility.jpg"
		    ix-params='{
				"w": 300,
				"h": 300,
				"fit": "crop",
				"crop": "center"
		    }'
		>
		<source
		    sizes="100vw"
		    ix-path="uploads/images/projects/venner_shipley/02_Core_Flexibility.jpg"
		    ix-params='{
				"w": 300,
				"h": 100,
				"fit": "crop"
		    }'
		>
		<img ix-path="uploads/images/projects/venner_shipley/02_Core_Flexibility.jpg" alt="Test">
	</picture>

	<!-- @see: https://github.com/imgix/imgix.js -->
    <script src="https://cdn.rawgit.com/imgix/imgix.js/master/dist/imgix.min.js"></script>

    <!-- responsive background image -->
	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>

	var $img = $("#js-img");

		if ($img.length) {

		    // triggered whenever an image is loaded, including on resize
		    $img.load(function(){
		    
			// legacy browser support
			picturefill();

			// fallback to src for browsers without srcset support
			var src = $img.prop('currentSrc') || $img.prop('src');

			// set the background image for the parent 
			var $parent = $img.parent();
			$parent.css('backgroundImage', 'url('+src+')');
		    });
		}

    </script>

</body>

</html>

Images are (c) copyright Hallmarkdesign 2016. All rights reserved.

@ryandeussing
Copy link

Here's background-image code that works with jQuery 3.x

var $img = $("#js-img");
  if ($img.length) {
    // triggered whenever an image is loaded, including on resize
    $img.on('load', function(){

      // legacy browser support
      picturefill();

      // fallback to src for browsers without srcset support
      var src = $img.prop('currentSrc') || $img.prop('src');

      // set the background image for the parent
      var $parent = $img.parent();
      $parent.css('backgroundImage', 'url('+src+')');
    });

@picosam
Copy link

picosam commented May 23, 2017

Interesting. Is this the only way to achieve background "cover" style images in divs using imgix.js? I have an issue with the jquery code, since I'm using angular 4, where it's not very much advised to do so...

@croxton
Copy link
Author

croxton commented Sep 20, 2017 •
edited
Loading

Vanilla js version (not tested)

var img = document.querySelectorAll("#js-img");

if (img !== null) {

    // triggered whenever an image is loaded, including on resize
    img.onload = function(){

        // legacy browser support
        picturefill();

        // fallback to src for browsers without srcset support
        var src = img.currentSrc || img.src;

        // set the background image for the parent
        var parent = img.parentNode;
        var parentStyle = parent.style;
        parentStyle.backgroundImage = 'url('+src+')';
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment