API tools faq
paste
Guest User

Untitled

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