API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 22nd, 2018
135
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.70 KB | None | 0 0
raw download clone embed print report
  1. <?php namespace LazyLoadOptimizer\Frontend;
  2.  
  3. use Premmerce\SDK\V2\FileManager\FileManager;
  4. use LazyLoadOptimizer\LazyLoadOptimizerPlugin;
  5.  
  6. /**
  7. * Class Frontend
  8. *
  9. * @package LazyLoadOptimizer\Frontend
  10. */
  11. class Frontend
  12. {
  13.  
  14.  
  15. /**
  16. * @var FileManager
  17. */
  18. private $fileManager;
  19.  
  20. public $settings;
  21.  
  22. public function __construct(FileManager $fileManager)
  23. {
  24. $this->fileManager = $fileManager;
  25. $this->registerActions();
  26. $this->settings = array(
  27. 'lazyload_styles' => get_theme_mod('lazyload_styles',1)
  28. );
  29. }
  30.  
  31. private function registerActions()
  32. {
  33. add_action('wp_enqueue_scripts', array($this, 'enqueueScripts'));
  34. add_action('wp_head', array($this, 'addInlineStyles'));
  35. add_filter('wp_get_attachment_image_attributes', array($this, 'addDataSrcAttachmentImage'), 50, 3);
  36. add_action('init', array($this, 'initActions'));
  37. add_filter('script_loader_tag', array($this, 'addAsyncAttribute'), 20, 2);
  38. add_filter('the_content', array($this, 'filterImages'), 100);
  39. add_filter('acf_the_content', array($this, 'filterImages'), 100);
  40. add_filter('widget_text', array($this, 'filterImages'), 100);
  41. add_filter('get_avatar', array($this, 'filterAvatar'), 10);
  42.  
  43. }
  44.  
  45.  
  46. public function enqueueScripts()
  47. {
  48.  
  49. wp_enqueue_script(
  50. 'lazysizes',
  51. $this->fileManager->locateAsset('frontend/js/lazysizes.min.js'),
  52. array(),
  53. LazyLoadOptimizerPlugin::VERSION,
  54. true
  55. );
  56.  
  57. if($this->settings['lazyload_styles']) {
  58. wp_add_inline_script('lazysizes', "document.addEventListener('lazyloaded', function (e) {
  59. var alt = e.target.getAttribute('data-alt');
  60. if(alt){
  61. e.target.removeAttribute('data-alt');
  62. e.target.setAttribute('alt',alt);
  63. }
  64. var title = e.target.getAttribute('data-title');
  65. if(title){
  66. e.target.removeAttribute('data-title');
  67. e.target.setAttribute('title',title);
  68. }
  69. });");
  70. }
  71.  
  72. // wp_enqueue_style(
  73. // 'lazy-load-styles',
  74. // $this->fileManager->locateAsset('frontend/css/lazy-load-styles.css'),
  75. // array(),
  76. // LazyLoadOptimizerPlugin::VERSION
  77. // );
  78.  
  79. }
  80.  
  81. public function addInlineStyles()
  82. {
  83. $this->settings = array(
  84. 'lazyload_styles' => get_theme_mod('lazyload_styles',1),
  85. 'img_url' => get_theme_mod('spinner_image', $this->fileManager->locateAsset('frontend/img/50x50-loader.gif')),
  86. 'loading_effect' => get_theme_mod('loading_effect','spinner'),
  87. 'is_spinner' => get_theme_mod('spinner',1),
  88. 'is_fadein' => get_theme_mod('fade_in',0),
  89. 'is_animation' => get_theme_mod('animation',0),
  90. 'spinner_size' => get_theme_mod('spinner_size',30),
  91. 'time_animation' => get_theme_mod('time_animation',300),
  92. 'time_fadein' => get_theme_mod('time_fadein',300),
  93. 'is_transparent' => get_theme_mod('transparent_background',0),
  94. 'background_color' => get_theme_mod('lla_background_color', '#ffffff')
  95. );
  96.  
  97.  
  98. $spinner = '';
  99. $opacity = 1;
  100.  
  101. if($this->settings['is_spinner']){
  102. $spinner = " background-image: url('{$this->settings['img_url']}');";
  103. }
  104.  
  105. if($this->settings['is_fadein']){
  106. $opacity = 102;
  107. $transition = "-webkit-transition:opacity {$this->settings['time_fadein']}ms;
  108. -moz-transition: opacity {$this->settings['time_animation']}ms;
  109. -ms-transition: opacity {$this->settings['time_animation']}ms;
  110. -o-transition: opacity {$this->settings['time_animation']}ms;
  111. transition: opacity {$this->settings['time_animation']}ms;";
  112. }
  113.  
  114. if($this->settings['is_animation']){
  115. $transition = "-webkit-transition:{$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
  116. -moz-transition:{$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
  117. -ms-transition:{$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
  118. -o-transition:{$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
  119. transition:{$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);";
  120. }
  121.  
  122. if($this->settings['is_fadein'] && $this->settings['is_animation']){
  123. $opacity = 102;
  124. $transition = "-webkit-transition: all {$this->settings['time_fadein']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
  125. -moz-transition: all {$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
  126. -ms-transition: all {$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
  127. -o-transition: all {$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);
  128. transition: all {$this->settings['time_animation']}ms cubic-bezier(0.215, 0.61, 0.355, 1);";
  129. }
  130.  
  131. if($this->settings['is_transparent']){
  132. $backgroundColor = 'background-color: rgba(0,0,0,0);';
  133. }else{
  134. $backgroundColor = 'background-color: '.$this->settings['background_color'].';';
  135. }
  136.  
  137. $styles = "<style>
  138. img.lazyload{
  139. display: block;
  140. font-size:0px;
  141. $backgroundColor
  142. $spinner
  143. background-repeat: no-repeat;
  144. background-position: 50% 50%;
  145. background-size: {$this->settings['spinner_size']}px;
  146. }
  147. img.lazyloading{
  148. display: block;
  149. max-height: 0px;
  150. height: 0px;
  151. $backgroundColor
  152. $spinner
  153. background-repeat: no-repeat;
  154. background-position: 50% 50%;
  155. background-size: {$this->settings['spinner_size']}px;
  156. }
  157. @supports (--custom:property) {
  158. [style*='--aspect-ratio'].lazyload,[style*='--aspect-ratio'].lazyloading{
  159. padding-bottom: calc(100% / (var(--aspect-ratio)));
  160. }
  161. }
  162. .lazyload,
  163. .lazyloading {
  164. opacity: $opacity;
  165. }
  166. .lazyload,
  167. .lazyloaded {
  168. opacity: 102;
  169. $transition;
  170. }
  171. .wp-block-gallery.is-cropped .blocks-gallery-item img.lazyload {
  172. height:auto;
  173. }
  174. </style>";
  175.  
  176. if($this->settings['lazyload_styles']){
  177. echo $styles;
  178. }else{
  179. echo "<style>img.lazyload{opacity: 0;}</style>";
  180. }
  181. }
  182.  
  183.  
  184. public function addAsyncAttribute($tag, $handle)
  185. {
  186.  
  187. if ('lazysizes' !== $handle) {
  188. return $tag;
  189. }
  190.  
  191. return str_replace(' src', ' async="async" src', $tag);
  192. }
  193.  
  194.  
  195. public function addDataSrcAttachmentImage($attr, $attachment, $size)
  196. {
  197. $image = image_downsize($attachment->ID,$size);
  198. if(!empty($image[1]) && !empty($image[2])){
  199. $ratio = $image[1]/$image[2];
  200. }else{
  201. $ratio = 2;
  202. }
  203. $attr['style'] = '--aspect-ratio:'.$ratio.';';
  204. if (isset($attr['src'])){
  205. $dataSrc = array('data-src' => $attr['src']);
  206. unset($attr['src']);
  207. $attr = $dataSrc + $attr;
  208. }
  209.  
  210. if($this->settings['lazyload_styles']) {
  211. if (isset($attr['title'])) {
  212. $dataTitle = array('data-title' => $attr['title']);
  213. unset($attr['title']);
  214. $attr = $attr + $dataTitle;
  215. }
  216.  
  217. if (isset($attr['alt'])) {
  218. $dataAlt = array('data-alt' => $attr['alt']);
  219. unset($attr['alt']);
  220. $attr = $attr + $dataAlt;
  221. }
  222. }
  223.  
  224. if (isset($attr['srcset'])){
  225. $dataSrcSet = array('data-srcset' => $attr['srcset']);
  226. unset($attr['srcset']);
  227. $attr = $dataSrcSet + $attr;
  228. }
  229. $attr['class'] = $attr['class'] . ' lazyload';
  230.  
  231. return $attr;
  232. }
  233.  
  234.  
  235. public function initActions()
  236. {
  237. global $allowedposttags;
  238. $img = $allowedposttags['img'];
  239. $dataSrc = array('data-src' => true);
  240. $dataSrcSet = array('data-srcset' => true);
  241. $allowedposttags['img'] = $img + $dataSrc + $dataSrcSet;
  242.  
  243. remove_action('woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10);
  244. add_action('woocommerce_before_subcategory_title', array($this, 'woocommerceSubcategoryThumbnail'), 10);
  245.  
  246.  
  247. }
  248.  
  249. public function woocommerceSubcategoryThumbnail($category)
  250. {
  251.  
  252. $small_thumbnail_size = apply_filters('subcategory_archive_thumbnail_size', 'woocommerce_thumbnail');
  253. $dimensions = wc_get_image_size($small_thumbnail_size);
  254. $thumbnail_id = get_woocommerce_term_meta($category->term_id, 'thumbnail_id', true);
  255.  
  256. if ($thumbnail_id) {
  257. $image = wp_get_attachment_image_src($thumbnail_id, $small_thumbnail_size);
  258. if(!empty($image[1]) && !empty($image[2])){
  259. $ratio = $image[1]/$image[2];
  260. }else{
  261. $ratio = 2;
  262. }
  263. $image = $image[0];
  264. $image_srcset = function_exists('wp_get_attachment_image_srcset') ? wp_get_attachment_image_srcset($thumbnail_id, $small_thumbnail_size) : false;
  265. $image_sizes = function_exists('wp_get_attachment_image_sizes') ? wp_get_attachment_image_sizes($thumbnail_id, $small_thumbnail_size) : false;
  266.  
  267. } else {
  268. $image = wc_placeholder_img_src();
  269. $image_srcset = false;
  270. $image_sizes = false;
  271. $ratio = 1.0179;
  272. }
  273.  
  274. if ($image) {
  275. // Prevent esc_url from breaking spaces in urls for image embeds.
  276. // Ref: https://core.trac.wordpress.org/ticket/23605.
  277. $image = str_replace(' ', '%20', $image);
  278. $style = 'style="--aspect-ratio:'.$ratio.';"';
  279. // Add responsive image markup if available.
  280. if ( $image_srcset && $image_sizes ) {
  281. echo '<img '.$style.' data-src="' . esc_url( $image ) . '" data-alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" data-srcset="' . esc_attr( $image_srcset ) . '" sizes="' . esc_attr( $image_sizes ) . '" class="lazyload" />';
  282. } else {
  283. echo '<img '.$style.' data-src="' . esc_url( $image ) . '" data-alt="' . esc_attr( $category->name ) . '" width="' . esc_attr( $dimensions['width'] ) . '" height="' . esc_attr( $dimensions['height'] ) . '" class="lazyload" />';
  284. }
  285. }
  286. }
  287.  
  288.  
  289. public function FilterImages($content)
  290. {
  291.  
  292. $matches = array();
  293. preg_match_all('/<img[\s\r\n]+(.*?)>/is', $content, $matches);
  294.  
  295. $search = array();
  296. $replace = array();
  297.  
  298. foreach ($matches[0] as $img_html) {
  299.  
  300. if (strpos($img_html, 'data-src') !== false || strpos($img_html, 'data-srcset') !== false) {
  301. continue;
  302. }
  303.  
  304. $width= array();
  305. $heigth= array();
  306.  
  307. preg_match('/width=["\']([0-9]{2,})["\']/i', $img_html, $width);
  308. preg_match('/height=["\']([0-9]{2,})["\']/i', $img_html, $heigth);
  309.  
  310. if(!empty($width) && !empty($heigth)) {
  311. $ratio = $width[1]/$heigth[1];
  312. $isWidth = 1;
  313. }else{
  314. preg_match('/-([0-9]{2,})x/i', $img_html, $width);
  315. preg_match('/[0-9]{2,}x([0-9]{2,})\./i', $img_html, $heigth);
  316. if(!empty($width) && !empty($heigth)){
  317. $ratio = $width[1]/$heigth[1];
  318. $isWidth = 0;
  319. }else{
  320. $ratio = 2;
  321. }
  322. }
  323.  
  324. $style = 'style="--aspect-ratio:'.$ratio.';"';
  325. $widthHtml = '';
  326. if(!$isWidth){
  327. $widthHtml = 'width="'.$width[1].'"';
  328. }
  329. $output = '';
  330. $output = preg_replace('/<img(.*?)src=/is', '<img '.$widthHtml.' '.$style.' $1data-src=', $img_html);
  331. $output = preg_replace('/<img(.*?)srcset=/is', '<img$1data-srcset=', $output);
  332. if($this->settings['lazyload_styles']) {
  333. $output = preg_replace('/<img(.*?)alt=/is', '<img$1data-alt=', $output);
  334. $output = preg_replace('/<img(.*?)title=/is', '<img$1data-title=', $output);
  335. }
  336.  
  337. if (preg_match('/class=["\']/i', $output)) {
  338. $output = preg_replace('/class=(["\'])(.*?)["\']/is', 'class=$1$2 lazyload$1', $output);
  339. } else {
  340. $output = preg_replace('/<img/is', '<img class="lazyload"', $output);
  341. }
  342.  
  343. if (strpos($img_html, 'data-id') === false && $this->settings['lazyload_styles']) {
  344. $classHtml = array();
  345. preg_match('/class=["\'](.*?)["\']/i',$img_html, $classHtml);
  346. $output = '<span '.$classHtml[0].' style="display:block;max-width:'.$width[1].'px;">'.$output.'</span>';
  347. }
  348.  
  349. array_push($search, $img_html);
  350. array_push($replace, $output);
  351. }
  352.  
  353. $search = array_unique($search);
  354. $replace = array_unique($replace);
  355. $content = str_replace($search, $replace, $content);
  356.  
  357. if($this->settings['lazyload_styles']) {
  358. $matchesFigure = array();
  359. preg_match_all('/<figure(.*?)figure>/i', $content, $matchesFigure);
  360.  
  361. foreach ($matchesFigure[0] as $figure_html) {
  362. $output = preg_replace('/<figure(.*?)(<span.*;">)(.*?)(<\/span>)(.*?)figure>/i', '<figure$1$3$5figure>', $figure_html);
  363. array_push($search, $figure_html);
  364. array_push($replace, $output);
  365. }
  366.  
  367. $search = array_unique($search);
  368. $replace = array_unique($replace);
  369. $content = str_replace($search, $replace, $content);
  370. }
  371. return $content;
  372. }
  373.  
  374. public function FilterAvatar($content)
  375. {
  376.  
  377. $matches = array();
  378. preg_match_all('/<img[\s\r\n]+.*?>/is', $content, $matches);
  379.  
  380. $search = array();
  381. $replace = array();
  382.  
  383.  
  384. foreach ($matches[0] as $img_html) {
  385.  
  386. if (strpos($img_html, 'data-src') !== false || strpos($img_html, 'data-srcset') !== false) {
  387. continue;
  388. }
  389.  
  390. $width= array();
  391. $heigth= array();
  392.  
  393. preg_match('/width=["\']([0-9]{2,})["\']/i', $img_html, $width);
  394. preg_match('/height=["\']([0-9]{2,})["\']/i', $img_html, $heigth);
  395.  
  396. if(!empty($width) && !empty($heigth)) {
  397. $ratio = $width[1]/$heigth[1];
  398. }else{
  399. preg_match('/-([0-9]{2,})x/i', $img_html, $width);
  400. preg_match('/[0-9]{2,}x([0-9]{2,})\./i', $img_html, $heigth);
  401. if(!empty($width) && !empty($heigth)){
  402. $ratio = $width[1]/$heigth[1];
  403. }else{
  404. $ratio = 2;
  405. }
  406. }
  407.  
  408. $style = 'style="--aspect-ratio:'.$ratio.';"';
  409.  
  410. $output = '';
  411. $output = preg_replace('/<img(.*?)src=/is', '<img '.$style.' $1data-src=', $img_html);
  412. $output = preg_replace('/<img(.*?)srcset=/is', '<img$1data-srcset=', $output);
  413. if($this->settings['lazyload_styles']) {
  414. $output = preg_replace('/<img(.*?)alt=/is', '<img$1data-alt=', $output);
  415. }
  416.  
  417. if (preg_match('/class=["\']/i', $output)) {
  418. $output = preg_replace('/class=(["\'])(.*?)["\']/is', 'class=$1$2 lazyload$1', $output);
  419. } else {
  420. $output = preg_replace('/<img/is', '<img class="lazyload"', $output);
  421. }
  422.  
  423.  
  424. array_push($search, $img_html);
  425. array_push($replace, $output);
  426. }
  427.  
  428. $search = array_unique($search);
  429. $replace = array_unique($replace);
  430. $content = str_replace($search, $replace, $content);
  431. return $content;
  432. }
  433. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!