Block Editing, the CIMSS Satellite Blog and You
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.
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.
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.
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.
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.
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.