[Updated April 2013.] [Pt.2 here; pt.3 here.]
Several types of objects are embedded in a post or a page via what WP calls shortcodes. Among others –
• Youtube shortcode:
| [youtube=URL HERE] |
• Vimeo shortcode:
| [vimeo NUMBER HERE] | or | [vimeo http://vimeo.com/NUMBER HERE] |
• Poll shortcode:
| [polldaddy poll=NUMBER HERE] |
• Audio player shortcode: [1]
| [audio URL HERE] | or | [audio=URL HERE] |
• Gallery shortcode: [2]
| [gallery] |
As the WP FAQ says (with some amount of bullshitting), the shortcode business means “you do nifty things with very little effort”: “just one line” instead of “lots of complicated, ugly code”. Unfortunately it also means that all or most parameters are rigidly predetermined and outside your control. Videos, for instance, are center aligned; polls, on the other hand, as well as the audio player, are left aligned; in all three cases, text or another object will follow below them. You cannot change any of that by using the alignment buttons of the editor.
You can do it, however, by enclosing the shortcode in suitable html codes (in the html post or page editor, of course):
Video left aligned (no text wrap)
<div style="float:left;">
SHORTCODE HERE
</div>
<div style="clear:both;height:1em;"></div>
Example:
Cazzati: Ciaconna. Ensemble L’Arpeggiata, dir. Christina Pluhar.
Video left aligned but indented
<div style="float:left;margin-left:24px;">
SHORTCODE HERE
<div style="clear:both;height:1em;"></div>
(The number is arbitrary – you can change it.)
Example:
Stravinksy: The Rite of Spring (ending). Wuppertal Dance Theater, chor. Pina Bausch.
Video left aligned, with wrap-around text
<div style="float:left;margin-right:14px;">
SHORTCODE HERE
</div>
Example:
Bach: Es ist vollbracht, from the St-John Passion.
Panajotis Iconomou, boy alto.
Christophe Coin, viola da gamba.
Concentus Musicus Wien, dir. Nikolaus Harnoncourt.
[Text:]
“Es ist vollbracht.
O Trost für die gekränkten Seelen;
die Trauernacht läßt mich die letzte Stunde zählen.
Der Held aus Juda siegt mit Macht und schließt den Kampf.
Es ist vollbracht.”
[Translation:] It’s finished now. Oh consolation for the souls that suffer; this night of woe makes me the final hour ponder. The Judahn hero wins with might and ends the strife. It’s finished now.
[Cf John 19:30: “When Jesus therefore had received the vinegar, he said, It is finished: and he bowed his head, and gave up his spirit.”]
Series of left aligned videos, with text blocks next to each video
<table>
<tr><td style="padding-right:14px;">SHORTCODE1 HERE</td><td>TEXT1 HERE</td></tr>
<tr><td style="padding-right:14px;">SHORTCODE2 HERE</td><td>TEXT2 HERE</td></tr>
[etc.]
</table>
This way each video/text pair will be vertically centered; if you want their tops aligned, change each opening td tag to this:
<td style="vertical-align:top;padding-right:14px;">
Series of left aligned videos, with text running next to them
See this post, under “Two columns”.
https://wpbtips.wordpress.com/
Awe! There is more meat in those videos than in any food blog.
Posted by Tess | April 6, 2009, 19:14He, was a chance for me to sneak in something from my world!
Posted by Panos | April 6, 2009, 23:43mmm. The Cazzati video is especially interesting because the musicians are so much enjoying what they are doing, looking to each other even while concentrating on their own parts—whoever made that video made a very nice story inside the music. Makes me wish to be part of their world. lovely. thank you!
Posted by Tess | April 7, 2009, 05:49I’m so glad you appreciate that! Cazzatti may be a largely forgotten composer of no particular importance, but I had chosen this gem precisely as a superb model of what music-making is supposed to be (painful shortage of that among ‘classical’ musicians).
Posted by Panos | April 7, 2009, 17:49Panos:
Thanks again for the help on text wrapping. I’ve found you directly here along with the post that I needed all along. I have a feeling I will be referencing this site often.
Posted by educlaytion | April 29, 2009, 00:00You’re welcome; I’ve started gathering these little things here, hoping they might be useful to others too.
Posted by Panos | April 29, 2009, 19:08Thanks for posting this. I always wondered if there was a way to align the videos.
Posted by jaycruz | June 16, 2009, 17:16You’re welcome. When it comes to arranging things in general, there’s probably nothing more useful than table coding.
Posted by Panos | June 17, 2009, 05:50[Comment transferred here – P.]
Posted by djeddieo | June 17, 2009, 16:48Omg thank you so much, I been trying to figure this out for ages and you made it so simple!!
You should be paid kajillions of dollars and crowned king for all the help you give!!
Thanks again!
Posted by Lola | November 23, 2009, 05:19@Lola: You’re exaggerating, but you’re welcome!
Posted by Panos | November 23, 2009, 09:40your blog has been very helpful to my blog. I made a lot of little changes here and there Thanks to you.
Posted by Stephen | January 1, 2010, 01:26@Stephen: You’re welcome. (Sorry for the delayed response – was on vacation.)
Posted by Panos | January 6, 2010, 18:30This post has been extremely helpful to me! Thanks very much.
On the subject of alignment, is there a way to get a calendar widget to better align within the sidebar?
I have tried inserting ALIGN=CENTER code into the calendar title as a way to force it; however WP just deletes that code.
Cheryl
Posted by cherylmarieknits | May 18, 2010, 16:42As you found out, you can’t use html tags in titles. But even if you could, a centering code in the title would center the title only, not the rest.
The only widget whose content you can directly modify is the text widget, because you write the actual content yourself. In all other widgets the content is produced automatically: you can only change its appearance if you have the paid CSS upgrade and experience in CSS editing.
By the way, when you want to apply more than one style elements to the same text, you put them in the same tag. Not like that:
<span style="color:#993300;"><div align="center">MY PROGRESS TO-DATE</div></span>
But like that:
<div align="center" style="color:#993300;">MY PROGRESS TO-DATE</div>
Or like that:
<div style="text-align:center;color:#993300;">MY PROGRESS TO-DATE</div>
Posted by Panos | May 18, 2010, 20:25thanks !!!!! nice tips!!!!
Posted by los6elementos | October 1, 2010, 15:13@los6elementos: You’re welcome!
Posted by Panos | October 2, 2010, 04:21Excellent! I just got my text to wrap around video after tons of searching and bad advice. Thank you!!
Posted by cocco | January 26, 2011, 22:30@cocco: You’re welcome!
Posted by Panos | January 27, 2011, 11:43is there some way that I can use this code to post two videos side by side?
Posted by zdueck | February 14, 2012, 06:16See other post:
https://wpbtips.wordpress.com/2009/04/30/positioning-shortcode-objects-pt-3/
Posted by Panos | February 14, 2012, 06:18Thanks! This really helped me get textwrap to work with videos. It didn’t work at first and I got annoying borders around the table, but I peeked at the source code for this page for modifications. Here it is for other’s reference:
SHORTCODE HERE
Posted by flamingbike | March 7, 2012, 22:58You’re welcome.
Some of the newer wordpress.com themes display table borders by default. If you don’t have the Custom Design upgrade, you override them as explained in this post:
https://wpbtips.wordpress.com/2010/06/15/overriding-table-borders/
As for your attempt to paste your solution, check the red notice at the bottom.
Posted by Panos | March 8, 2012, 01:30