The technique to create a feature with embedded images, and which flows into the space underneath the logo (normally occupied by a vertical strip of images), requires you to:

“Advanced” Features

The table insertion method described below is courtesy of Jim Peacock at thebestofluton – a good source of great-looking features!

Insert a table into the feature text by adding a tiny bit of HTML (don’t worry, it’s easy)
Have the images you want to embed online, so either already hosted on a website (a client’s site or Flickr for example), or uploaded to a website you own and manage. The image mustn’t be wider than 516 pixels though, to avoid it overwriting the fixed part of the website, so for most purposes I resize the image and upload it to my own site – I also know then it’s not going to get moved or deleted by someone else.

To create the table

That’s the table done – save the edited feature now and check it looks OK on the site.

To embed an image:

Locate the image online in a browser – below I’m embedding three images from a craftsperson’s website. If the image is on your own server, then bring it up in a browser window or make a note of the full URL of the image, which will be something like http://www.yoursite.co.uk/dir/yourimage.gif

Edit the feature in the Console, in “Edit” not “HTML” mode, and create a blank line where you want the image to go

Just drag and drop!

Drag the image from the browser and drop it on the feature where you want it to go – this will automatically create the code to embed the image:

If drag & drop won’t work for some reason, then Edit…Copy… the image and Edit…Paste… into the Console, this will embed the image in exactly the same way

If that doesn’t work you can insert the HTML manually:

Save and admire your handiwork.

Images “floated” within text

If you go back into the HTML editor, the code for your embedded image will look like this if you’ve dragged in an image from a third-party website:

To ‘float’ the image on the left of the table and allow text to be placed to the right of it, add the following just before the src bit:

style=”padding-bottom: 10px; padding right: 20px” align=”left”

To float to the right, add instead:

style=”padding-bottom: 10px; padding right: 20px” align=”right”

To embed a YouTube video

YouTube is very helpful in that it provides you with the code to embed a video, you just have to drop it into your feature in the right place, and scale it to the right size.

1. Here’s a feature with a video embedded:

http://www.thebestof.co.uk/local/loughborough/business-guide/feature/burleigh-springs/43560

2. Here’s the YouTube page which hosts the video:

The code you need is here, select it and Edit…Copy… to your clipboard

Use this button to customise the embed code before you copy it - maybe untick the “include related videos” to prevent anything untoward being displayed

3. And here’s the code – edit the width and height parameters to match the width of the table you’re dropping it into, in this case my table is the standard width of a feature, about 330 pixels wide:

Just paste this into your feature in the correct place and the video will embed itself.

Embedding a slide presentation

You can use free website Slideshare to upload PowerPoint slide presentations and embed them into features in exactly the same way as for YouTube videos above.

See: http://www.thebestof.co.uk/local/loughborough/business-guide/feature/thebestofloughborough/54222

Embedding Word, Excel or PDF Documents

I came across a site called Docstoc which allows you to upload .DOC, .PDF, and .XLS documents, these are rendered in an online viewer which can be embedded in your feature; no need for the website visitor to have a copy of Word or Adobe Reader or Excel in order to read the documents. Very useful if you don’t have your own hosting or tools to convert documents between formats – just upload to Docstoc, copy the embed code, and drop into your feature as you would for YouTube (above).

Sample embed code:

Notes: (a) you can change the width (and height if necessary) to match your table (b) you can delete the yellow-highlighted code, it’s just an additional text link under the main document window.