{"id":37565,"date":"2020-07-13T14:39:58","date_gmt":"2020-07-13T14:39:58","guid":{"rendered":"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/?page_id=37565"},"modified":"2020-07-15T18:42:02","modified_gmt":"2020-07-15T18:42:02","slug":"help","status":"publish","type":"page","link":"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/help","title":{"rendered":"Block Editing, the CIMSS Satellite Blog and You"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This page uses the block editor to summarize some highlights of editing the CIMSS Satellite Blog. H\/T Bill Bellon. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Best Practices<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Make sure to get out of your draft blogs, including this page. <\/li><li>Best not to &#8220;mix&#8221; editors (classic and block) if doing major changes. <\/li><li>Use the up\/down arrows to move blocks up\/down. Or drag the block. <\/li><li>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 &#8220;document&#8221; tab.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">How to insert an image (with a caption)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Click the +, then select image and insert from URL. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To allow a click to show the larger image, highlight the image and insert (again) the URL. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/images\/2019\/09\/CLEAN_GILBERT_ZOOM2_VIS_B1_1988257_213100_GOES-7_0001PANEL_FRAME00022.GIF\"><img decoding=\"async\" src=\"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/images\/2019\/09\/CLEAN_GILBERT_ZOOM2_VIS_B1_1988257_213100_GOES-7_0001PANEL_FRAME00022.GIF\" alt=\"\"\/><\/a><figcaption>This is the caption. It shows up as a default. <\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You don&#8217;t have to &#8216;resize&#8217; the image, it defaults to the column width. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How to insert and image and animation<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Click the +, then select image and insert from URL.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/images\/2019\/09\/CLEAN_GILBERT_ZOOM2_VIS_loop_1988257_103100_1988258_000100.gif\"><img decoding=\"async\" src=\"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/images\/2019\/09\/CLEAN_GILBERT_ZOOM2_VIS_B1_1988257_213100_GOES-7_0001PANEL_FRAME00022.GIF\" alt=\"\"\/><\/a><figcaption>A still image, with he hyperlink to an <em>animated gif<\/em>. Note there are no &#8220;play&#8221; buttons.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Note that there will not be a big &#8220;<em>click to play<\/em>&#8221; button over the image, but Bill might work on this at some point. there will be the standard play options. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/images\/2019\/09\/CLEAN_GILBERT_ZOOM2_VIS_loop_1988257_103100_1988258_000100.mp4\"><img decoding=\"async\" src=\"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/images\/2019\/09\/CLEAN_GILBERT_ZOOM2_VIS_B1_1988257_213100_GOES-7_0001PANEL_FRAME00022.GIF\" alt=\"\"\/><\/a><figcaption>A still image, with the hyperslink to a <em>mp4<\/em>. Note there are no &#8220;play&#8221; buttons.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Note that there will not be a big &#8220;<em>click to play<\/em>&#8221; button over the image, &#8230;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For images (associated with a loop), if you want the \u201c<strong>Click to play<\/strong>\u201d button to appear when hovered over, if you add a class=\u201dthumbnail\u201d to the image tag, the blog\u2019s Theme will automatically add the button for you (this is a feature of the Theme, not Gutenberg).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To do this in Gutenberg, when you have the image block selected on the right under Advanced, put \u201c<strong>thumbnail<\/strong>\u201d (don\u2019t include the \u201c) in the \u201cAdditional CSS class(es)\u201d field.&nbsp; And then click somewhere else to get your cursor out of that text field.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large thumbnail\"><a href=\"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/images\/2019\/09\/CLEAN_GILBERT_ZOOM2_VIS_loop_1988257_103100_1988258_000100.mp4\"><img decoding=\"async\" src=\"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/images\/2019\/09\/CLEAN_GILBERT_ZOOM2_VIS_B1_1988257_213100_GOES-7_0001PANEL_FRAME00022.GIF\" alt=\"\"\/><\/a><figcaption>Image with a mp4 and then the &#8220;<strong>thumbnail<\/strong>&#8221; added (once) to the Additional CSS class. <\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">How to insert a video (animation)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can also &#8220;directly&#8221; insert a video: hit the &#8220;+&#8221;, then search for &#8220;video&#8221;, select a video and insert url. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\" https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/images\/2019\/09\/CLEAN_GILBERT_ZOOM2_VIS_loop_1988257_103100_1988258_000100.mp4\"><\/video><figcaption>If you want this mp4 to keep looping, toggle on the &#8220;<strong>Loop<\/strong>&#8221; option, under the block tab. <\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Note that this &#8216;insert video&#8217;, one gets the standard video buttons at the bottom. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Users hit the &#8220;full screen&#8221; option to see it in full screen, not sure how you get actual size. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How to insert the side-by-side swiper<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hit the &#8220;3 dots&#8221; upper right, then, full screen and then you should see the &#8220;Slider Juxtaposes&#8221; option. Choose the &#8220;Add New&#8221; option. When you are done, you get a snippet of code, starts with ssec_slider_juxtapose &#8230;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div\n\t\tclass=\"ssec_slider_juxtapose\"\n\t\tid=\"ssec_slider_juxtapose_433282412\"\n\t\tdata-left-src=\"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/wp-content\/uploads\/sites\/5\/2020\/07\/CLEAN_GILBERT_ZOOM_VIS_B1_1988257_210100_GOES-7_0001PANEL_FRAME00060.gif\"\n\t\tdata-left-label=\"Visible \"\n\t\tdata-right-src=\"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/wp-content\/uploads\/sites\/5\/2020\/07\/CLEAN_GILBERT_ZOOM__IR_B8_1988257_210100_GOES-7_0001PANEL_FRAME00065.gif\"\n\t\tdata-right-label=\"Infrared\"\n\t\tdata-width=\"1280\"\n\t\tdata-height=\"960\"\n\t\tdata-left-orig-src=\"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/wp-content\/uploads\/sites\/5\/2020\/07\/CLEAN_GILBERT_ZOOM_VIS_B1_1988257_210100_GOES-7_0001PANEL_FRAME00060.gif\"\n\t\tdata-right-orig-src=\"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/wp-content\/uploads\/sites\/5\/2020\/07\/CLEAN_GILBERT_ZOOM__IR_B8_1988257_210100_GOES-7_0001PANEL_FRAME00065.gif\">\n\t<span class=\"ssec_slider_juxtapose_fullscreen_button\">\n\t\t<span class=\"fullscreen-icon\"><svg viewBox=\"0 0 12 12\" preserveAspectRatio=\"xMidYMid\" tabindex=\"-1\">\n\t\t\t<polyline class=\"fill\" points=\"6,6 5.9,2 4.9,3 2.9,1 1,2.9 3,4.9 2,5.9\"\n\t\t\t\t\t  transform=\"translate(6,6)\"><\/polyline>\n\t\t\t<polyline class=\"fill\" points=\"6,6 5.9,2 4.9,3 2.9,1 1,2.9 3,4.9 2,5.9\"\n\t\t\t\t\t  transform=\"translate(6,6) rotate(90)\"><\/polyline>\n\t\t\t<polyline class=\"fill\" points=\"6,6 5.9,2 4.9,3 2.9,1 1,2.9 3,4.9 2,5.9\"\n\t\t\t\t\t  transform=\"translate(6,6) rotate(180)\"><\/polyline>\n\t\t\t<polyline class=\"fill\" points=\"6,6 5.9,2 4.9,3 2.9,1 1,2.9 3,4.9 2,5.9\"\n\t\t\t\t\t  transform=\"translate(6,6) rotate(270)\"><\/polyline>\n\t\t\t<\/svg>\n\t\t<\/span>\n\t<\/span>\n<\/div>\n\n<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Misc info <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/support\/article\/wordpress-editor\/\">https:\/\/wordpress.org\/support\/article\/wordpress-editor\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">BTW, the &#8220;W&#8221; in the upper left bring you back to the <em>dashboard<\/em>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The above images and loops are from this directory: <a href=\"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/images\/2019\/09\/\">https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/images\/2019\/09\/<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-wordpress-org-forums\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/wordpress.org\/support\/article\/wordpress-editor\/\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Featured Image<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The &#8220;featured image&#8221; button is under the documentation tab, on the right-side. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8220;mix&#8221; editors (classic and block) if doing major changes. Use the up\/down arrows to move blocks up\/down. Or drag [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-37565","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/wp-json\/wp\/v2\/pages\/37565","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/wp-json\/wp\/v2\/comments?post=37565"}],"version-history":[{"count":12,"href":"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/wp-json\/wp\/v2\/pages\/37565\/revisions"}],"predecessor-version":[{"id":37649,"href":"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/wp-json\/wp\/v2\/pages\/37565\/revisions\/37649"}],"wp:attachment":[{"href":"https:\/\/cimss.ssec.wisc.edu\/satellite-blog\/wp-json\/wp\/v2\/media?parent=37565"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}