Skip to content

Instantly share code, notes, and snippets.

@henshaw
henshaw / block-cloudflare-stream.php
Last active Mar 10, 2021
VideoObject Schema structured data for Cloudflare Stream videos in WordPress. To be used with Genesis Custom Blocks plugin.
View block-cloudflare-stream.php
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "<?php block_field( 'cs-name' ); ?>",
"description": "<?php block_field( 'cs-description' ); ?>",
"thumbnailUrl": [
"<?php block_field( 'cs-widescreen-image' ); ?>",
"<?php block_field( 'cs-square-image' ); ?>",
"<?php block_field( 'cs-portrait-image' ); ?>"
@henshaw
henshaw / preview-cloudflare-stream.php
Created Feb 23, 2021
Preview custom block for block-cloudflare-stream.php. Makes the block visible in the WordPress editor.
View preview-cloudflare-stream.php
<p style="color:darkorange;"><strong>Cloudflare Stream Video Schema</strong></p>
View schema-videoobject-example.json
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "VideoObject",
"name": "Name of video",
"description": "Description of video",
"thumbnailUrl": [
"https://coywolf.pro/wp-content/uploads/2019/06/og-coywolf.png"
],
"uploadDate": "2021-02-21T11:34:07-06:00",
View start-theme-logo-text.php
<div class="logo"><a href="/"><?php bloginfo('name'); ?></a></div>
View starter-theme-logo-image.php
<img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>">
View logo-size.css
nav.top .logo img { height:2rem; }
View functions-thumbnail-size.php
set_post_thumbnail_size( 150, 79, true );
add_image_size( 'single-post-thumbnail', 1200, 630 );
View top-nav-colors.css
/* Colors */
nav.top, nav.top ul { background:#0E52AE; }
nav.top, nav.top a, .intro, nav.top a:link, nav.top a:visited, nav.top a:hover { color:#fff; }
nav.top .select { background:#fff; }
View top-nav-colors-alternative.css
nav.top, nav.top a, .intro, nav.top a:link, nav.top a:visited { color:#fff; }
nav.top a:hover { color:#eee; }
View intro-colors.css
.intro { background:#eee; }
.intro h1, .intro p { color:#000; }