• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Tips and Tricks HQ

  • Home
  • Blog
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • WP Download Monitor
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
    • WP Lightbox Ultimate
    • WP Photo Seller
  • Products
    • All Products
    • Checkout
  • Support
    • Support Portal
    • Customer Only Forum
    • WP eStore Documentation
    • WP Affiliate Software Documentation
    • WP eMember Documentation
  • Contact

Enhancing Site Usability with Toggle Media

You are here: Home / Web Development / Site Optimization Tips / Enhancing Site Usability with Toggle Media

Last updated: March 24, 2015 by TheAssurer





WordPress can embed certain kinds of media content into posts and pages; using the oEmbed protocol. But appearance and usability issues can occur, when this capability is rendered on mobile devices; like smartphones.

default-wordpress-media-oembed-url

In this example, we see that media embedding can take up much of the phone’s screen, clipping the media horizontally, and that users must scroll to view any surrounding text. Mobile device users should not have to navigate around an oversized media preview.

The embed Shortcode

The “width” and/or “height” attributes of the WordPress “embed” shortcode, allows us to resize the media, so that it does not become unreasonably clipped, on mobile devices.



default-wordpress-embed-shortcode

Notice there must be no white-space (space characters) between the ends of the embedded media URL, and the shortcode delimiter (square) brackets.

The presence of white-space causes the media URL to be displayed as a URL hyperlink, that when clicked, causes a page redirect to the specified media URL.  This situation can sometimes be desirable when presenting users with NSFW (Not Suitable For Work), or perhaps (even work related) sight-sensitive, media; in which case the media preview needs to remain hidden, until users are prepared to see the media, hiding behind the URL hyperlink.

This however presents its own set of issues. Users are now forced to use the browser’s “Back” button to leave the new page; and they may also be confused by the sudden site re-branding that occurs, when the new page is opened in the same window. Furthermore, the hyperlink is rendered without the benefit of any identifiable context, which may cause users to hesitate before clicking the link.

Toggle Media

Toggle Media is a filter plugin that enhances the WordPress embed shortcode in the following manner: 1. Allows you to add a text or image anchor to the URL hyperlink. The anchor then replaces the preview image that’s normally displayed. 2. When clicked, the embedded media preview is revealed (opened) or hidden
(closed), using a visual toggling effect. To get started; download, install and activate, the WordPress Toggle Media plugin.

Once activated, a new “toggle_media_anchor” attribute is added to the existing embed shortcode. The parameter for the attribute can either be a text label, or an image URL:

  • toggle_media_anchor=”Click here to see video”
  • toggle_media_anchor=”http://example.com/Images/Warning_NSFW.png”

This is an example of the embed shortcode using a text anchor attribute:

toggle-media-embed-example

Please note that in the above example, there must be no whitespace (space characters) between the ends of the embedded media URL, and the shortcode delimiter (square) brackets.  The presence of whitespace causes the media URL to be displayed as a URL hyperlink, that when clicked, causes a page redirect to the specified media URL.

The ability to toggle your media open and close, when used properly, will enhance the usability of almost any site.

Related Posts

  • WordPress Plugins to Speed Up Your WordPress Site
  • List of the Best and Must Use WordPress Plugins
  • 10 Plugins to Improve the Usability of WordPress Blogs
  • How to Create a Password Protected Download in WordPress

Site Optimization Tips,  Wordpress media file in wordpress,  wordpress blog,  Wordpress Plugin,  WordPress Video Lightbox

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Featured & Popular Articles

Video Answers to Top WordPress QuestionsWordPress Optimization Tips and Tricks for Better Performance and SpeedEssential WordPress Security Tips - Is Your Blog Protected?WordPress Simple PayPal Shopping Cart PluginTop 15 Search Engine Optimization (SEO) Techniques I Forget to DoList of the Best and Must Use WordPress PluginsHow do I Start a Blog and Make Money Online?Good Domain Name Picking Tips for Your Blog SetupFind Out Which WordPress Web Hosting Company Offers the Cheapest and Reliable Web Hosting Solution

Featured WordPress Plugins

wordpress estore plugin
wordpress membership plugin
WP Express Checkout Plugin
WordPress Lightbox Ultimate Plugin
WordPress photo seller plugin
wordpress affiliate plugin

Recent Posts

  • Accept Donations via PayPal from Your WordPress Site Easil [...]
  • Buy Now Button Graphics for eCommerce Websites [...]
  • Subscription Button Graphics for eCommerce Websites [...]
  • Adding PayPal Payment Buttons to Your WordPress Sidebar Ea [...]
  • PayPal QR Codes [...]

Comment & Socialize

  • @Rodrigo Souza, Thank you f ...
    - admin
  • The example for 'slm_add_ed ...
    - Rodrigo Souza
  • @Ron, All the valid transac ...
    - admin
  • Hello, when people have sel ...
    - Ron
  • We have hte following featu ...
    - admin

Check out our solutions

View our WordPress plugin collection and start using them on your site.

Our WordPress Solutions

Footer

Company

  • About
  • Privacy Policy
  • Terms and Conditions
  • Affiliate Login

Top WordPress Plugins

  • Simple Shopping Cart
  • PayPal Donations
  • WP Express Checkout
  • WP eStore
  • WP eMember

Blogging Tips

  • How to Start a Blog
  • Selecting a Good Domain
  • Cheap WP Hosting
  • WP Video Tutorials
  • Simple SEO Tips

Search


Keep In Touch

Copyright © 2023 | Tips and Tricks HQ