{"id":263348,"date":"2018-11-23T09:46:27","date_gmt":"2018-11-23T08:46:27","guid":{"rendered":"https:\/\/www.elmastudio.de\/?p=263348"},"modified":"2018-11-23T09:46:27","modified_gmt":"2018-11-23T08:46:27","slug":"working-with-images-in-gutenberg","status":"publish","type":"post","link":"https:\/\/www.elmastudio.de\/en\/working-with-images-in-gutenberg\/","title":{"rendered":"Working with Images in Gutenberg"},"content":{"rendered":"

One of the cool features of the new Gutenberg editor is that it allows you to search for available block options (and there are a lot of them!). To find all image block options, click the add block icon and type images in the search bar. From there, you will see all of the image block options.<\/p>\n

\"\"<\/p>\n

1. Image Block<\/h3>\n

The most obvious option is the image block. Once you click on the image block, you can either upload an image from your computer or from the WordPress media library.<\/p>\n

\"\"<\/p>\n

Once you upload your image you will see it in the block. You have the option to write a caption<\/em> directly in the content area, including options with formatting and adding links.<\/p>\n

\"\"
Add a caption to your image.<\/figcaption><\/figure>\n

You can also choose left, centre, right alignment, or wide or fullscreen<\/em> for the image. The wide width and full screen format is dependent on theme support.<\/p>\n

\n
\"\"
The wide and fullwidth image option.<\/figcaption><\/figure>\n<\/div>\n

Once your image is uploaded in the block, you can find more Advanced Settings<\/strong> by clicking on the settings icon at the top right corner. Here you can add Alt text, choose image size, change image dimensions, and\/ors link settings.<\/p>\n

\"\"<\/p>\n

2. Gallery Block<\/h3>\n

To add images for the gallery block, you can use the same steps as you did to add an image, simply by adding more than one image. You can choose multiple images at once. There\u2019s a summary at the bottom showing selected images, if you hit clear then it deselects all of them.<\/p>\n

If you want to deselect just one image, you click on the check mark icon on the image selected. Once you have all of your photos selected, click \u2018create gallery\u2019<\/em> and then ‘insert gallery’<\/em>.<\/p>\n

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

Now your gallery will be in your post content. You can write captions for each image directly in the editor, the image captions in the gallery show up directly over the image at the bottom.<\/p>\n

\"\"<\/p>\n

You can edit the styling or the caption and add a link just as you can in the image block. For the gallery block you can also have wide<\/strong> width and full screen<\/strong> mode.<\/p>\n

\n\"\"\n<\/div>\n
Gallery Block Settings:<\/b><\/h5>\n

If you go to the settings, you\u2019ll have some more options. If you change the columns for your gallery, depending on the number of images included, the last photo will stretch to full width. For example, if you have 3 images, and you choose 2 columns, then you will have the third image stretched out into full width.<\/p>\n

You can also crop the images<\/strong> so they are the same height.<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

3. Cover Image<\/h3>\n

A cover image is an image with text on it. It\u2019s mostly useful as a full screen or widescreen at the top of the page\/post or as a divider for longer posts.<\/p>\n

Once you edit your image, you can choose the widescreen or full screen and add the cover image text. It will show the dark overlay so you can write caption over image. It\u2019s a good feature to build pages in Gutenberg.<\/p>\n

\n\"\"\n<\/div>\n
Cover Block Settings:<\/b><\/h5>\n

You can adjust the opacity of the background image. For the fixed background option, if activated then the image is fixed to the bottom or top of the page.<\/p>\n

4. Image Embed Blocks<\/h3>\n

There are a couple of embed blocks where you can embed your content from your social media websites. At the moment you can use Instagram and Flickr available but more will likely be added soon. As an example, we will use Instagram. <\/p>\n

\"\"<\/p>\n

Add your Instagram URL and it will add the image Instagram style (with likes, comment, Instagram border)<\/em>.<\/p>\n

\"\"
copy and paste the URL of the Instagram image you want to include.<\/figcaption><\/figure>\n

For now, it’s not possible to include the whole feed. In the future, there will most likely be a lot of plugins to include different options (e.g. an Instagram feed or multiple Instagram posts)<\/em>.<\/p>\n

\"\"<\/p>\n

Feedback and Questions<\/h4>\n

The new Gutenberg editor makes it simple to add images and image options to your posts and pages. We hope you find this post helpful and we are keen to hear your helpful hints for images and Gutenberg in general. Feel free to comment :)<\/p>\n","protected":false},"excerpt":{"rendered":"

One of the cool features of the new Gutenberg editor is that it allows you to search for available block options (and there are a lot of them!). To find all image block options, click the add block icon and type images in the search bar. From there, you will see all of the image […]<\/p>\n","protected":false},"author":2978,"featured_media":265063,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1605,910],"tags":[1694,1393,1392,1663,1693,1692],"class_list":["post-263348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-en","category-wordpress-en","tag-blocks","tag-editor","tag-gutenberg","tag-gutenberg-ready","tag-image-blocks","tag-images"],"_links":{"self":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/263348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/users\/2978"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/comments?post=263348"}],"version-history":[{"count":0,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/263348\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/media\/265063"}],"wp:attachment":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/media?parent=263348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/categories?post=263348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/tags?post=263348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}