Hi, please

How To

General tips for posting images:

The basics:

Embedding images in your posts:

More WordPress tutorials here

Getting images next to your name on the site

Gravatar – Globally Recognized Avatars – is a way to get your image in the comments and be able to tie a face to the name. It would be great if you could go get one, so we can make the interaction on the site feel more “face to face”. Just go to Gravatar.com and sign up with the same email you’re using in this blog. The image you upload there will appear in our blog and other blogs supporting Gravatar. as simple as that. Enjoy.

Embedding media inside your post

There are tons of web services that allow you to embed rich content on the page – video, audio, presentations, maps, whatever… Here is what you need to do to make them appear as a part of your post (it’s not bulletproof, but will work in most cases):

  1. Find the media you want to embed
  2. Copy the embed tag from the video/audio/map (it’s usually a line or several lines of code)
  3. Go to the editing window of your post
  4. Switch the view from ‘Visual’ to ‘HTML’ by clicking the ‘HTML’ tab on the top right side of the post authoring area.
  5. You will see your post text with some html tags (don’t panic)
  6. Paste the embed tag in your chosen location on the post
  7. Go back to ‘Visual’ mode and continue editing your post
  8. Save, check your post, hope for the best.

Embed video

This is a simple way to embed video from some of the main video sites:

  1. Find a video on YouTube, Google Video, Metacafe, Vimeo or just a Quicktime or FLV file somewhere on the weborUpload your video to one of these services(if you prefer using another service let me know and I’ll give you specific directions to embedding on our blog)
  2. Copy the URL of the page where you found the video. For example:in this video: http://www.youtube.com/watch?v=RgL9IJMNsMw
  3. Click the add video button from the Visual post editor that corresponds to your video provider of choice (like )
  4. Paste the url in
  5. Click ok

Embed a slideshow presentation from Slideshare

  1. Go to Slideshare.com
  2. Upload / Find the slideshow you want to embed.
  3. copy the ‘embed wordpress.com’ tag
  4. paste anywhere on your page
  5. delete the ‘id=’ and the ‘&doc=’ and the ‘&w=’ and the number that follows before the closing bracket, like this: 
    [slideshare 104829 how-the-social-web-came-to-be2646]

    or:

    [slideshare id doc]

    - id & doc to be replaced by its value

    (make sure there’s no space between the text and the brackets I put it here only for the sake of the example)

Embeding code in your post (without it executing)

Every now and then we want to post some code, either because we’re stuck and we need help or because we want to teach a trick we just found. In those cases we would do it by going into the HTML tab in the post editor interface and wrapping our code with the <pre> tag.

For html we would use:

<pre lang='html4strict'>your html code here</pre>

which could look something like this:

<ul>
<li>list item</li>
<li>another bold <strong>list item</strong></li>
<li>yet another (this time linked) <a class="stylish-links" href="http://www.mushon.com" target="blank">list item</a></li>
</ul>

or in the case of lang=css’ like this:

#navbar li:hover {
  border: 0 0 1px 0;
  background: #ddd;
  decoration: none;
}

or in the case of lang=’php’ like this:

More tips and examples here.

Designing with with Photoshop and Blueprint CSS

Our Design process:

  1. Design a Photoshop mockup using the grid along the lines of the Grids Are Good presentation we went through on Tuesday. Use the starter kit, it’s helpful.
  2. Download Blueprint. Based on the grid you chose (unless you’re going for the default 24x(30+10) grid) modify your screen.css file. Use this grid generator to get the exact css and maybe use the grid.png trick too.
  3. Add Blueprint to your html’s head using this markup: 
    <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if IE]>
<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
  4. Add BP layout styles to your html elements:
    • Start with the container div – this one hold your whole composition
    • Continue with sidebar, main area and so on… (based on your design)
    • If you are confused, check the demos on the BP wiki with Firebug and see how they’ve been doing it.
  5. Create another css file in the css folder and link it after Blueprint’s like that: 
    <link rel="stylesheet" href="css/my-styles.css" type="text/css" media="screen, projection">
  6. Add an “assets” folder in the css folder to use images refered from your my-styles.css file.
  7. Smile, life is good.