The [embed] Shortcode

Some WordPress aficionados write auto-embedded URLs differently from the earlier
example. They add a special code before and after the URL, like this:

Here, the web address is the same, but it has an http://%20code%20at%20the%20beginning%20ofbrthe%20URL%20and%20a%20matching%20 code at the end. This line of code produces the
same effect as in the previous example—WordPress replaces the URL with the appropriate
embedded content, provided that it recognizes the URL.

The main reason you’d use the

The height and width attributes don’t always give you the effect you expect. It’s best
to think of them as requests—requests that WordPress honors according to its own
intricate (and slightly obscure) sizing rules. Here’s a rundown of what takes place:

• If you don’t specify any size information, WordPress allows the embedded
content to grow until it reaches its full size or hits the boundaries of your layout.
For example, if you embed post content inside a 600-pixel-wide column, your
embedded picture will grow to be 600 pixels wide (and however tall it needs
to be to preserve the picture’s proper shape).

• If you specify the width and height attributes, you override WordPress’s ordinary
behavior. For example, you can specify a size to shrink a tall-and-skinny photo
that would otherwise grow bigger than you want it to be. And if the media
sharing site you use automatically shrinks your content, you may be able to use
the width and height attributes to force it bigger. (See the box on this page for
a full discussion of this often-perplexing issue.)

• You can use either the width or height attribute on its own. For example, you can
scale down a piece of content using a smaller width and let WordPress choose
the height automatically to match the original aspect ratio.

• WordPress doesn’t let you stretch embedded content out of shape. For example,
if you assign a height and width to a picture that don’t match its aspect ratio,
WordPress follows the most restrictive dimension and sizes the other to match.

• Different themes and plug-ins can tinker with the style rules that size the elements
in your layout, including embedded content. Unfortunately, the interplay
between the embedded content, WordPress, and your theme is complex.
Sometimes, despite your best efforts, embedded content will refuse your
resizing demands.

Sizing Quirks with Embedded Content

I embedded a Flickr picture, but it turned out way smaller
than I expected!
Some media services replace the full-size content you think
you’re embedding with a smaller-size version that they think
will better suit your site. This sleight of hand has a point—it’s
done to save bandwidth and reduce the time it takes your
page to load. For example, Flickr pictures can be quite big. By
handing you a smaller thumbnail (typically, a picture that’s
just 320 pixels wide), Flickr saves you from wasting pixels and
time. However, that also means the picture that appears in
your web page may be smaller than you expect.
You can solve this problem, to a certain extent, using the
http://%20code%20with%20the%20width%20attribute.%20But%20there’s%20a%20catch.brThe%20width%20attribute%20has%20no%20effect%20unless%20you%20use%20a%20size%20that’sbrbig%20enough%20to%20force%20Flickr%20to%20give%20you%20a%20bigger%20thumbnail.%20Forbra%20standard%20picture%20in%20portrait%20orientation,%20that%20width%20needs%20tobrbe%20700%20pixels%20or%20more.br[embed%20width=700]…
This is somewhat counterintuitive, because many themes have
less than 700 pixels of width to accommodate your picture.
Twenty Twelve, for instance, has a column width of 625 pixels.
However, this attribute still has the desired effect. It forces
Flickr to return a larger-sized thumbnail, which your theme
then scales down slightly to fit your layout.
Besides being confusing, this process leaves some notable
gaps. What if you want a picture that’s wider than 320 pixels
but narrower than 625 pixels? Or what if you want a picture
to grow beyond the size of your layout? There’s no easy fix
for these issues without getting your hands dirty. If you have
a self-hosted site, you can avoid the auto-embed feature
altogether, and copy the raw HTML markup that media sharing
services like Flickr provide. Just remember to paste the markup
in the Text tab (page 178), not the Visual tab. Or, for more
control—and much more complexity—you can muck around
with the CSS style rules that control the layout of your site
(Chapter 13). Both approaches can create problems that are
more aggravating than minor size issues. For most folks, the
best choice is to accept the quirks of the auto-embed feature
and let WordPress handle the heavy lifting.

Advertisements
The [embed] Shortcode

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s