Exploring the Power of
WordPress Media Blocks
WordPress Hartford CT Meetup
November 21, 2023
November 21, 2023
[ Make Current ]
Agenda
- Speaker Introductions
- Background Behind Block Deep-Dive Series
- Cover and Media & Text Blocks (Ray)
- Image and Gallery Blocks (Peter)
- File, Audio and Video Blocks (Ray)
- Wrap-Up
[ Make Current ]
Ray Michno
- Hartford WordPress Co-Organizer
- 25+ years in IT
- Developer/Software Architect
- Pratt & Whitney, Aetna, UnitedHealthGroup
- 7+ years using WordPress
- Self-employed – CTWebGeek
- Married, No Kids, Lives in Newington, CT
- Geek
[ Make Current ]
Peter Ingersoll
- Hartford WordPress Co-Organizer
- 25+ working on the Web
- Marketing, communications, design, tech guy
- Hartford Courant, logistics, agency
- 10 years using WordPress
- Self-employed – Ingersoll Interactive
- Married, two adult kids, lives in South Windsor, CT
- WordPress Admin and DIY Advocate – IngersollWP.com
[ Make Current ]
Background Behind Block Deep-Dive Series
- In “Moving Away from Page Builders”, we discussed advantages of using core WordPress blocks
- Previous Meetup events explored Text Blocks
- For many websites, the majority of blocks needed to build a Page/Post can be core
- Media Blocks – some of the most common functionality needed on a website
[ Make Current ]
Cover Blocks
- Cover Block lets you add an image or video with a text overlay
- Often used for “Hero” or “Call to Action” sections
- Design options include changing size of image, color overlay, height, position of text, etc.
- By default – a Paragraph Block gets added, but this can be changed (ex. to Headline), and other blocks (ex. buttons) can be added
- Video overlays do not offer many styling options
- Look for inspiration on WordPress Patterns directory (https://wordpress.org/patterns/)
[ Make Current ]
Media & Text Blocks
- Media & Text Blocks allow you to place an image or video side-by-side with text
- Very similar to Cover Block
- By default, the container will be 50/50 sizing between media and text, but you can either drag the border or set “Media Width” value to change
- Other styling options – crop image to fit column, switch which side displays media vs. text
- Mobile option – stack on mobile (content on the left will show on top of the content on the right), but that can be changed
- Video can be used, but it does not seem to behave the same as Cover Block
[ Make Current ]
Image Block
- Insert images from media library, upload (to library) or URL
- Media library can be used to “preload” and manage settings for image including alt text, captions, etc., when inserting image
- Use the block inserter for quick view of media library or add directly from Openverse (openverse.org)
- Depending on licensing, Openverse images may be downloaded or otherwise only linked to – a warning for links will appear
- Openverse images include attributions
- Find attribution-free images on wordpress.org/photos/
[ Make Current ]
Image Block Toolbar Settings
- Duotone filter – for giving images (similar) a color effect
- Alignment – wide, full, left, center, & right. Content wraps around left or right aligned images.
- Caption – adds a caption to the bottom of the image, which can also come from what is saved in the library. Uses text formatting and links.
- Link – links the entire image to a URL or the image (media) file
- Crop – change size, zoom, area selection. Saves as new image.
- Add text over image – transforms to Cover block
- Replace – use a different image, retaining settings
[ Make Current ]
Image Block Settings
- Alternative Text – describes the image, for accessibility
- Aspect ratio – non-destructively changes the height & width of they displayed image
- Scale – Cover crops to fill the space, Contain places the full image within the space
- Width & Height – sets image size. If an aspect ratio is set and one side is specified, then ration retains. Setting both = custom ratio
- Resolution – selects which saved size of the image to use (defined by WP setting and/or theme)
- Expand on click – opens larger version of image when clicked
[ Make Current ]
Image Block Styles
- Rounded – quick way to round all corners
- Filters – another place to apply duotone filter
- Aspect ratio – non-destructively changes the height & width of they displayed image
- Border – set border color, width, and which sides to apply
- Link or unlink border width for all four sides
- Radius – set rounded corner radius, and which corners to apply
- Link or unlink radius for all four corners
- Applies to borders if borders are in place
[ Make Current ]
Image Block Transformations
- Cover Block – set as background image
- Columns – wraps image in column / columns block
- Gallery – wraps image(s) in Gallery block
- File – changes to link to download image
- Group – sets image inside a Group (not Group background)
- Media & Text – set as the image in block
Hint: You can freely add images
and then transform as you design your content.
and then transform as you design your content.
[ Make Current ]
Gallery Block
- A container for multiple images that have their own settings
- Images can first be added and then transformed to a gallery
- Adding a gallery block prompts to upload and select from media library (multiple images)
- Images can be ordered when first adding
- Images can be moved within a placed gallery block by the inserter, drag & drop image blocks, or using left/right buttons in toolbar
[ Make Current ]
Gallery Block Settings
- A container for multiple images that have their own settings
- Gallery settings include:
- Alignment – including wide and full
- Caption – set a caption for the entire gallery
- Number of columns – define the layout
- Cropping – crop to similar dimensions or keep aspect ratios
- Linking – to media file
- Image resolution – which saved thumbnail to use
- Background color
- Dimensions: Spacing between images, padding, margins
[ Make Current ]
Gallery Block Lightbox
- With core blocks, each image in a gallery is independently set to “expand on click”
- Galleries set to link images to “Media File” can use a plugin to apply a lightbox for the entire gallery
- Example plugin: Lightbox for Gallery & Image Block
- The core lightbox may be changed in future versions
[ Make Current ]
Theme & Plugin Dependency
- Block themes and classic themes may offer different settings
- Themes, especially advanced classic themes, may have other functionality and settings built in
- Default settings may be set by the theme, or changed in theme.json
- Plugins can change the way core blocks work
- Plugins can add new versions of media blocks
Themes “Change” WordPress
[ Make Current ]
Live Demo
It’s Demo Time!
File Blocks
- File Block allows you to add a link to a downloadable file on your site
- File Block can link to images, docs, videos or any other file you want visitors to be able to download from your site
- The types and sizes of files you can upload may be restricted
- For PDFs, the file can be embedded directly into a Page/Post for a preview and in-line viewing
- PDF Preview may not work on mobile or tablets
- File Download button can be hidden
- Viewing files on Mobile may be poor experience
- Consider other options for file sharing – ex. Google Docs, etc.
- If using files for “Lead Magnet”, consider using better tools/plugins
[ Make Current ]
Audio Blocks
- Audio Block allows you to embed a piece of music, podcast, or other sound file into your Page or Post
- Only certain audio file types supported (ex. mp3, wav, etc.)
- Size of file may be restricted by hosting
- Audio file will be displayed as an audio player along with an optional caption
- Audio player has some basic functionality
- Preload Options:
- Browser Default (default setting)
- Auto – downloads the entire audio file even if the user doesn’t click to play it
- Metadata – downloads the text only
- None
- For podcasts, consider using other Embed blocks (ex. Spotify)
[ Make Current ]
Video Blocks
- Video Block allows you to upload and embed video into your Post or Page
- Videos will have a built-in player control with some basic functionality
- Controls can also be hidden
- If you insert a URL from a supported block type, such as YouTube, the Video block will automatically transform into a YouTube block
- Text Tracks option allows you to display timed text tracks (such as subtitles or captions) when the media is playing
- Consider using YouTube or another video CDN to host videos instead of uploading directly to your website
[ Make Current ]
Live Demo
It’s Demo Time!
Theme & Plugin Dependent
What you experience may not match what you see in demos or tutorials.
Wrap Up & Q&A
[ Make Current ]
Resources
Links Shared During Meetup