{"id":262,"date":"2021-02-09T19:38:59","date_gmt":"2021-02-09T19:38:59","guid":{"rendered":"https:\/\/stable.visual-framework.dev\/wordpress\/?page_id=262"},"modified":"2022-08-04T10:39:24","modified_gmt":"2022-08-04T10:39:24","slug":"image-block","status":"publish","type":"page","link":"https:\/\/stable.visual-framework.dev\/wordpress\/blocks\/image-block\/","title":{"rendered":"Image"},"content":{"rendered":"\n<div class=\"vf-grid | vf-grid__col-3\"><div class=\"vf-grid__col--span-2\"><!--[vf\/content]-->\n<div class=\"vf-content\">\n\n<ol><li>In WordPress editor click on a + icon to add a new block.<\/li><li>In the search field, start typing&nbsp;<em>image<\/em>&nbsp;and select the respective block.<\/li><li>You will see a box with buttons where you choose&nbsp;<em>upload an image file<\/em>,&nbsp;<em>pick one from your media library<\/em>, or&nbsp;<em>add one with a URL<\/em>. In this tutorial we\u2019ll pick an image from the media library.<\/li><li>Select a desired image and click on a&nbsp;<em>Select<\/em>&nbsp;button at the bottom right corner.<\/li><li>The image will always appear full width. Please upload only high quality images.<\/li><li>Add caption text in the field below the image preview.<\/li><li>To change the alignment of the image, click on the respective icon at the top of the block. Select the alignment from&nbsp;<em>Align left<\/em>,&nbsp;<em>Align Centre<\/em>&nbsp;and&nbsp;<em>Align right<\/em>.<\/li><li>In the right sidebar, select&nbsp;<em>Thumbnail<\/em>&nbsp;from the&nbsp;<em>Image size<\/em>&nbsp;field.<\/li><li>Using the arrows on the left side of the block, move the image up or down.<\/li><\/ol>\n\n\n\n<figure class=\"vf-figure wp-block-video\"><video style=\"max-width: 100%;\" controls src=\"https:\/\/stable.visual-framework.dev\/wordpress\/wp-content\/uploads\/2021\/02\/image.mp4\"><\/video><\/figure>\n\n<\/div>\n<\/div>\n\n\n<div><!--[vf\/content]-->\n<div class=\"vf-content\">\n\n<figure class=\"vf-figure wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"425\" class=\"vf-figure__image\" src=\"https:\/\/stable.visual-framework.dev\/wordpress\/wp-content\/uploads\/2021\/02\/image.jpg\" alt=\"\" class=\"wp-image-144\" srcset=\"https:\/\/stable.visual-framework.dev\/wordpress\/wp-content\/uploads\/2021\/02\/image.jpg 620w, https:\/\/stable.visual-framework.dev\/wordpress\/wp-content\/uploads\/2021\/02\/image-300x206.jpg 300w\" sizes=\"(max-width: 620px) 100vw, 620px\" \/><figcaption class=\"vf-figure__caption\">Image example<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":50,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-title-left-aligned.php","meta":{"_acf_changed":false,"footnotes":""},"embl_taxonomy":[],"acf":[],"embl_taxonomy_terms":[],"_links":{"self":[{"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/pages\/262"}],"collection":[{"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":3,"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/pages\/262\/revisions"}],"predecessor-version":[{"id":463,"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/pages\/262\/revisions\/463"}],"up":[{"embeddable":true,"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/pages\/50"}],"wp:attachment":[{"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/media?parent=262"}],"wp:term":[{"taxonomy":"embl_taxonomy","embeddable":true,"href":"https:\/\/stable.visual-framework.dev\/wordpress\/wp-json\/wp\/v2\/embl_taxonomy?post=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}