you're reading:
Alignment, Attachment pages, Audio player, Color changes, Galleries, Html & inline css codes, Indenting, Polls, Shortcodes, Text-wrap, Unlinking, Videos

Shortcode objects and changing their default positioning (pt. 1)

http://wpbtips.wordpress.com/

[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]
[1] Can include additional commands – see here and here.
http://wpbtips.wordpress.com/
[2] Can include additional commands, for changing default number of columns, changing image size, opening images alone instead of attachment pages, getting gallery from another post or page – see here. Well, almost…
Important note: It’s safer to paste shortcodes in the html editor. In the visual editor you may get a live link instead of plain text, and that won’t work. If you paste them in the visual editor, make sure the URL doesn’t become blue; if it does, highlight it and click the Unlink button.

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”.

http://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.
About these ads

Discussion

26 thoughts on “Shortcode objects and changing their default positioning (pt. 1)

  1. Awe! There is more meat in those videos than in any food blog.

    Posted by Tess | April 6, 2009, 19:14
  2. He, was a chance for me to sneak in something from my world!

    Posted by Panos | April 6, 2009, 23:43
  3. 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!

    Posted by Tess | April 7, 2009, 05:49
  4. 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).

    Posted by Panos | April 7, 2009, 17:49
  5. 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.

    Posted by educlaytion | April 29, 2009, 00:00
  6. You’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:08
  7. Thanks for posting this. I always wondered if there was a way to align the videos.

    Posted by jaycruz | June 16, 2009, 17:16
  8. You’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
  9. [Comment transferred here - P.]

    Posted by djeddieo | June 17, 2009, 16:48
  10. 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!

    Posted by Lola | November 23, 2009, 05:19
  11. @Lola: You’re exaggerating, but you’re welcome!

    Posted by Panos | November 23, 2009, 09:40
  12. your 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
  13. @Stephen: You’re welcome. (Sorry for the delayed response – was on vacation.)

    Posted by Panos | January 6, 2010, 18:30
  14. 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

    Posted by cherylmarieknits | May 18, 2010, 16:42
  15. 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>

    Posted by Panos | May 18, 2010, 20:25
  16. thanks !!!!! nice tips!!!!

    Posted by los6elementos | October 1, 2010, 15:13
  17. @los6elementos: You’re welcome!

    Posted by Panos | October 2, 2010, 04:21
  18. Excellent! 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
  19. @cocco: You’re welcome!

    Posted by Panos | January 27, 2011, 11:43
  20. is there some way that I can use this code to post two videos side by side?

    Posted by zdueck | February 14, 2012, 06:16
  21. 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

    Posted by flamingbike | March 7, 2012, 22:58
  22. 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:
    http://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

Trackbacks/Pingbacks

  1. Pingback: Gyoza, The Japanese Pot-Sticker « Tess’s Japanese Kitchen - April 13, 2009

  2. Pingback: Intro To Programming - September 10, 2009

  3. Pingback: Multiple ID gallery? | Quirky - May 13, 2013

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,253,345 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: