Block Editing, the CIMSS Satellite Blog and You

July 13th, 2020 |

This page uses the block editor to summarize some highlights of editing the CIMSS Satellite Blog. H/T Bill Bellon.

Best Practices

  • Make sure to get out of your draft blogs, including this page.
  • Best not to “mix” editors (classic and block) if doing major changes.
  • Use the up/down arrows to move blocks up/down. Or drag the block.
  • Lots of stuff that used to be on the left-hand side is now on the right-hand side, which you can see after you click the “document” tab.

How to insert an image (with a caption)

Click the +, then select image and insert from URL.

To allow a click to show the larger image, highlight the image and insert (again) the URL.

This is the caption. It shows up as a default.

You don’t have to ‘resize’ the image, it defaults to the column width.

How to insert and image and animation

Click the +, then select image and insert from URL.

A still image, with he hyperlink to an animated gif. Note there are no “play” buttons.

Note that there will not be a big “click to play” button over the image, but Bill might work on this at some point. there will be the standard play options.

A still image, with the hyperslink to a mp4. Note there are no “play” buttons.

Note that there will not be a big “click to play” button over the image, ….

For images (associated with a loop), if you want the “Click to play” button to appear when hovered over, if you add a class=”thumbnail” to the image tag, the blog’s Theme will automatically add the button for you (this is a feature of the Theme, not Gutenberg).

To do this in Gutenberg, when you have the image block selected on the right under Advanced, put “thumbnail” (don’t include the “) in the “Additional CSS class(es)” field.  And then click somewhere else to get your cursor out of that text field. 

Image with a mp4 and then the “thumbnail” added (once) to the Additional CSS class.

How to insert a video (animation)

You can also “directly” insert a video: hit the “+”, then search for “video”, select a video and insert url.

If you want this mp4 to keep looping, toggle on the “Loop” option, under the block tab.

Note that this ‘insert video’, one gets the standard video buttons at the bottom.

Users hit the “full screen” option to see it in full screen, not sure how you get actual size.

How to insert the side-by-side swiper

Hit the “3 dots” upper right, then, full screen and then you should see the “Slider Juxtaposes” option. Choose the “Add New” option. When you are done, you get a snippet of code, starts with ssec_slider_juxtapose …

Misc info

https://wordpress.org/support/article/wordpress-editor/

BTW, the “W” in the upper left bring you back to the dashboard.

The above images and loops are from this directory: https://cimss.ssec.wisc.edu/satellite-blog/images/2019/09/

Featured Image

The “featured image” button is under the documentation tab, on the right-side.