Created
November 27, 2012 21:36
-
-
Save davist11/4157230 to your computer and use it in GitHub Desktop.
Picturefill method from plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Output the picturefill HTML, so you don't have to repeat it all over the templates. | |
- Param: big_img, src for big image | |
- Param: small_img, src for small image | |
- Param: alt, alt attribute for image | |
- Param: media_query, media query to use, defaults to (min-width: 600px) | |
- Param: class, class for wrapper, defaults to hero | |
Example Usage: | |
{exp:vl:picturefill | |
big_img="{custom_field_name}" | |
small_img="{exp:ce_img:pair src='{custom_field_name}' width='600'}{made}{/exp:ce_img:pair}" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Picturefill Helper | |
* | |
* @return string with picturefill output | |
*/ | |
public function picturefill() | |
{ | |
$big_img = $this->EE->TMPL->fetch_param('big_img', NULL); | |
$small_img = $this->EE->TMPL->fetch_param('small_img', NULL); | |
$alt = $this->EE->TMPL->fetch_param('alt', NULL); | |
$media_query = $this->EE->TMPL->fetch_param('media_query', '(min-width: 600px)'); | |
$class = $this->EE->TMPL->fetch_param('class', 'hero'); | |
$return_data = ''; | |
if($big_img && $small_img && $media_query) { | |
$return_data = '<div class="' . $class . '" data-picture data-alt="' . $alt . '"> | |
<div data-src="' . $small_img . '"></div> | |
<div data-src="' . $big_img . '" data-media="' . $media_query . '"></div> | |
<!--[if (lt IE 9) & (!IEMobile)]> | |
<div data-src="' . $big_img . '"></div> | |
<![endif]--> | |
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> | |
<noscript> | |
<img src="' . $small_img . '" alt="' . $alt . '"> | |
</noscript> | |
</div>'; | |
} | |
return $return_data; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment