Skip to content
This repository

Add support for wrapping image in anchor element #52

Closed
wants to merge 2 commits into from

6 participants

Peter Benoit Alex Boyce Scott Jehl Sergi Meseguer Matthew Haines-Young Rob Wierzbowski
Peter Benoit

Often these images are used as anchors, I'd like to include an automated method for generating the anchor that wraps the image.

added some commits January 25, 2013
Peter Benoit Update index.html
Add data-href for use in the wrapping anchor
fcfb8d9
Peter Benoit Update picturefill.js
Check for data-href and wrap the image
76f2515
Alex Boyce

HA! I just added this to the current version I'm using. Didn't know anyone else was working on it. So therefore.. I second this motion :+1:

Scott Jehl
Owner

Thanks for the PR.

Could you explain the reason you can't currently wrap an anchor around the picturefill element?

That's how it would work with a native picture element one day, I'd expect, and I think keeping features relatively in-sync with that planning is a good idea.

Alex Boyce
Sergi Meseguer

a can wrap anything in HTML5
the problem i foubd (thats why i forked picturefill) is when you need to add a picture inside a P, some browsers will force the div.picture outside the P, potentially breaking layout/design. span was a much better choice imho

Scott Jehl
Owner
Sergi Meseguer

not sure whether it qas ff/safari or fckeditor, the point is somehow div.picture was SOMETIMES out of P's

Matthew Haines-Young
mattheu commented May 05, 2013

I have also run into this issue. Chrome (26.0.1410.65) and Firefox (20) will move the <div data-picture> outside of the <p>

I have had issues when a <div data-picture> is contained within an <a> within a <p>. The <img> is then moved outside of the <a>, breaking the link.

This is fixed by changing picturefill to use spans instead of divs

Rob Wierzbowski

This is fixed with the new span markup. I believe it can be closed.

Scott Jehl
Owner
Scott Jehl scottjehl closed this June 26, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 2 unique commits by 1 author.

Jan 25, 2013
Peter Benoit Update index.html
Add data-href for use in the wrapping anchor
fcfb8d9
Peter Benoit Update picturefill.js
Check for data-href and wrap the image
76f2515
This page is out of date. Refresh to see the latest.

Showing 2 changed files with 13 additions and 3 deletions. Show diff stats Hide diff stats

  1. 2  index.html
  2. 14  picturefill.js
2  index.html
@@ -17,7 +17,7 @@
17 17
 				
18 18
 		<p>For more info: <a href="http://github.com/scottjehl/picturefill">see project home.</a></p>
19 19
 		
20  
-		<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
  20
+		<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia" data-href="http://en.wikipedia.org/wiki/Bayon">
21 21
 			<div data-src="external/imgs/small.jpg"></div>
22 22
 			<div data-src="external/imgs/medium.jpg" data-media="(min-width: 400px)"></div>
23 23
 			<div data-src="external/imgs/large.jpg" data-media="(min-width: 800px)"></div>
14  picturefill.js
@@ -31,7 +31,17 @@
31 31
 				if( !picImg ){
32 32
 					picImg = w.document.createElement( "img" );
33 33
 					picImg.alt = ps[ i ].getAttribute( "data-alt" );
34  
-					ps[ i ].appendChild( picImg );
  34
+
  35
+					// if we have an href to apply to the image
  36
+					if( ps[ i ].getAttribute( "data-href" ) ){
  37
+						picUrl = w.document.createElement( "a" );
  38
+						picUrl.setAttribute( "href" , ps[ i ].getAttribute( "data-href" ) );
  39
+						picUrl.appendChild( picImg );
  40
+						ps[ i ].appendChild( picUrl );
  41
+					}
  42
+					else{
  43
+						ps[ i ].appendChild( picImg );						
  44
+					}
35 45
 				}
36 46
 				
37 47
 				picImg.src =  matches.pop().getAttribute( "data-src" );
@@ -57,4 +67,4 @@
57 67
 		w.attachEvent( "onload", w.picturefill );
58 68
 	}
59 69
 	
60  
-}( this ));
  70
+}( this ));
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.