{"id":26415,"date":"2023-02-09T04:59:35","date_gmt":"2023-02-09T09:59:35","guid":{"rendered":"https:\/\/plumrocket.com\/docs\/?p=26415"},"modified":"2023-02-09T05:36:43","modified_gmt":"2023-02-09T10:36:43","slug":"how-to-lazy-load-images-within-magento-blocks-or-containers","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/userguides\/blocks","title":{"rendered":"How to Lazy Load Images within Magento Blocks or Containers"},"content":{"rendered":"\n

With Magento 2 Lazy Load<\/a> and Page Speed Optimizer<\/a> extensions, you can lazy load images within pre-defined blocks that you can choose in the configuration panel. Also, you can specify custom blocks\/containers, and this article will show you how to do this correctly.<\/p>\n\n\n\n

\n

Step-by-step guide:<\/p>\n\n\n\n

  1. In the main Magento menu, go to the Plumrocket<\/strong> tab > select Lazy Load <\/strong>> Configuration<\/strong><\/li>
  2. In the Blocks<\/strong> field under the Image Lazy Loading<\/strong> tab, list the blocks or containers within which all images should be lazy loaded. The list of supported formats is described in this article below.<\/li>
  3. Click Save Config<\/strong>.<\/li><\/ol>\n<\/div><\/div>\n\n\n\n
    \"Magento<\/figure>\n\n\n\n

    How to Specify Custom Containers<\/h2>\n\n\n\n

    If you want to lazy load images inside the whole section (footer, sidebar, etc.), you can specify the container name. For example, footer<\/code>.<\/p>\n\n\n\n

    How to Specify Custom Blocks<\/h2>\n\n\n\n

    Custom blocks can be identified by their name, class name, or template.<\/p>\n\n\n\n

    Block Name<\/h3>\n\n\n\n

    The advantage of lazy loading images by block name is that it can be applied across different Magento instances, as custom themes usually don’t change block names. Please note, that block aliases are not yet supported.<\/p>\n\n\n\n

    To use this method, you need to find the block name in the Magento layout<\/a>. For example, category.products.list<\/code>.<\/p>\n\n\n\n

    Block Class Name<\/h3>\n\n\n\n

    By specifying the PHP class name of the block, you will initiate the lazy loading of images within it and all inherited blocks. It is especially useful for widgets as their block names are anonymized. <\/p>\n\n\n\n

    Format example for the block class name:<\/p>\n\n\n\n

    Magento\\Catalog\\Block\\Product\\ListProduct<\/code><\/p>\n\n\n\n

    Block Template<\/h3>\n\n\n\n

    You can use block templates to lazy load images inside them, for example, if blocks don’t have class names.<\/p>\n\n\n\n

    Format examples: <\/p>\n\n\n\n

    Magento_Catalog::product\/list.phtml<\/code><\/p>\n\n\n\n

    product\/list.phtml<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

    With Magento 2 Lazy Load and Page Speed Optimizer extensions, you can lazy load images within pre-defined blocks that you can choose in the configuration panel. Also, you can specify custom blocks\/containers, and this article will show you how to do this correctly. How to Specify Custom Containers If you want to lazy load images … <\/p>\n

    Continue reading “How to Lazy Load Images within Magento Blocks or Containers”<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[372],"tags":[],"yoast_head":"\nHow to Lazy Load Images within Magento Blocks or Containers - Plumrocket Documentation<\/title>\n<meta name=\"description\" content=\"With Magento 2 Lazy Load and Page Speed Optimizer extensions, you can lazy load images within pre-defined blocks that you can choose in the configuration\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/userguides\/blocks\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Lazy Load Images within Magento Blocks or Containers\" \/>\n<meta property=\"og:description\" content=\"With Magento 2 Lazy Load and Page Speed Optimizer extensions, you can lazy load images within pre-defined blocks that you can choose in the configuration\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/userguides\/blocks\" \/>\n<meta property=\"og:site_name\" content=\"Plumrocket Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-09T09:59:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-09T10:36:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2023\/02\/magento-2-lazy-load-extension-how-to-blocks-1.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Plumrocket\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Lazy Load Images within Magento Blocks or Containers - Plumrocket Documentation","description":"With Magento 2 Lazy Load and Page Speed Optimizer extensions, you can lazy load images within pre-defined blocks that you can choose in the configuration","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/userguides\/blocks","og_locale":"en_US","og_type":"article","og_title":"How to Lazy Load Images within Magento Blocks or Containers","og_description":"With Magento 2 Lazy Load and Page Speed Optimizer extensions, you can lazy load images within pre-defined blocks that you can choose in the configuration","og_url":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/userguides\/blocks","og_site_name":"Plumrocket Documentation","article_published_time":"2023-02-09T09:59:35+00:00","article_modified_time":"2023-02-09T10:36:43+00:00","og_image":[{"url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2023\/02\/magento-2-lazy-load-extension-how-to-blocks-1.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Plumrocket","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/plumrocket.com\/docs\/#website","url":"https:\/\/plumrocket.com\/docs\/","name":"Plumrocket Documentation","description":"Extensions docs, troubleshootings etc.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plumrocket.com\/docs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/userguides\/blocks#primaryimage","inLanguage":"en-US","url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2023\/02\/magento-2-lazy-load-extension-how-to-blocks-1.png","contentUrl":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2023\/02\/magento-2-lazy-load-extension-how-to-blocks-1.png","width":1206,"height":555},{"@type":"WebPage","@id":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/userguides\/blocks#webpage","url":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/userguides\/blocks","name":"How to Lazy Load Images within Magento Blocks or Containers - Plumrocket Documentation","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/userguides\/blocks#primaryimage"},"datePublished":"2023-02-09T09:59:35+00:00","dateModified":"2023-02-09T10:36:43+00:00","author":{"@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8"},"description":"With Magento 2 Lazy Load and Page Speed Optimizer extensions, you can lazy load images within pre-defined blocks that you can choose in the configuration","breadcrumb":{"@id":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/userguides\/blocks#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/userguides\/blocks"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/userguides\/blocks#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magento 2 Extensions","item":"https:\/\/plumrocket.com\/magento-extensions"},{"@type":"ListItem","position":2,"name":"Magento 2 Lazy Load","item":"https:\/\/plumrocket.com\/magento-lazy-load"},{"@type":"ListItem","position":3,"name":"Documentation","item":"https:\/\/plumrocket.com\/docs\/magento-lazy-load"},{"@type":"ListItem","position":4,"name":"v1","item":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1"},{"@type":"ListItem","position":5,"name":"How-to Guides","item":"https:\/\/plumrocket.com\/docs\/magento-lazy-load\/v1\/userguides"},{"@type":"ListItem","position":6,"name":"How to Lazy Load Images within Magento Blocks or Containers"}]},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8","name":"Plumrocket","image":{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/10c44aa45aab391250913d982e552e53?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/10c44aa45aab391250913d982e552e53?s=96&d=mm&r=g","caption":"Plumrocket"}}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26415"}],"collection":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/comments?post=26415"}],"version-history":[{"count":10,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26415\/revisions"}],"predecessor-version":[{"id":26432,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26415\/revisions\/26432"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/media?parent=26415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/categories?post=26415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/tags?post=26415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}