Skip to content

Commit

Permalink
Merge pull request scottjehl#449 from bruceontheloose/issue-448
Browse files Browse the repository at this point in the history 
scottjehl#448 - Fixed image filenames in 1st demo (plus a little more)
  • Loading branch information
@Wilto
Wilto committed Mar 5, 2015
2 parents ad306a9 + 209ee32 commit 8a1971b
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 17 deletions.
2 changes: 1 addition & 1 deletion examples/demo-01.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ <h3>An img with "srcset" and sizes" attributes:</h3>
<p>Here's how that renders in the browser. Feel free to resize to see it change.</p>

<img sizes="(min-width: 40em) 80vw, 100vw"
srcset="../examples/images/small.jpg 375w, ../examples/images/large.jpg 480w, ../examples/images/extralarge.jpg 768w" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
srcset="../examples/images/medium.jpg 375w, ../examples/images/large.jpg 480w, ../examples/images/extralarge.jpg 768w" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">

</body>
</html>
2 changes: 1 addition & 1 deletion examples/demo-04.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ <h3 id="types"><code>media</code> example with one webp source qualified with a
<p>
Note: Picturefill can support SVG, WebP, JPEG-XR, JPEG-2000 and APNG types on any source element, and will disregard a <code>source</code> if its type is not supported in a particular environment.
<strong>This option will only work if picturefill is built by setting the <code>support-types</code> grunt task correctly when building picturefill.</strong>
For example, to support all these formats, build picturefill with this grunt task:</strong></p>
For example, to support all these formats, build picturefill with this grunt task:</p>
<pre><code>grunt support-types:svg:webp:jxr:jp2:apng</code></pre>

<p>
Expand Down
31 changes: 16 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,13 +104,13 @@ <h3 id="img-sizes">Using <code>img</code> with <code>srcset</code> &amp; <code>s

<h3>An img with "srcset" and sizes" attributes:</h3>
<pre><code>&lt;img sizes=&quot;(min-width: 40em) 80vw, 100vw&quot;
srcset=&quot;examples/images/medium.jpg 375w, examples/images/medium.jpg 480w, examples/images/large.jpg 768w&quot; alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
srcset=&quot;examples/images/medium.jpg 375w, examples/images/large.jpg 480w, examples/images/extralarge.jpg 768w&quot; alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
</code></pre>

<p>Here's how that renders in the browser. Feel free to resize to see it change.</p>

<img sizes="(min-width: 40em) 80vw, 100vw"
srcset="examples/images/medium.jpg 375w, examples/images/medium.jpg 480w, examples/images/large.jpg 768w" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
srcset="examples/images/medium.jpg 375w, examples/images/large.jpg 480w, examples/images/extralarge.jpg 768w" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">

<p><a href="examples/demo-01.html">View standalone demo</a></p>

Expand Down Expand Up @@ -179,7 +179,8 @@ <h3 id="types"><code>media</code> example with one webp source qualified with a
<p>
Note: Picturefill can support SVG, WebP, JPEG-XR, JPEG-2000 and APNG types on any source element, and will disregard a <code>source</code> if its type is not supported in a particular environment.
<strong>This option will only work if picturefill is built by setting the <code>support-types</code> grunt task correctly when building picturefill.</strong>
For example, to support all these formats, build picturefill with this grunt task:</strong></p>
For example, to support all these formats, build picturefill with this grunt task:
</p>
<pre><code>grunt support-types:jxr:jp2:apng</code></pre>

<p>
Expand All @@ -196,26 +197,26 @@ <h3 id="types"><code>media</code> example with one webp source qualified with a

<pre><code>&lt;picture&gt;
&lt;!--[if IE 9]&gt;&lt;video style="display: none;"&gt;&lt;![endif]--&gt;
&lt;source srcset="../examples/images/large.webp" media="(min-width: 800px)" type="image/webp"&gt;
&lt;source srcset="../examples/images/large.jxr" media="(min-width: 800px)" type="image/vnd.ms-photo"&gt;
&lt;source srcset="../examples/images/large.jp2" media="(min-width: 800px)" type="image/jp2"&gt;
&lt;source srcset="../examples/images/large.jpg" media="(min-width: 800px)"&gt;
&lt;source srcset="../examples/images/medium.jpg" media="(min-width: 400px)"&gt;
&lt;source srcset="examples/images/large.webp" media="(min-width: 800px)" type="image/webp"&gt;
&lt;source srcset="examples/images/large.jxr" media="(min-width: 800px)" type="image/vnd.ms-photo"&gt;
&lt;source srcset="examples/images/large.jp2" media="(min-width: 800px)" type="image/jp2"&gt;
&lt;source srcset="examples/images/large.jpg" media="(min-width: 800px)"&gt;
&lt;source srcset="examples/images/medium.jpg" media="(min-width: 400px)"&gt;
&lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
&lt;img srcset="../examples/images/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"&gt;
&lt;img srcset="examples/images/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"&gt;
&lt;/picture&gt;

</code></pre>

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="../examples/images/large.webp" media="(min-width: 800px)" type="image/webp">
<source srcset="../examples/images/large.jxr" media="(min-width: 800px)" type="image/vnd.ms-photo">
<source srcset="../examples/images/large.jp2" media="(min-width: 800px)" type="image/jp2">
<source srcset="../examples/images/large.jpg" media="(min-width: 800px)">
<source srcset="../examples/images/medium.jpg" media="(min-width: 400px)">
<source srcset="examples/images/large.webp" media="(min-width: 800px)" type="image/webp">
<source srcset="examples/images/large.jxr" media="(min-width: 800px)" type="image/vnd.ms-photo">
<source srcset="examples/images/large.jp2" media="(min-width: 800px)" type="image/jp2">
<source srcset="examples/images/large.jpg" media="(min-width: 800px)">
<source srcset="examples/images/medium.jpg" media="(min-width: 400px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="../examples/images/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<img srcset="examples/images/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

<p><a href="examples/demo-04.html">View standalone demo</a></p>
Expand Down

0 comments on commit 8a1971b

Please sign in to comment.