{"id":1788,"date":"2018-11-03T12:20:00","date_gmt":"2018-11-03T12:20:00","guid":{"rendered":"https:\/\/wpthemetestdata.wordpress.com\/?p=1755"},"modified":"2018-11-03T12:20:00","modified_gmt":"2018-11-03T12:20:00","slug":"block-image","status":"publish","type":"post","link":"https:\/\/blog.uvm.edu\/manual\/2018\/11\/03\/block-image\/","title":{"rendered":"Block: Image"},"content":{"rendered":"\n

Images get placed on a page with the “IMAGE” block. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You can choose alignment None<\/em>, Left<\/em>, Right, <\/em>and Center<\/em>. The next release of our theme will add support for align wide<\/em>, and full width<\/em>. <\/p>\n\n\n\n

TIP: Try to avoid having images flush right or left with text wrapping as this formatting doesn’t work well on mobile. You end up with incredibly narrow line lengths for text, making your site hard to read on mobile.<\/p>\n\n\n\n

WordPress also allows you to set the image dimensions to 25%, 50%, 75%, 100% or a set width and height. Make every effort to optimize your image to the desired width and height so images are not scaled “on the fly”. Scaling images in the browser slows down the page load and makes your pages “heavier” with more data to download than needed for the layout.<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"A
Paul Bierman Lab<\/figcaption><\/figure><\/div>\n\n\n\n

The image above is centered<\/strong><\/em>.<\/p>\n\n\n\n

\"Young<\/figure><\/div>\n\n\n\n

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned<\/strong><\/em>. <\/p>\n\n\n\n

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!<\/p>\n\n\n\n

And now for a massively large image<\/strong><\/em>. It also has no alignment<\/strong><\/em>.<\/p>\n\n\n\n

\"UVM<\/figure>\n\n\n\n

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

And now we’re going to shift things to the right align<\/strong><\/em>. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there\u2026 Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.<\/p>\n\n\n\n

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah\u2026 Just like that. It never felt so good to be right.<\/p>\n\n\n\n

And just when you thought we were done, we’re going to do them all over again with captions!<\/p>\n\n\n\n

\"University<\/a><\/figure><\/div>\n\n\n\n

The image above happens to be centered<\/strong><\/em>. The caption also has a link in it, just to see if it does anything funky.<\/p>\n\n\n\n

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned<\/strong><\/em>. <\/p>\n\n\n\n

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thang. Mission accomplished!<\/p>\n\n\n\n

And now for a massively large image<\/strong><\/em>. It also has no alignment<\/strong><\/em>.<\/p>\n\n\n\n

\"UVM<\/figure>\n\n\n\n

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.<\/p>\n\n\n\n

<\/div>\n","protected":false},"excerpt":{"rendered":"

Images get placed on a page with the “IMAGE” block. You can choose alignment None, Left, Right, and Center. The next release of our theme will add support for align wide, and full width. TIP: Try to avoid having images flush right or left with text wrapping as this formatting doesn’t work well on mobile. You … <\/p>\n

Continue reading “Block: Image”<\/span><\/a><\/p>\n","protected":false},"author":5625,"featured_media":3928,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[258709,2899,246029],"tags":[247],"class_list":["post-1788","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-block","category-images","category-media-2","tag-image","entry"],"featured_image_src":"https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/image__icon_1500x1000_01.jpg","featured_image_src_square":"https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/image__icon_1500x1000_01.jpg","author_info":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_featured_image_url":{"full":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/image__icon_1500x1000_01.jpg",426,284,false],"landscape":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/image__icon_1500x1000_01.jpg",426,284,false],"portraits":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/image__icon_1500x1000_01.jpg",426,284,false],"thumbnail":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/image__icon_1500x1000_01-150x150.jpg",150,150,true],"medium":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/image__icon_1500x1000_01-300x200.jpg",300,200,true],"large":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/image__icon_1500x1000_01.jpg",426,284,false],"1536x1536":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/image__icon_1500x1000_01.jpg",426,284,false],"2048x2048":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/image__icon_1500x1000_01.jpg",426,284,false],"ab-block-post-grid-landscape":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/image__icon_1500x1000_01.jpg",426,284,false],"ab-block-post-grid-square":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/image__icon_1500x1000_01.jpg",426,284,false],"post-thumbnail":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/image__icon_1500x1000_01.jpg",426,284,false]},"rttpg_author":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_comment":0,"rttpg_category":"Block<\/a> Image Styles<\/a> Media<\/a>","rttpg_excerpt":"Images get placed on a page with the “IMAGE” block. You can choose alignment None, Left, Right, and Center. The next release of our theme will add support for align wide, and full width. TIP: Try to avoid having images flush right or left with text wrapping as this formatting doesn’t work well on mobile. You…","_links":{"self":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/1788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/users\/5625"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/comments?post=1788"}],"version-history":[{"count":0,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/1788\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media\/3928"}],"wp:attachment":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media?parent=1788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/categories?post=1788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/tags?post=1788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}