{"id":7837,"date":"2022-02-21T12:25:52","date_gmt":"2022-02-21T12:25:52","guid":{"rendered":"https:\/\/www.blopig.com\/blog\/?p=7837"},"modified":"2023-03-03T15:03:06","modified_gmt":"2023-03-03T15:03:06","slug":"how-to-blopig","status":"publish","type":"post","link":"https:\/\/www.blopig.com\/blog\/2022\/02\/how-to-blopig\/","title":{"rendered":"How to Blopig"},"content":{"rendered":"\n

Blopig<\/strong> has a wealth of knowledge, with everything from a Bayesian answer to the question “should ketchup be stored in the fridge?<\/a>“* to the Nobel-Prize-Winner-approved analysis of AlphaFold2<\/a>. Blopig runs on WordPress and uses blocks<\/a>, components for adding different types of content to a post. These are blocks like paragraphs, headers, images, image galleries, and videos. Here are some hints and tips for getting the most out of WordPress.<\/p>\n\n\n\n

One of the first blocks worth mentioning is the “Read More…” block…<\/p>\n\n\n\n\n\n\n\n

…that reveals the rest of the post when clicked. <\/p>\n\n\n\n

When you create new block, it is usually a “Paragraph” block by default:<\/p>\n\n\n

\n
\"The<\/a>
Selecting a block reveals its type, in this case, a Paragraph as indicated by the \u00b6 or “pilcrow sign”.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n

If you hover over the first icon in the block’s menu, in this case a Paragraph block, you will get a popup that says what type the block is:<\/p>\n\n\n

\n
\"The<\/a>
Hovering reveals the block type, and indicates that clicking will give you options to change the block type.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n

Clicking on the block’s first icon reveals a menu of other blocks you can change it into:<\/p>\n\n\n

\n
\"The<\/a>
Clicking on a Paragraph block’s first icon gives a list of other blocks you can change it into.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n

You won’t see a Paragraph block menu unless your block already has some text in it.<\/p>\n\n\n\n

If you hover between two blocks, you will see a line appear with a “+” plus symbol in the middle:<\/p>\n\n\n\n

\"How<\/a>
Inserting blocks is easy–just hover between two blocks and you get an “Add Block” icon.<\/em><\/figcaption><\/figure>\n\n\n\n

If you click on the “+” symbol, you get a menu of suggested blocks to add, and a search box to find ones not listed:<\/p>\n\n\n

\n
\"The<\/a>
A menu <\/em>appears if you click on the “+” add block icon.<\/figcaption><\/figure>\n<\/div>\n\n\n

Hints and Tips<\/h2>\n\n\n\n

Here are some blocks worth using:<\/p>\n\n\n\n

1. More Blopiglets<\/h3>\n\n\n\n

To help display more posts on the landing page, and to giving more people and their recent posts more visibility, it’s good to insert a “More…”<\/em> block near the top of the post, usually after the first two or three paragraphs.<\/p>\n\n\n\n

2. Syntax Highlighting<\/h3>\n\n\n\n

If you’d like to include source code in your post, use the “<> Enlighter Sourcecode<\/a>” block rather than a ‘Preformatted’ code block. If you choose the right language, you get syntax-aware color highlighting for free. Just paste your source code into an empty block. If you change the Paragraph into a Preformatted block, it looks like this:<\/p>\n\n\n\n

def show_atom_numbers(mol, label):\n  \"\"\"See https:\/\/stackoverflow.com\/questions\/53321453\/rdkit-how-to-show-moleculars-atoms-number?answertab=active#tab-top\"\"\"\n  for atom in mol.GetAtoms():\n    atom.SetProp(label, str(atom.GetIdx()+1))\n  return mol<\/pre>\n\n\n\n
Boring and unhelpful. But this is the same code using Enlighter, with the language set to “Python”:<\/p>\n\n\n\n
def show_atom_numbers(mol, label):\n  \"\"\"See https:\/\/stackoverflow.com\/questions\/53321453\/rdkit-how-to-show-moleculars-atoms-number?answertab=active#tab-top\"\"\"\n  for atom in mol.GetAtoms():\n    atom.SetProp(label, str(atom.GetIdx()+1))\n  return mol<\/pre>\n\n\n\n
Much<\/em> better.<\/p>\n\n\n\n
You can set the language for syntax highlighting by clicking on the icon that looks like a “T” on a clipboard:<\/p>\n\n\n
\n
\"Hover<\/a>
Setting the language for syntax-aware color highlighting in Enlighter.<\/figcaption><\/figure>\n<\/div>\n\n\n
It’s also a good idea to test your code before posting it… \ud83d\ude09<\/p>\n\n\n\n
4. Use More Descriptive Links<\/h3>\n\n\n\n
For accessibility<\/a>, it’s even better to use descriptive text in the linked text. So: “you can access OPIG’s blog, Blopig<\/a> here<\/em>” is better than “you can access Blopig here<\/a><\/em>“.<\/p>\n\n\n\n
5. Descriptive Headings and Sub-Headings Are More Accessible<\/h3>\n\n\n\n
Use header blocks for headings: again, this helps improve the accessibility of your post. The first looks like a heading but it’s just a paragraph block with bold text, but the second is an actual header block (set to level H4) that would be detected by screen readers: <\/p>\n\n\n\n
A Bad Heading is Just Bold Text in a Paragraph block<\/strong><\/p>\n\n\n\n
A Good Heading Uses the Heading Block<\/h4>\n\n\n
\n
\"Showing<\/a>
Notice the bookmark icon at the left which indicates this is a Header block, not a paragraph; and also the header level set to “H4” in the middle.<\/em><\/em><\/figcaption><\/figure>\n<\/div>\n\n\n
Organize your content using a hierarchy of headers, so using H1 for the main title of the page, then use H2 for the next level in the hierarchy: don’t skip levels, as a screen reader user will wonder if there is missing content.<\/p>\n\n\n\n
6. Reduce Image File Sizes<\/h3>\n\n\n\n
If you upload pictures, make sure they are reasonably well compressed; avoiding large file sizes keeps down storage requirements, both hosting the site, and backups.<\/p>\n\n\n\n
7. Add Descriptive Alt Text to Images<\/h3>\n\n\n\n
When you insert an image into a block, the sidebar reveals a set of options including the ability to add alternative text to describe the image:<\/p>\n\n\n
\n
\"The<\/a>
The Block sidebar for an image. Under “Image Settings” it is possible to describe the image in words using the alternative text (“Alt Text”)<\/em> box.<\/figcaption><\/figure>\n<\/div>\n\n\n
8. Uncheck “Uncategorized” and Choose Your Category<\/h3>\n\n\n\n
On the right hand side when you’re writing your post, you can click on “Post” at the top next to “Block”, and scroll down until you see “Categories”.<\/p>\n\n\n\n
    \n
  1. Scroll to the bottom of the categories and uncheck “Uncategorized”.<\/li>\n\n\n\n
  2. Scroll back and choose the appropriate categories.<\/li>\n<\/ol>\n\n\n\n
    You can also search for a category using the “SEARCH CATEGORIES”.<\/p>\n\n\n\n
    Note<\/strong> that you can also create your own “Tags”, in the “ADD NEW TAG” box below the “Categories” section.<\/p>\n\n\n\n
    <\/p>\n\n\n\n
    <\/p>\n\n\n\n
    *Empiricist’s answer: Yes. Method: <\/em>(1) Find a bottle of ketchup. (2) Read the label. Results:<\/em> I found a bottle of Heinz brand; the label reads, “After opening, refrigerate and eat within 8 weeks”<\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Blopig has a wealth of knowledge, with everything from a Bayesian answer to the question “should ketchup be stored in the fridge?“* to the Nobel-Prize-Winner-approved analysis of AlphaFold2. Blopig runs on WordPress and uses blocks, components for adding different types of content to a post. These are blocks like paragraphs, headers, images, image galleries, and […]<\/p>\n","protected":false},"author":35,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","wikipediapreview_detectlinks":true,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"ngg_post_thumbnail":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[296,14],"tags":[476,474,475,473],"ppma_author":[488],"class_list":["post-7837","post","type-post","status-publish","format-standard","hentry","category-hints-and-tips","category-howto","tag-blocks","tag-blogging","tag-syntax-highlighting","tag-wordpress"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"authors":[{"term_id":488,"user_id":35,"is_guest":0,"slug":"garrett","display_name":"Garrett","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/df625261419c37dd5c5937e37f17a732626acd6eea1e6fabd03d935c25b453bf?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/posts\/7837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/comments?post=7837"}],"version-history":[{"count":4,"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/posts\/7837\/revisions"}],"predecessor-version":[{"id":9379,"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/posts\/7837\/revisions\/9379"}],"wp:attachment":[{"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/media?parent=7837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/categories?post=7837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/tags?post=7837"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.blopig.com\/blog\/wp-json\/wp\/v2\/ppma_author?post=7837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}