[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.
He, was a chance for me to sneak in something from my world!
mmm. 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!
I’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).
Panos:
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.
You’re welcome; I’ve started gathering these little things here, hoping they might be useful to others too.
Thanks for posting this. I always wondered if there was a way to align the videos.
You’re welcome. When it comes to arranging things in general, there’s probably nothing more useful than table coding.
[Comment transferred here – P.]
Omg 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!
@Lola: You’re exaggerating, but you’re welcome!
your blog has been very helpful to my blog. I made a lot of little changes here and there Thanks to you.
@Stephen: You’re welcome. (Sorry for the delayed response – was on vacation.)
This 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
As 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>
thanks !!!!! nice tips!!!!
@los6elementos: You’re welcome!
Excellent! I just got my text to wrap around video after tons of searching and bad advice. Thank you!!
@cocco: You’re welcome!
is there some way that I can use this code to post two videos side by side?
See other post:
https://wpbtips.wordpress.com/2009/04/30/positioning-shortcode-objects-pt-3/
Thanks! 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
You’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.