deac/middleman
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
middleman/middleman-core/fixtures/asset-hash-app/source/index.html.erb

315 lines
13 KiB
Plaintext
Raw Normal View History

Extension to add hash values to asset filenames. This extension causes asset file types (images, scripts, stylesheets, etc) to have a unique identifier appended to their filename that consists of a hash of their contents. This extension also includes a Rack middleware that rewrites references to these assets in HTML, JavaScript, and CSS files, eliminating the need to use special helper functions to include modified filenames in references.
2012-03-05 00:24:38 +01:00
<% content_for :head do %>
<title>The Middleman!</title>
<% end %>
<h2>Image url:</h2>
Asset hashing for image references in srcset Fixes #1287
2014-11-16 21:25:28 +01:00
<img src="<%= image_path('100px.jpg') %>" srcset="<%= image_path('100px.jpg') %> 1x, <%= image_path('200px.jpg') %> 2x, <%= image_path('300px.jpg') %> 3x">
Fix asset hash with query string or hash params. Closes #1411
2015-12-21 22:07:01 +01:00
<%= image_tag('100px.jpg?test') %>
<%= image_tag('100px.jpg?#test') %>
<%= image_tag('100px.jpg#test') %>
Extension to add hash values to asset filenames. This extension causes asset file types (images, scripts, stylesheets, etc) to have a unique identifier appended to their filename that consists of a hash of their contents. This extension also includes a Rack middleware that rewrites references to these assets in HTML, JavaScript, and CSS files, eliminating the need to use special helper functions to include modified filenames in references.
2012-03-05 00:24:38 +01:00
Implement and test asset_hash ignore option
2012-05-27 00:08:59 +02:00
<h2>Ignored path:</h2>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Extension to add hash values to asset filenames. This extension causes asset file types (images, scripts, stylesheets, etc) to have a unique identifier appended to their filename that consists of a hash of their contents. This extension also includes a Rack middleware that rewrites references to these assets in HTML, JavaScript, and CSS files, eliminating the need to use special helper functions to include modified filenames in references.
2012-03-05 00:24:38 +01:00
<h2>Autogenerated tests:</h2>
<p>images/100px.jpg</p>
<p>/images/100px.jpg</p>
<p>../images/100px.jpg</p>
<p>../../images/100px.jpg</p>
<p>../../../images/100px.jpg</p>
<p>http://example.com/images/100px.jpg</p>
<p>aimages/100px.jpga</p>
<p>1images/100px.jpg1</p>
<p>.images/100px.jpg.</p>
<p>-images/100px.jpg-</p>
<p>_images/100px.jpg_</p>
<p>'images/100px.jpg'</p>
<p>'/images/100px.jpg'</p>
<p>'../images/100px.jpg'</p>
<p>'../../images/100px.jpg'</p>
<p>'../../../images/100px.jpg'</p>
<p>'http://example.com/images/100px.jpg'</p>
<p>'aimages/100px.jpga'</p>
<p>'1images/100px.jpg1'</p>
<p>'.images/100px.jpg.'</p>
<p>'-images/100px.jpg-'</p>
<p>'_images/100px.jpg_'</p>
<p>"images/100px.jpg"</p>
<p>"/images/100px.jpg"</p>
<p>"../images/100px.jpg"</p>
<p>"../../images/100px.jpg"</p>
<p>"../../../images/100px.jpg"</p>
<p>"http://example.com/images/100px.jpg"</p>
<p>"aimages/100px.jpga"</p>
<p>"1images/100px.jpg1"</p>
<p>".images/100px.jpg."</p>
<p>"-images/100px.jpg-"</p>
<p>"_images/100px.jpg_"</p>
<p>&lt;img src=images/100px.jpg /&gt;</p>
<p>&lt;img src=/images/100px.jpg /&gt;</p>
<p>&lt;img src=../images/100px.jpg /&gt;</p>
<p>&lt;img src=../../images/100px.jpg /&gt;</p>
<p>&lt;img src=../../../images/100px.jpg /&gt;</p>
<p>&lt;img src=http://example.com/images/100px.jpg /&gt;</p>
<p>&lt;img src=aimages/100px.jpga /&gt;</p>
<p>&lt;img src=1images/100px.jpg1 /&gt;</p>
<p>&lt;img src=.images/100px.jpg. /&gt;</p>
<p>&lt;img src=-images/100px.jpg- /&gt;</p>
<p>&lt;img src=_images/100px.jpg_ /&gt;</p>
<p>&lt;img src='images/100px.jpg' /&gt;</p>
<p>&lt;img src='/images/100px.jpg' /&gt;</p>
<p>&lt;img src='../images/100px.jpg' /&gt;</p>
<p>&lt;img src='../../images/100px.jpg' /&gt;</p>
<p>&lt;img src='../../../images/100px.jpg' /&gt;</p>
<p>&lt;img src='http://example.com/images/100px.jpg' /&gt;</p>
<p>&lt;img src='aimages/100px.jpga' /&gt;</p>
<p>&lt;img src='1images/100px.jpg1' /&gt;</p>
<p>&lt;img src='.images/100px.jpg.' /&gt;</p>
<p>&lt;img src='-images/100px.jpg-' /&gt;</p>
<p>&lt;img src='_images/100px.jpg_' /&gt;</p>
<p>&lt;img src="images/100px.jpg" /&gt;</p>
<p>&lt;img src="/images/100px.jpg" /&gt;</p>
<p>&lt;img src="../images/100px.jpg" /&gt;</p>
<p>&lt;img src="../../images/100px.jpg" /&gt;</p>
<p>&lt;img src="../../../images/100px.jpg" /&gt;</p>
<p>&lt;img src="http://example.com/images/100px.jpg" /&gt;</p>
<p>&lt;img src="aimages/100px.jpga" /&gt;</p>
<p>&lt;img src="1images/100px.jpg1" /&gt;</p>
<p>&lt;img src=".images/100px.jpg." /&gt;</p>
<p>&lt;img src="-images/100px.jpg-" /&gt;</p>
<p>&lt;img src="_images/100px.jpg_" /&gt;</p>
<p>background-image:url(images/100px.jpg);</p>
<p>background-image:url(/images/100px.jpg);</p>
<p>background-image:url(../images/100px.jpg);</p>
<p>background-image:url(../../images/100px.jpg);</p>
<p>background-image:url(../../../images/100px.jpg);</p>
<p>background-image:url(http://example.com/images/100px.jpg);</p>
<p>background-image:url(aimages/100px.jpga);</p>
<p>background-image:url(1images/100px.jpg1);</p>
<p>background-image:url(.images/100px.jpg.);</p>
<p>background-image:url(-images/100px.jpg-);</p>
<p>background-image:url(_images/100px.jpg_);</p>
<p>background-image:url('images/100px.jpg');</p>
<p>background-image:url('/images/100px.jpg');</p>
<p>background-image:url('../images/100px.jpg');</p>
<p>background-image:url('../../images/100px.jpg');</p>
<p>background-image:url('../../../images/100px.jpg');</p>
<p>background-image:url('http://example.com/images/100px.jpg');</p>
<p>background-image:url('aimages/100px.jpga');</p>
<p>background-image:url('1images/100px.jpg1');</p>
<p>background-image:url('.images/100px.jpg.');</p>
<p>background-image:url('-images/100px.jpg-');</p>
<p>background-image:url('_images/100px.jpg_');</p>
<p>background-image:url("images/100px.jpg");</p>
<p>background-image:url("/images/100px.jpg");</p>
<p>background-image:url("../images/100px.jpg");</p>
<p>background-image:url("../../images/100px.jpg");</p>
<p>background-image:url("../../../images/100px.jpg");</p>
<p>background-image:url("http://example.com/images/100px.jpg");</p>
<p>background-image:url("aimages/100px.jpga");</p>
<p>background-image:url("1images/100px.jpg1");</p>
<p>background-image:url(".images/100px.jpg.");</p>
<p>background-image:url("-images/100px.jpg-");</p>
<p>background-image:url("_images/100px.jpg_");</p>
<br /><br /><br />
<p>images/100px.png</p>
<p>/images/100px.png</p>
<p>../images/100px.png</p>
<p>../../images/100px.png</p>
<p>../../../images/100px.png</p>
<p>http://example.com/images/100px.png</p>
<p>aimages/100px.pnga</p>
<p>1images/100px.png1</p>
<p>.images/100px.png.</p>
<p>-images/100px.png-</p>
<p>_images/100px.png_</p>
<p>'images/100px.png'</p>
<p>'/images/100px.png'</p>
<p>'../images/100px.png'</p>
<p>'../../images/100px.png'</p>
<p>'../../../images/100px.png'</p>
<p>'http://example.com/images/100px.png'</p>
<p>'aimages/100px.pnga'</p>
<p>'1images/100px.png1'</p>
<p>'.images/100px.png.'</p>
<p>'-images/100px.png-'</p>
<p>'_images/100px.png_'</p>
<p>"images/100px.png"</p>
<p>"/images/100px.png"</p>
<p>"../images/100px.png"</p>
<p>"../../images/100px.png"</p>
<p>"../../../images/100px.png"</p>
<p>"http://example.com/images/100px.png"</p>
<p>"aimages/100px.pnga"</p>
<p>"1images/100px.png1"</p>
<p>".images/100px.png."</p>
<p>"-images/100px.png-"</p>
<p>"_images/100px.png_"</p>
<p>&lt;img src=images/100px.png /&gt;</p>
<p>&lt;img src=/images/100px.png /&gt;</p>
<p>&lt;img src=../images/100px.png /&gt;</p>
<p>&lt;img src=../../images/100px.png /&gt;</p>
<p>&lt;img src=../../../images/100px.png /&gt;</p>
<p>&lt;img src=http://example.com/images/100px.png /&gt;</p>
<p>&lt;img src=aimages/100px.pnga /&gt;</p>
<p>&lt;img src=1images/100px.png1 /&gt;</p>
<p>&lt;img src=.images/100px.png. /&gt;</p>
<p>&lt;img src=-images/100px.png- /&gt;</p>
<p>&lt;img src=_images/100px.png_ /&gt;</p>
<p>&lt;img src='images/100px.png' /&gt;</p>
<p>&lt;img src='/images/100px.png' /&gt;</p>
<p>&lt;img src='../images/100px.png' /&gt;</p>
<p>&lt;img src='../../images/100px.png' /&gt;</p>
<p>&lt;img src='../../../images/100px.png' /&gt;</p>
<p>&lt;img src='http://example.com/images/100px.png' /&gt;</p>
<p>&lt;img src='aimages/100px.pnga' /&gt;</p>
<p>&lt;img src='1images/100px.png1' /&gt;</p>
<p>&lt;img src='.images/100px.png.' /&gt;</p>
<p>&lt;img src='-images/100px.png-' /&gt;</p>
<p>&lt;img src='_images/100px.png_' /&gt;</p>
<p>&lt;img src="images/100px.png" /&gt;</p>
<p>&lt;img src="/images/100px.png" /&gt;</p>
<p>&lt;img src="../images/100px.png" /&gt;</p>
<p>&lt;img src="../../images/100px.png" /&gt;</p>
<p>&lt;img src="../../../images/100px.png" /&gt;</p>
<p>&lt;img src="http://example.com/images/100px.png" /&gt;</p>
<p>&lt;img src="aimages/100px.pnga" /&gt;</p>
<p>&lt;img src="1images/100px.png1" /&gt;</p>
<p>&lt;img src=".images/100px.png." /&gt;</p>
<p>&lt;img src="-images/100px.png-" /&gt;</p>
<p>&lt;img src="_images/100px.png_" /&gt;</p>
<p>background-image:url(images/100px.png);</p>
<p>background-image:url(/images/100px.png);</p>
<p>background-image:url(../images/100px.png);</p>
<p>background-image:url(../../images/100px.png);</p>
<p>background-image:url(../../../images/100px.png);</p>
<p>background-image:url(http://example.com/images/100px.png);</p>
<p>background-image:url(aimages/100px.pnga);</p>
<p>background-image:url(1images/100px.png1);</p>
<p>background-image:url(.images/100px.png.);</p>
<p>background-image:url(-images/100px.png-);</p>
<p>background-image:url(_images/100px.png_);</p>
<p>background-image:url('images/100px.png');</p>
<p>background-image:url('/images/100px.png');</p>
<p>background-image:url('../images/100px.png');</p>
<p>background-image:url('../../images/100px.png');</p>
<p>background-image:url('../../../images/100px.png');</p>
<p>background-image:url('http://example.com/images/100px.png');</p>
<p>background-image:url('aimages/100px.pnga');</p>
<p>background-image:url('1images/100px.png1');</p>
<p>background-image:url('.images/100px.png.');</p>
<p>background-image:url('-images/100px.png-');</p>
<p>background-image:url('_images/100px.png_');</p>
<p>background-image:url("images/100px.png");</p>
<p>background-image:url("/images/100px.png");</p>
<p>background-image:url("../images/100px.png");</p>
<p>background-image:url("../../images/100px.png");</p>
<p>background-image:url("../../../images/100px.png");</p>
<p>background-image:url("http://example.com/images/100px.png");</p>
<p>background-image:url("aimages/100px.pnga");</p>
<p>background-image:url("1images/100px.png1");</p>
<p>background-image:url(".images/100px.png.");</p>
<p>background-image:url("-images/100px.png-");</p>
<p>background-image:url("_images/100px.png_");</p>
<br /><br /><br />
<p>images/100px.gif</p>
<p>/images/100px.gif</p>
<p>../images/100px.gif</p>
<p>../../images/100px.gif</p>
<p>../../../images/100px.gif</p>
<p>http://example.com/images/100px.gif</p>
<p>aimages/100px.gifa</p>
<p>1images/100px.gif1</p>
<p>.images/100px.gif.</p>
<p>-images/100px.gif-</p>
<p>_images/100px.gif_</p>
<p>'images/100px.gif'</p>
<p>'/images/100px.gif'</p>
<p>'../images/100px.gif'</p>
<p>'../../images/100px.gif'</p>
<p>'../../../images/100px.gif'</p>
<p>'http://example.com/images/100px.gif'</p>
<p>'aimages/100px.gifa'</p>
<p>'1images/100px.gif1'</p>
<p>'.images/100px.gif.'</p>
<p>'-images/100px.gif-'</p>
<p>'_images/100px.gif_'</p>
<p>"images/100px.gif"</p>
<p>"/images/100px.gif"</p>
<p>"../images/100px.gif"</p>
<p>"../../images/100px.gif"</p>
<p>"../../../images/100px.gif"</p>
<p>"http://example.com/images/100px.gif"</p>
<p>"aimages/100px.gifa"</p>
<p>"1images/100px.gif1"</p>
<p>".images/100px.gif."</p>
<p>"-images/100px.gif-"</p>
<p>"_images/100px.gif_"</p>
<p>&lt;img src=images/100px.gif /&gt;</p>
<p>&lt;img src=/images/100px.gif /&gt;</p>
<p>&lt;img src=../images/100px.gif /&gt;</p>
<p>&lt;img src=../../images/100px.gif /&gt;</p>
<p>&lt;img src=../../../images/100px.gif /&gt;</p>
<p>&lt;img src=http://example.com/images/100px.gif /&gt;</p>
<p>&lt;img src=aimages/100px.gifa /&gt;</p>
<p>&lt;img src=1images/100px.gif1 /&gt;</p>
<p>&lt;img src=.images/100px.gif. /&gt;</p>
<p>&lt;img src=-images/100px.gif- /&gt;</p>
<p>&lt;img src=_images/100px.gif_ /&gt;</p>
<p>&lt;img src='images/100px.gif' /&gt;</p>
<p>&lt;img src='/images/100px.gif' /&gt;</p>
<p>&lt;img src='../images/100px.gif' /&gt;</p>
<p>&lt;img src='../../images/100px.gif' /&gt;</p>
<p>&lt;img src='../../../images/100px.gif' /&gt;</p>
<p>&lt;img src='http://example.com/images/100px.gif' /&gt;</p>
<p>&lt;img src='aimages/100px.gifa' /&gt;</p>
<p>&lt;img src='1images/100px.gif1' /&gt;</p>
<p>&lt;img src='.images/100px.gif.' /&gt;</p>
<p>&lt;img src='-images/100px.gif-' /&gt;</p>
<p>&lt;img src='_images/100px.gif_' /&gt;</p>
<p>&lt;img src="images/100px.gif" /&gt;</p>
<p>&lt;img src="/images/100px.gif" /&gt;</p>
<p>&lt;img src="../images/100px.gif" /&gt;</p>
<p>&lt;img src="../../images/100px.gif" /&gt;</p>
<p>&lt;img src="../../../images/100px.gif" /&gt;</p>
<p>&lt;img src="http://example.com/images/100px.gif" /&gt;</p>
<p>&lt;img src="aimages/100px.gifa" /&gt;</p>
<p>&lt;img src="1images/100px.gif1" /&gt;</p>
<p>&lt;img src=".images/100px.gif." /&gt;</p>
<p>&lt;img src="-images/100px.gif-" /&gt;</p>
<p>&lt;img src="_images/100px.gif_" /&gt;</p>
<p>background-image:url(images/100px.gif);</p>
<p>background-image:url(/images/100px.gif);</p>
<p>background-image:url(../images/100px.gif);</p>
<p>background-image:url(../../images/100px.gif);</p>
<p>background-image:url(../../../images/100px.gif);</p>
<p>background-image:url(http://example.com/images/100px.gif);</p>
<p>background-image:url(aimages/100px.gifa);</p>
<p>background-image:url(1images/100px.gif1);</p>
<p>background-image:url(.images/100px.gif.);</p>
<p>background-image:url(-images/100px.gif-);</p>
<p>background-image:url(_images/100px.gif_);</p>
<p>background-image:url('images/100px.gif');</p>
<p>background-image:url('/images/100px.gif');</p>
<p>background-image:url('../images/100px.gif');</p>
<p>background-image:url('../../images/100px.gif');</p>
<p>background-image:url('../../../images/100px.gif');</p>
<p>background-image:url('http://example.com/images/100px.gif');</p>
<p>background-image:url('aimages/100px.gifa');</p>
<p>background-image:url('1images/100px.gif1');</p>
<p>background-image:url('.images/100px.gif.');</p>
<p>background-image:url('-images/100px.gif-');</p>
<p>background-image:url('_images/100px.gif_');</p>
<p>background-image:url("images/100px.gif");</p>
<p>background-image:url("/images/100px.gif");</p>
<p>background-image:url("../images/100px.gif");</p>
<p>background-image:url("../../images/100px.gif");</p>
<p>background-image:url("../../../images/100px.gif");</p>
<p>background-image:url("http://example.com/images/100px.gif");</p>
<p>background-image:url("aimages/100px.gifa");</p>
<p>background-image:url("1images/100px.gif1");</p>
<p>background-image:url(".images/100px.gif.");</p>
<p>background-image:url("-images/100px.gif-");</p>
<p>background-image:url("_images/100px.gif_");</p>
<br /><br /><br />
Reference in a new issue Copy permalink