How to embed a Vimeo video

Following a tip in Comments to a WP’s support page on how to embed a Vimeo video, here’s a demo:

The above video was embedded using this shortcode (no space after [ and before ] ):

[ vimeo http://www.vimeo.com/7243598 ]

How to resize

The above video can be resized from the standard 400×300 to a larger 600×450 by inserting the width and height parameters in the shortcode:

[ vimeo http://www.vimeo.com/7243598 w=600&h=450 ]

This is the resized video:

Hmmm, that was easy too.

Thanks T3CK for the tip. And thanks Ileane for the prompt.

More resizing and formatting

Using a DIV tag and CSS, you can easily position a smaller video (left or right) and wrap text around it.

Here is a sample of the above video resized to 300×225 and text-wrapped:

Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah.

Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah.

Blah blah blah blah. Blah blah blah blah. Blah blah blah blah.

Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah. Blah blah blah blah.

Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to Technorati

Revisiting PicApp images and embed codes

Upon the request of some friends, I am revisiting my earlier post, “Experimenting with PicApp images in my blog“.

For this post, we are running two tests, namely: embedding the PicApp code using the “image code”, and embedding the PicApp code using the WordPress.com shortcode.

I selected the following options to generate the codes: image size 380×255, left-aligned, text-wrap. I also copied and pasted the image info as my text to test text-wrapping.

Here is the result using the image code:

TAR-TASS 71: ST PETERSBURG, RUSSIA. OCTOBER 20, 2009. A scene from the ballet “Russian seasons” performed a gala concert of ‘Diaghilev – Post Scriptum’ International Arts Festival marking the 100th anniversary of Diaghilev’s ‘Ballets Russes’. (Photo ITAR-TASS/ Yuri Belinsky).







Here is the result using the short code:

[picapp src=”a/f/1/7/Diaghilev__Post_d5c4.JPG?adImageId=6233328&imageId=6862271″ width=”380″ height=”252″ /]TAR-TASS 71: ST PETERSBURG, RUSSIA. OCTOBER 20, 2009. A scene from the ballet “Russian seasons” performed a gala concert of ‘Diaghilev – Post Scriptum’ International Arts Festival marking the 100th anniversary of Diaghilev’s ‘Ballets Russes’. (Photo ITAR-TASS/ Yuri Belinsky).

Can we repeat this test, please?

Unsure if the result of the first test is reliable, we ran another test.

We selected another image, selecting the ‘Diaghilev – Post Scriptum’ International Arts Festival brings to close and selecting these options: left-aligned, text wrap, 234×188 to generate the codes.

Here are the results:

(a) Using the image code:

ITAR-TASS 77: ST PETERSBURG, RUSSIA. OCTOBER 20, 2009. Principal dancers Igor Zelinsky and Diana Vishneva perform in the ballet “Sheherezada” as a part of a gala concert of ‘Diaghilev – Post Scriptum’ International Arts Festival marking the 100th anniversary of Diaghilev’s ‘Ballets Russes’ at the Alexandrinsky Theatre. (Photo ITAR-TASS/ Yuri Belinsky) Photo via Newscom







(b) Using the shortcode:

[picapp src=”f/5/d/f/Diaghilev__Post_da94.JPG?adImageId=6234719&imageId=6862281″ width=”234″ height=”188″ /]ITAR-TASS 77: ST PETERSBURG, RUSSIA. OCTOBER 20, 2009. Principal dancers Igor Zelinsky and Diana Vishneva perform in the ballet “Sheherezada” as a part of a gala concert of ‘Diaghilev – Post Scriptum’ International Arts Festival marking the 100th anniversary of Diaghilev’s ‘Ballets Russes’ at the Alexandrinsky Theatre. (Photo ITAR-TASS/ Yuri Belinsky) Photo via Newscom

Observations:

  • The image code is a better alternative than the shortcode in displaying a text wrapped around the image.
  • The image code is truncated, with the javascript line in the image code being scrubbed once the post is saved. I can understand this as being a WP security precaution.
  • There is no interface between WP and PicApp. It would be a welcome feature if the PicApp images for selection are right inside the Dashboard so you don’t have to switch from WP to PicApp windows.

Let me know what you think of these experiments. Which embed code will you use?

Updated 22 October:

I double-checked the Image Code which displays a more controlled text-wrap. My suspicion is that the stylesheet it uses was not built into, or not properly built into, the code which says “for WordPress.com” which I call the “WP shortcode” or simply “shortcode.”

Adding the same stylesheet to the shortcode (item b, above), here is the result:

[picapp src=”f/5/d/f/Diaghilev__Post_da94.JPG?adImageId=6234719&imageId=6862281″ width=”234″ height=”188″ /]

ITAR-TASS 77: ST PETERSBURG, RUSSIA. OCTOBER 20, 2009. Principal dancers Igor Zelinsky and Diana Vishneva perform in the ballet “Sheherezada” as a part of a gala concert of ‘Diaghilev – Post Scriptum’ International Arts Festival marking the 100th anniversary of Diaghilev’s ‘Ballets Russes’ at the Alexandrinsky Theatre. (Photo ITAR-TASS/ Yuri Belinsky) Photo via Newscom





What do you know? So, it was the shortcode not being properly coded to include the text-wrapping. We hope that this post reaches our PicApp friends.


A pleasant blogging experience at WordPress.com, so far

I mentioned in my earlier posts that, compared with self-hosted sites which I am very much familiar with, a blog at WordPress.com is restrictive. For one, I could not really do much about customizing a theme unless of course I buy credits to allow me to add custom CSS. Also, I could not install my favorite plugins which of course I understand – considering that plugins are not for everyone.

But even within a small playing area so to speak, I thought running a non self-hosted blog could also be a pleasant online experience. I am quite happy with the way my blog here at WordPress.com is shaping up.  Its structure, content and looks are metamorphosing to those of  my self-hosted blog, thanks to the wonders of widgets. Widgets are something I would like to share with you in my next posts.

In the meantime, you may wish to check out my personal site including some Twitter updates @romycc.  Again, if you have a subject you would like us to tackle before the widgets posts, let me know.

How to blog at WordPress.com

For the last few five years or so, we have been using WordPress as a blog platform or a CMS in most of our websites. Being an open-source, we can tap onto the creative and ingenuous works of WordPress community of bloggers, developers and designers to produce easy-to-manage websites.

As a result of our 24/7 encounters with WordPress, we have developed a knowledge base of information on how to select themes, install plugins and other customisation works which we are sharing with others with self-hosted blogs.

The expert-information needs of those with blogs hosted at WordPress.com however are different. Compared with self-hosted blogs, WordPress.com-hosted blogs are understandably restricted when it comes to design customization and plugins installation and usages.

It is in this light that we have created a blog at WordPress. Hopefully, we should be able to get a better understanding of how to run a blog at WordPress.com from which we can help our friends on how they can best maximize and optimize their blogging efforts at WordPress.

Our next entry: How to select a WordPress theme

Updated 22 October 2009: After this first entry, we have posted 15 other observations on how to blog at WordPress.com. Thanks to those who have sent their feedback using the comments box in this site or through our private email.

Updated 11 November 2009: Upon the request of some friends, we have re-published this and other articles in A Matter of Sharing | How to blog at WordPress.com