Sandbox page for testing and verifying layouts. Verbosa theme suits a simple frontpage with one hero lead and a couple smaller links. Image default sizes are 150 square, 300px wide with max-height 600px, and 600 px wide with max-height 1200px, and larger images scale to fit on smaller screens. Feature images should be custom images 400px wide so we don’t choke bandwidth when loading category and search listings.
For social media cross-posting, set the image in Yoast for each page. Yoast will use the featured image, assuming the dimensions of the image are within FB’s parameters. A roughly 2:1 image works best for full-sized posting. 800 x 400px feature image will display in FB full size. 400 x 200px will crop to the middle 200 x 200px and display as a thumbnail. Use a 150px TN image for a more predictable approach.
http://derekmah.com/wp-content/uploads/2016/09/Ali-150×150.png
as opposed to
http://derekmah.com/wp-content/uploads/2016/09/Ali.png
Verbosa Font Awesome Cat Ipsum Juxtapose
Achieved customizations using only plugins and css, and Verbosa provides a google font loader in customizer>typography>general font
Raleway: 200, 200i, 300, 300i, 400, 400i, 700, 700i
Revisions Warnings
According to undocumented sources, WP revision management chokes at 600 revisions. The page content will display in browsers, but the editor will fail to load and the page can no longer be edited. Experienced that with the Sandbox page, and had to rebuild a new one. Home page was displaying with 324 revisions. Other pages had typically fewer than 100 revisions, so this may not be a major issue. Created a new home page to be safe.
There are a number of revision management tools that can delete revisions, though they appear to delete all revisions across all pages and posts rather than selectively deleting a range of revisions from a single page or post. There are also revision plug ins that will limit the number of revisions, auto-deleting the oldest.
Gutenberg Compatibility
Reusable blocks are potentially very powerful, and function as includes. Once placed, each block instance will update if the block is edited. On a simple level, this is a great way to create consistent elements such as buttons for external links, or contact information.
Created reusable blocks Attospacer 3rem and AttoHR for consistent bottom margin and HR placement, and reusable blocks for convenient placement of Twitter and Juxtaposition elements.
WP 5.0.3 appears to not display custom reusable blocks as an editing option in Gutenberg when Updraft 1.16.5 is activated. The reusable blocks remain intact in both the database and the page, but are simply not available via the editor. Pending updates, will activate Updraft only when making manual backups.
It appears that Gutenberg requires blocks to be fully self-contained and autonomous, so blocks such as the custom html block cannot open a div without closing it. There is no error warning, Gutenberg allows the initial build and include, then either chokes or fails to load the offending block on subsequent editing sessions.
Buttons
There are three ways to make buttons. An inline link with bold applied will display as a button. Alternatively, apply class=”button” to inline links directly in the html. Apply class=”button standalone” directly in the html for big standalone buttons.
class=”button standalone” displays as a big button
class=”button standalone readmore” displays as a big button and prepends the eye icon
class=”continue-reading-link” displays as a big button and prepends the eye icon and appends “read more”
Verbosa applies the “read more” button to all post lists. Excerpts have been activated, and a 12 word sample will be used if an excerpt does not exist.
Images
For some reason, some images in earlier pages were loading as http rather than https which resulted in certificate flags when the page is browsed in SSL. WP does not allow manual setting of image urls, and uploading in editor while in SSL did not appear to correct the way the images were corrected. To correct, manually edit the html from https://… to http://… to load the image properly.
These images are centered using the default WP centering settings:
Paragraph block can contain inline images:
This is an inline image, which is rendered without a box-shadow, unlike standard images.
Add class “circleframe” to trim rectangular images into ovals.
Inline images can be combined into gallery lines of two or three images. Place two inline images into a P class=”halfsizeimages” or three inline images into a P class=”thirdsizeimages” or four inline images into a P class=”fourthsizeimages” for images that will automatically scale to 50%, 33.333%, and 25% respectively. The grouped images are rendered with a box-shadow similar to standard images.
Use a P with class attocaption to add a caption below inline images. P class=”halfsizeimages”
P class=”thirdsizeimages”
P class=”fourthsizeimages”
Text
Verbosa provides a google font loader at
customizer>typography>general font.
Currently loading:
Raleway: 200, 200i, 300, 300i, 400, 400i, 700, 700i
- h1, h2, h3 will be font-weight: 200
- h4, blockquote, li, p will be font-weight: 300
- h5 will be font-weight: 400
- h6, strong, b will be font-weight: 700
200 200 200 200 200 200 class=fontweight200 Decide to want nothing to do with my owner today. Step on your keyboard while you’re gaming and then turn in a circle and lies down for inspect anything brought into the house.
300 300 300 300 300 300 class=fontweight300 Purr for no reason bathe private parts with tongue then lick owner’s face for kitty. Run to human with blood on mouth from frenzied attack on poor innocent mouse, don’t i look cute?
400 400 400 400 400 400 class=fontweight400 Mice or stare out cat door then go back inside. Roll on the floor purring your whiskers off meow go back to sleep owner brings food and water tries to pet on head, so scratch get sprayed by water because bad cat but curl into a furry donut lies down so jump five feet high and sideways when a shadow moves snuggles up to shoulders or knees and purrs you to sleep.
700 700 700 700 700 700 class=fontweight700 Chew the plant i cry and cry and cry unless you pet me, and then maybe i cry just for fun so eat owner’s food, or eat from dog’s food and climb leg drool purrr purr little cat, little cat purr purr.
H1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua H1
H2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua H2
H3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua H3
H4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua H4
H5 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua H5
H6 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua H6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Blockquote
Magna Aliqua, Citation
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua paragraph
- Lorem ipsum dolor sit amet;
- consectetur adipiscing elit;
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Ordered list.
H6 + H2 Removes
The Margin-top from the H2
An italicized paragraph line immediately following the H6 + H2 combination looks really nice as a sub-title or summary
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
H6 + H2 Title Wrapped
With HR Makes a Nice Title
Ignore the squirrels, you’ll never catch them anyway. If it fits, i sits but scream at teh bath find a way to fit in tiny box. Poop on grasses paw at beetle and eat it before it gets away eat half my food and ask for more.
Callout is a blockquote with class “calloutright” or “calloutleft” applied
citation goes here
Callouts are always 40% content width when window is 768px and wider. Woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off. Woops left brown marks on floor human slave clean lick butt now sleep on keyboard, yet the door is opening! how exciting oh, it’s you, meh mrow pelt around the house and up and down stairs chasing phantoms or meow all night having their mate disturbing sleeping humans.
Callout is a blockquote with class “calloutright” or “calloutleft” applied
citation goes here
Callouts are always 40% content width when window is 768px and wider. The fat cat sat on the mat bat away with paws mark territory, but litter kitter kitty litty little kitten big roar roar feed me. Always ensure to lay down in such a manner that tail can lightly brush human’s nose sit on human. They not getting up ever rub face on everything stare at the wall. Play with food and get confused by dust walk on car leaving trail of paw prints on hood and windshield play time i like fish.
H3 Sub-headers in H3
Floated images figure.alignleft or figure.alignright are max-width 40% at all screen sizes. Best to keep captions short to avoid text skyscrapers at mobile sizes.
Going to catch the red dot today going to catch the red dot today. Demand to be let outside at once, and expect owner to wait for me as i think about it i hate cucumber pls dont throw it at me, yet when in doubt, wash, and always hungry. Hiding behind the couch until lured out by a feathery toy. No, you can’t close the door, i haven’t decided whether or not i wanna go out yet fight an alligator and win.
Headbutt owner’s knee. Jump off balcony, onto stranger’s head. Lounge in doorway purr for no reason or mew but spread kitty litter all over house but ignore the squirrels, you’ll never catch them anyway a nice warm laptop for me to sit on, ignore the human until she needs to get up, then climb on her lap and sprawl.
Floated images figure.alignleft or figure.alignright are max-width 40% down to window width 640px at which point they convert to 100% width centered images.
Meeeeouw annoy kitten brother with poking lick master’s hand at first then bite because im moody with tail in the air cat is love, cat is life. Poop on grasses lick left leg for ninety minutes, still dirty bite nose of your human.
Cover Images
Media & Text element class=”attocover” will create a tinted cover image that spans the width of the page with a text content area in the middle of the image. Aspect ratio of 4:1 is nice for a single line of h2 text. 16:9 makes a nice block title.
Installed the Custom Body Class plugin to allow adding custom classes to the body tag. Set post class=”attocoverheader” to hide default H1 title, and allow first-child attocover to display as a title header. more here
H2 title over 4:1 image
To ensure room for additional text content when displaying at screen widths smaller than 400px, add class=”attocover minheight18″ to set a minimum height of 18rems. Images will visually crop on the right.
H2 cover title
P cover text should be 25 words or fewer. Try to lead into a button if possible. Attocover images are rendered without a box-shadow.
If it smells like fish eat as much as you wish kitty ipsum dolor sit amet. Shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff or bird. Bird, bird, bird, bird, bird. Human why take bird out i could have eaten that. Destroy couch jump off balcony, onto stranger’s head. Bathe private parts with tongue then lick owner’s face pretend not to be evil. Fish, I must find my red catnip fishy fish mesmerizing birds. Cats making all the muffins grab pompom in mouth and put in water dish.
Drink water out of the faucet meow meow mama so relentlessly pursues moth and lick the other cats. Meow meow, i tell my human. Lick human with sandpaper tongue. I hate cucumber pls dont throw it at me. Floof tum, tickle bum, jellybean footies curly toes experiences short bursts of poo-phoria after going to the loo.
Being gorgeous with belly side up dont wait for the storm to pass, dance in the rain. Eat owner’s food. Try to jump onto window and fall while scratching at wall ears back wide eyed intently stare at the same spot, yet warm up laptop with butt lick butt fart rainbows until owner yells pee in litter box hiss at cats or i can haz hide head under blanket so no one can see.
Scratch me there, elevator butt. Make meme, make cute face but cough hairball, eat toilet paper or mrow yet meowing non stop for food loved it, hated it, loved it, hated it, intrigued by the shower. Chase mice sleep. Mewl for food at 4am. Cuddle no cuddle cuddle love scratch scratch and cry louder at reflection. Fish. I must find my red catnip fishy fish but making sure that fluff gets into the owner’s eyes. Loves cheeseburgers i could pee on this if i had the energy yet vomit food and eat it again stare out cat door then go back inside.
Juxtapose
Create A/B comparison slider using two identically sized images immediately preceded and followed by an opening juxtapose shortcode and a closing juxtapose shortcode.
Juxtapose script will automatically scale the image to 100% container width on page load, but does not dynamically scale the image.
Juxtapose script does not display captions. Use class=”attocaption” on a P to style as a caption.
WP Gutenberg does not allow custom html blocks to have open divs, making it difficult to put a size-limiting wrapper around Juxtapose. To make Juxtapose images max-width: 500px, add a complete div with class=”juxtapose-smaller” which will add the max-width to the Juxtapose immediately following. A reusable block has been created for this.
Lick butt claw your carpet in places everyone can see – why hide my amazing artistic clawing skills? so climb a tree, wait for a fireman jump to fireman then scratch his face yet catasstrophe steal the warm chair right after you get up yet relentlessly pursues moth sniff all the things. Walk on car leaving trail of paw prints on hood and windshield.
Somehow manage to catch a bird but have no idea what to do next, so play with it until it dies of shock demand to be let outside at once, and expect owner to wait for me as i think about it run outside as soon as door open and pretend you want to go out but then don’t yet destroy couch as revenge or scoot butt on the rug chase after silly colored fish toys around the house.
Cereal boxes make for five star accommodation then cats take over the world ptracy, or stuff and things, or stuff and things yet eat a plant, kill a hand murf pratt ungow ungow.
Massacre a bird in the living room and then look like the cutest and most innocent animal on the planet run in circles rub face on everything chase imaginary bugs. Take a big fluffing crap attack dog, run away and pretend to be victim intrigued by the shower.
H3 Yoast Sure Likes Headers, Haha! H3
Wake up wander around the house making large amounts of noise jump on top of your human’s bed and fall asleep again kitty power stare at owner accusingly then wink. Then cats take over the world sweet beast, for thug cat lick butt and make a weird face yet stick butt in face use lap as chair, so milk the cow. Get video posted to internet for chasing red dot pushes butt to face.
Stand in doorway, unwilling to chose whether to stay in or go out purr like an angel so small kitty warm kitty little balls of fur. Leave hair everywhere cat not kitten around stare at imaginary bug, for my cat stared at me he was sipping his tea, too. You call this cat food. Plop down in the middle where everybody walks have my breakfast spaghetti yarn litter kitter kitty litty little kitten big roar roar feed me but peer out window, chatter at birds, lure them to mouth for really likes hummus.
Hunt by meowing loudly at 5am next to human slave food dispenser i hate cucumber pls dont throw it at me for sun bathe sleep.
