{"id":2057519,"date":"2021-05-17T08:24:16","date_gmt":"2021-05-17T08:24:16","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&#038;p=2057519"},"modified":"2021-07-16T05:25:31","modified_gmt":"2021-07-16T05:25:31","slug":"displaying-images-with-toolset","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/es\/course-lesson\/displaying-images-with-toolset\/","title":{"rendered":"Displaying Images with Toolset"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Images and site performance<\/h2>\n\n\n\n<p>The speed of your site is crucial for a good user experience SEO. Studies have shown visitors will abandon pages that take more than a few seconds to load.&nbsp;<\/p>\n\n\n\n<p>Images are among the files that impact the page loading speed the most. WordPress and Toolset make the images on your site load efficiently by setting the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Exact width and height values<\/li><li>An attribute called &#8220;lazyload&#8221; ensures that the image loads only when the browser viewport is within a certain distance from it<\/li><li>An attribute called &#8220;srcset&#8221; provides the same image in different sizes so browsers can automatically select the best-looking image according to the device<\/li><\/ul>\n\n\n\n<p>All of this is applied automatically in all places including Views and WordPress Archives.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Displaying images with Toolset<\/h2>\n\n\n\n<p>Toolset provides multiple blocks for displaying your images:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Image block<\/li><li>Gallery block<\/li><li>Slider block<\/li><li>WooCommerce Product Image block<\/li><\/ul>\n\n\n\n<p>Besides allowing you to manually select images, all these blocks can also display images coming from <a href=\"https:\/\/toolset.com\/es\/glossary\/dynamic-fields\/\">Dynamic Sources<\/a> like custom fields.&nbsp;<\/p>\n\n\n\n<p>For example, to display a photo of a gym trainer for which you have a custom field, you simply select the Dynamic Source (i.e. custom field) that holds the trainer photo.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"10ef6f20c6dcd99761b2601eaaf81af2\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-image-dynamic-field.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-image-dynamic-field-500x230.png\" alt=\"\" class=\"wp-image-2057559\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Using the Toolset Image block to display dynamic images coming from a custom field<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Setting the image size and cropping options<\/h2>\n\n\n\n<p>Toolset image blocks allow you to customize the size and cropping of any image you insert.<\/p>\n\n\n\n<p>This is important for different reasons:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Images can often be of different sizes and aspect ratios. Cropping them allows you to make them all fit the exact size you set.<\/li><li>In many cases, you don&#8217;t need to display full-sized images. They&#8217;ll just take longer to load. Instead, you can use one of the image&#8217;s smaller versions, or even set a custom one.<\/li><\/ul>\n\n\n\n<p>The following two examples of a Toolset Image Slider block show how simply turning on the crop option can help the slider look much better.<\/p>\n\n\n\n<div class=\"wp-block-toolset-blocks-grid tb-grid\" data-toolset-blocks-grid=\"41290c03b3ef8cd39d845225bee282e5\">\n<div class=\"wp-block-toolset-blocks-grid-column tb-grid-column tb-grid-align-top\" data-toolset-blocks-grid-column=\"3034fbe886c11054e95b46b09d3e4112\">\n<p><strong>Toolset Image Slider block with the cropping turned off<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"8feb7ed3a601a9035e8ab38a499d5f3d\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-slider-image-cropping-1.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-slider-image-cropping-1-500x265.png\" alt=\"\" class=\"wp-image-2057573\"\/><\/a><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-toolset-blocks-grid-column tb-grid-column tb-grid-align-top\" data-toolset-blocks-grid-column=\"3034fbe886c11054e95b46b09d3e4112\">\n<p><strong>Toolset Image Slider block with the cropping turned on<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"b4190fd19875b9d2ea4faf5e3951c4d3\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-slider-image-cropping-2.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-slider-image-cropping-2-500x264.png\" alt=\"\" class=\"wp-image-2057583\"\/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Cropping with Toolset\u2019s Image block<\/h3>\n\n\n\n<p>Select the Toolset Image block and expand the <strong>Image Settings <\/strong>section in the sidebar.&nbsp;<\/p>\n\n\n\n<p>Use the <strong>Image Size <\/strong>dropdown to select one of the standard sizes.<\/p>\n\n\n\n<p>Click the <strong>Add Custom Size <\/strong>link to apply any custom size to the image. Here, you can make the image scale according to its proportions or crop it to exactly fit the size you set.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"1b5b1d8d93e4753d7b4c0aae53a62be9\"><img decoding=\"async\" width=\"362\" height=\"603\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-image-block-image-size-setting.png\" alt=\"\" class=\"wp-image-2057593\" srcset=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-image-block-image-size-setting.png 362w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-image-block-image-size-setting-180x300.png 180w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-image-block-image-size-setting-90x150.png 90w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-image-block-image-size-setting-312x520.png 312w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-image-block-image-size-setting-300x500.png 300w\" sizes=\"auto, (max-width: 362px) 100vw, 362px\" \/><div class=\"tb-image-caption\"><figcaption>Setting a custom size in the Toolset Image block options<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Cropping with Toolset\u2019s Gallery block<\/h3>\n\n\n\n<p>Select the Toolset Gallery block and expand the <strong>Grid Settings <\/strong>section in the sidebar to set whether images should be cropped.<\/p>\n\n\n\n<p>Expand the <strong>Gallery Settings <\/strong>section to set the size of the images displayed by the gallery.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"e22f32be165603820fe93b1ebdb532ce\"><img decoding=\"async\" width=\"280\" height=\"694\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-gallery-block-image-size-setting.png\" alt=\"\" class=\"wp-image-2057607\" srcset=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-gallery-block-image-size-setting.png 280w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-gallery-block-image-size-setting-121x300.png 121w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-gallery-block-image-size-setting-61x150.png 61w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-gallery-block-image-size-setting-210x520.png 210w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><div class=\"tb-image-caption\"><figcaption>Settings for size and cropping of images displayed by the Toolset Gallery block<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Cropping with Toolset\u2019s Image Slider block<\/h3>\n\n\n\n<p>Select the Toolset Image Slider block and expand the <strong>Slider Settings <\/strong>section in the sidebar. Toggle the <strong>Crop images <\/strong>option on or off, depending on what you need.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"f564d1c69ba80fbe42e2dffb05f96bc3\"><img decoding=\"async\" width=\"277\" height=\"590\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-image-slider-block-crop-setting.png\" alt=\"\" class=\"wp-image-2057619\" srcset=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-image-slider-block-crop-setting.png 277w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-image-slider-block-crop-setting-141x300.png 141w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-image-slider-block-crop-setting-70x150.png 70w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-image-slider-block-crop-setting-244x520.png 244w\" sizes=\"auto, (max-width: 277px) 100vw, 277px\" \/><div class=\"tb-image-caption\"><figcaption>Setting the cropping option for the Toolset Image Slider block<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Cropping with WooCommerce Product Image block<\/h3>\n\n\n\n<p>Select the WooCommerce Product Image block and expand the <strong>Settings <\/strong>section in the sidebar.&nbsp;<\/p>\n\n\n\n<p>When the <strong>Show Gallery Images <\/strong>option is turned off, the <strong>Image Size <\/strong>dropdown and the <strong>Add Custom Size <\/strong>link appear. Use them to select the appropriate size and cropping for the product image.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"631d818e99237ef073b91e6ab266e283\"><img decoding=\"async\" width=\"275\" height=\"414\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-woocommerce-product-image-block-size-options.png\" alt=\"\" class=\"wp-image-2057629\" srcset=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-woocommerce-product-image-block-size-options.png 275w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-woocommerce-product-image-block-size-options-199x300.png 199w, https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-woocommerce-product-image-block-size-options-100x150.png 100w\" sizes=\"auto, (max-width: 275px) 100vw, 275px\" \/><div class=\"tb-image-caption\"><figcaption>Setting the size options in the WooCommerce Product Image block<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Styling options for images and illustrations<\/h2>\n\n\n\n<p>Besides the basic options like size and cropping, Toolset image blocks offer you an array of styling options for the images they display. This includes options like background color, margins, paddings, borders, shadow, sale badge, captions, and much more.<\/p>\n\n\n\n<p>Working with images also involves choosing the best ones, optimizing them, and other important customization.<\/p>\n\n\n\n<p>For details about this whole topic, visit our lesson about <a href=\"https:\/\/toolset.com\/es\/course-lesson\/how-to-design-and-choose-images-and-illustrations\/\">designing and choosing images and illustrations<\/a>.<\/p>\n","protected":false},"author":4341,"featured_media":2057535,"template":"","related-lesson":[8417],"class_list":["post-2057519","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-designing"],"_links":{"self":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/2057519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/users\/4341"}],"version-history":[{"count":8,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/2057519\/revisions"}],"predecessor-version":[{"id":2116065,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/2057519\/revisions\/2116065"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/media\/2057535"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/media?parent=2057519"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/related-lesson?post=2057519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}