Using Media in Your Articles: A Quick Guide

Adding rich media to your articles is now easier than ever with our custom shortcodes. This guide shows you how to enhance your content with videos and images.

Adding Videos to Your Articles

Videos can significantly enhance your articles by demonstrating concepts that are difficult to explain with text alone. Here's an example of embedding a video:

How to Add Videos

To add a video to your article, use the following shortcode syntax:

<figure class="content-video" >
      <video controls    playsinline  preload="metadata" title="Optional caption text">
        <source src="/assets/filename.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
      <figcaption>Optional caption text</figcaption>
    </figure>

You can also add an optional CSS class:

<figure class="content-video" >
      <video controls    playsinline  preload="metadata" title="Optional caption text">
        <source src="/assets/filename.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
      <figcaption>Optional caption text</figcaption>
    </figure>

For more advanced options, you can pass an options object:

<figure class="content-video" >
      <video  autoplay muted loop playsinline  preload="metadata" title="Caption text">
        <source src="/assets/filename.mp4" type="video/mp4">
        Your browser does not support the video tag.
      </video>
      <figcaption>Caption text</figcaption>
    </figure>

Available options include:

• autoplay: Automatically start playing the video (requires muted for most browsers)
• muted: Play the video without sound
• loop: Continuously loop the video
• hideControls: Hide the video controls
• title: Accessibility text for the video (falls back to caption if not provided)
• poster: Path to an image that displays before the video plays
• preload: How the browser should load the video (default: "metadata")

Here's an example of an autoplay background video with no controls and a poster image:

The available alignment classes are:

• Default (centered, full width)
• Left alignment (floats left on desktop) using { "align": "left" }
• Right alignment (floats right on desktop) using { "align": "right" }

Adding Images to Your Articles

Images are perfect for illustrating concepts or adding visual interest to your articles:

Here's an example with specified dimensions for better performance:

How to Add Images

To add an image to your article, use the following shortcode syntax:

<figure class="content-image" >
      <img src="/assets/path/to/image.webp" alt="Alt text for accessibility"   loading="lazy" decoding="async">
      <figcaption>Optional caption text</figcaption>
    </figure>

Just like with videos, you can add an optional CSS class:

<figure class="content-image" >
      <img src="/assets/path/to/image.webp" alt="Alt text"   loading="lazy" decoding="async">
      <figcaption>Caption</figcaption>
    </figure>

You can also pass an options object for more control:

<figure class="content-image" data-align="left">
      <img src="/assets/path/to/image.webp" alt="Alt text" width="500" height="300" loading="eager" decoding="sync">
      <figcaption>Caption</figcaption>
    </figure>

Available image options include:

• width: Specify the image width in pixels
• height: Specify the image height in pixels
• align: Position the image ("left" or "right")
• loading: Control how the browser loads the image ("lazy" or "eager")
• decoding: How the browser should decode the image ("async" or "sync")

Media Best Practices

For the best user experience, keep these tips in mind:

1. Optimize your media files - Videos should be compressed to reduce loading times
2. Use descriptive alt text - This helps with accessibility and SEO
3. Add meaningful captions - Provide context for your media
4. Consider alignment - Use left/right alignment for smaller media to allow text to flow around them

Examples in Context

Here's how media can enhance your article when used in context:

When introducing children to reading, Montessori approaches focus on phonetic awareness through tactile experiences. Children first learn letter sounds rather than letter names, building a foundation for decoding words independently.

The sandpaper letters shown in this video provide both visual and tactile feedback, engaging multiple senses to reinforce learning. This multi-sensory approach is particularly effective for children who may struggle with traditional reading instruction methods.

After mastering individual letter sounds, children progress to building simple words with the movable alphabet, a process that allows them to express ideas through writing before they've developed the motor skills for handwriting.

Creating a prepared environment at home doesn't require expensive materials. Many Montessori-inspired activities can be created with household items. The key is providing purposeful materials that allow for independent exploration within appropriate boundaries.

When selecting materials, focus on quality over quantity. A few well-chosen items that align with your child's current interests and developmental needs will be more valuable than a large collection of unused materials.

Rotate materials regularly to maintain interest and match your child's evolving skills. This approach keeps the environment fresh and engaging without overwhelming your space or budget.

Ready to Enhance Your Articles?

Now that you know how to add videos and images to your articles, you can create more engaging and informative content for your readers. Remember that media should complement your writing, not replace it—the most effective articles use media strategically to illustrate key points.