New 2021 March 23 screencast: View on Youtube or on RUMBLE! (I’m still getting the hang of Rumble – it says this video is private, unlisted, unsearchable and available to my subscribers, so if you have trouble viewing it, you may need to subscribe to me on rumble. My channel is Kids Chant.
New 2020 January 4 screencast: How to Blog with Veronica B
Table of Contents
- The Tease or Excerpt
- The Facebook Discussion Link
- Common use of Picture at the Top
- How to “Edit the Code” or HTML
- Divider Stars
- Common Use of a Beginning Capital (Drop Cap)
- Link Target Blank – links open in a new tab – WordPress gives you an option to include this code with their link button – see “Open link in a new tab”
- Youtube and Vimeo embeds
- Preceding important stuff (mostly downloads) with stars and spaces
- Footnotes
INTRODUCTORY (September 5, 2015) : PART A • PART B
The Tease or Excerpt
The old blog called it the Tease. WordPress calls it the Excerpt. I’ve made a short video for visual learners. The text version follows.
Classic Editor
When you are editing a post, either it will be there in a box beneath where you edit your article text. You scroll down a bit and it’s there, past the SEO stuff that the Genesis framework adds in. If the Excerpt box is not there, you need to activate that box by clicking the Screen Options tab up the top right. Activating it is just a once off task.
Blocks Editor
The Excerpt box is in the Document tab on the right, scroll down past the Featured Image. If it’s not appearing, then you can enable it by clicking on the three dots block in the top right corner and choosing Options, right down the end of that menu. Activating it is just a once off task.
The Discussion on Facebook Link
Similarly to the Excerpt/Tease box, the Facebook Link is accomplished with a box which is hidden by default. You need to activate Custom Fields box, the same way you activated the Excerpt box.
Once you have activated the Custom Fields box, then the trick is to find the post id from the relevant Facebook post. The page you’re looking for is a url with just your post in it and the word “post” in the url. There will be one big number there, which you should be able to double click to select then copy it.
Once you have that precious number, you head over to your post on the blog, find the Custom Field box and under Add new custom field you click Select and select the fb_post_id. Then you paste that magic number from facebook into the blank box adjacent and then hit the button Add new custom field. That button is tempting, but wait until you have the fb_post_id selected and the number ready to go.
If you do hit that button early and end up with some blank custom fields, it’s best to delete the extra ones and keep to one correct one.
COMMON USE OF A PICTURE at the top:
Use the Media Library – select alignment as needed. Check that the code goes before the drop cap if you’re using one.
Link to “Media File” to enable lightbox effect.
Editing Code in the Classic Editor
There are two tabs to the right of the content box: Visual and Text. Choose Text to edit the code. Choose Visual for a rough idea of how it will look.
Editing Code in the Block Editor
Each paragraph block has a menu bar which pops up when that paragraph is selected. The rightmost icon has three dots. Clicking on those three dots opens up a longer menu where you can find “Edit as HTML”. Select that to edit the code. Next time you click that three dot symbol, you will see “Edit Visually” in the menu. Choose that to go back to the regular view.
Divider Stars
Code for those stars:
<img src="https://archive.ccwatershed.org/media/photologue/photos/874_STARS_DIVIDE_STAR.png" />
And this code:
<img src="https://archive.ccwatershed.org/media/photologue/photos/182-divider.png" />
Makes this bar:
<img class="aligncenter size-full wp-image-29055" src="https://www.ccwatershed.org/wp-content/uploads/2020/06/77727-Black-Line.png" alt="" width="2168" height="69" />
COMMON USE of the beginning Capital Letter:
Here’s the old code:
<img src="https://archive.ccwatershed.org/media/photologue/photos/4ln_Z.png" align="left" style="margin: .3em 1em 0 0;"><strong>ZZZZZZZZZZ</strong>
Which comes out like this:
ZZZZZZZZZZ
Here is the new code (as of September 2020) :
<span class="fancy-drop-cap">H</span><strong>ERE</strong> is a new code
HERE is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name.
class="fancy-drop-cap"
class="very-fancy-drop-cap"
Both can be further customized, experimenting with the numbers in style="font-feature-settings: 'ss03'; margin: 0px 8px -8px -8px"
The size of the drop cap can be changed by adding font-size: 7em;
into that style property, making sure to separate each command with a semi-colon (;).
Further Examples
Veronica Brandt • “Lalande Drop-Cap Letters” a page of examples for every letter of the alphabet (right now I’ve only pasted the codes down to F, but hope to get back to finish the rest soon!)
<span class="fancy-drop-cap" style="font-feature-settings: 'ss03'; margin: 0px 8px -8px -8px">H</span><strong>ERE</strong> is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name.
HERE is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name.
<span class="fancy-drop-cap" style="font-feature-settings: 'ss12'; margin: 0px 8px 0 -28px">H</span><strong>ERE</strong> is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name.
HERE is some new code for fancier drop caps. There are two classes. The second produces slightly larger and generally fancier drop caps. As you may have guessed from the name. And here is an extra sentence to help see what happens with a few more lines in the paragraph. The margin values are given in this order: Top, Right, Bottom, Left. That is, clockwise starting at the top. All the drop caps are weird sizes, so you may need to experiment with different values to get the right effect.
* * HERE is the User Guide for the Fancy Font we use all over the place
You can see all the different styles and choose your favorite font-feature-settings
accordingly.
Code for the Capital Letters VIDEO
<img src="https://archive.ccwatershed.org/media/photologue/photos/4ln_Z.png" align="left" style="margin: .3em 1em 0 0;"><b>ZZZZZZZZZZ</b>
<img src="https://archive.ccwatershed.org/media/photologue/photos/3ln_Z.png" align="left" style="margin: .3em .7em 0 0;"><b>ZZZZZZZZ</b>
<img src="https://archive.ccwatershed.org/media/photologue/photos/2ln_Z.png" align="left" style="margin: .3em .5em 0 0;"><b>ZZZZZZZZ</b>
Drop Caps for BLOCKQUOTE
CORRECTION to video: This code must be placed inside the blockquote VIDEO
<img src="https://archive.ccwatershed.org/media/photologue/photos/quoteZ.png" align="left" style="margin: .25em .5em 0 0;">
LINK TARGET BLANK
So that clicking your link takes visitors to a new tab and keeps ccwatershed open in an old tab so they can come back and finish reading the article later.
<a href="ZZZZZZtheURLgoesHereZZZZZZ" target="_blank">ZZZZwhatTheySeeZZZZZ</a>
YouTube and Vimeo
<center> [embed width=720 height=450] https://www.youtube.com/watch?v=It3i-dKusIM [/embed] </center>
Vimeo
<center> [embed width=720 height=450] https://vimeo.com/360529913 [/embed] </center>
YOU CAN PRECEDE WITH stars & spaces:
<span style="color: blue; font-size: 1em;"><b>* *</b></span> <a href="ZZZZZ" target="_blank"><strong>Some Text Goes Here</strong></a>
and it comes out looking like this:
red text with bold<span style="color: red;"><strong>So Incarnadine. Much Red.</strong></span>
So Incarnadine. Much Red.
Adding a picture
Use the Add Media button. The right panel gives you options including image alignment. If you would like lightbox effects then select Link to: “Media File”.
Adding a caption to your photo
Look in the options when inserting the photo – there should be a field for the Caption and/or Description.
Photo “gallery”
There is an option to Create A Gallery when you insert images. If this fails, insert thumbnails using the link to Media File option. Use the Text tab to line up the code for each photo on the one line (the editor will wrap the text, but any returns will make a new line) Put a space between each photo (between the </img> <img>
tags.
Align text to the right (i.e. “right justify text”)<span style="display: inline-block; float: right;">ZZZZZZZ</span>
Align items to the rightalign="right" style="margin: .3em 0 1em 2em;"
Adding white space above or below text<span style="display: inline-block; margin-bottom: 15px;"><b>To add white space after Blog Category Modification</b></span>
Using your “Facebook Metadata 300×300 image” as your Blog Preview Image
Set the Featured Image. It doesn’t need to be any particular dimensions. Bigger than 300×300 is good though. The rest should be handled automatically now, but I leave this here for posterity.
VIDEO
Here’s the link I remind you about in the video: Face “Debug” Link
When using the “center” command, there may be too much space at the top.
A quick way to fix it is to insert a negative margin margin-top:. The code for a video would be the following:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Odq_OlHaC5U?rel=0" frameborder="0" allowfullscreen="" style="margin-top: -20px;"></iframe>
Working with Thumbnails:
November 14, 2013 (Part 1) • November 14, 2013 (Part 2)
FOOTNOTES:
REPLACE THE ZZZZ with “1” or “2” or whatever your number is and make sure to leave a space before you add it, otherwise the number will probably extend too far to the left in an ugly, hard-to-read way:
<span style="color: red; font-size: 1em; font-weight: bold;"><sup>ZZZZ</sup></span>
For the part at the bottom, you must replace both ZZZZZZ slots; the number and the actual footnote
<br clear=all>
<img src="https://archive.ccwatershed.org/media/photologue/photos/6584_BLACK_LINE.png">
<span style="color: black; font-size: .8em;"><b>NOTES FROM THIS ARTICLE:</b></span>
<blockquote><span style="color: red; font-size: 1em;"><strong>ZZZnumberZZZ</strong></span> ZZZZZZZZZ</blockquote>
If your article has a whole bunch of notes, it would look like this—notice how it always must END with a “blockquote” thing:
<img src="https://archive.ccwatershed.org/media/photologue/photos/6584_BLACK_LINE.png">
<span style="color: black; font-size: .9em;"><b>NOTES FROM THIS ARTICLE:</b></span>
<blockquote><span style="color: red; font-size: 1em;"><strong>ZZZ</strong></span> ZZZZZ
<br>
<br><span style="color: red; font-size: 1em;"><strong>ZZZ</strong></span> ZZZZZ
<br>
<br><span style="color: red; font-size: 1em;"><strong>ZZZ</strong></span> ZZZZZ
<br>
<br><span
style="color: red; font-size:
1em;"><strong>ZZZ</strong></span>
ZZZZZ</blockquote>
1st Sunday after Pentecost
Introit | mp3 | video | score | simple score | organ score |
Gradual | mp3 | video | score | simple score | organ score |
Alleluia | mp3 | video | score | simple score | organ score |
Offertory | mp3 | video | score | simple score | organ score |
Communion | mp3 | video | score | simple score | organ score |