Photo Feed

Display iKjeld photos on your website. Every time a new photo essay is uploaded to iKjeld.com, the photo feed on your site will automatically update. All you need to do is copy and paste the code. This service is 100% free!

You can adjust the lay-out, colors, size and fonts of the feed to make it perfectly fit into the look of your website.

Requirements

The page you place the code on must end on .php or allow php includes.

Step 1: Put one of the following codes on your page:

Large image (512 × 343 pixels):
include "http://ikjeld.com/newsfeed/";
(The size of the image can be adjusted using css. See below.)

Small image (120 × 80 pixels):
include "http://ikjeld.com/newsfeed-thumb/";

You may need to surround the code with php:

<?php
include "http://ikjeld.com/newsfeed/";
?>

Step 2: Adjust the layout:

On your css stylesheet, add the following id’s and class:

Large Image:
#ikc_article – controls the whole block
#ikc_title – controls the title
#ikc_image – controls the image
#ikc_image_dimensions – controls the size of the image
#ikc_text – controls the text
.morelink – controls the link to iKjeld.com

Small Image:
#ikc_article_thumb
#ikc_title_thumb
#ikc_image_thumb
#ikc_image_dimensions_thumb
#ikc_text_thumb
.morelink

CSS examples

#ikc_article {width: 512px;}
The whole block gets a width of 512 pixels, neatly aligning the text with the photo

#ikc_title a {font-weight: bold; font-size: 14px;}
The title gets a bold font with the size of 14 pixels

#ikc_image {border: 1 px solid #000;}
Surround the photo with a black border

#ikc_image_dimensions {width: 256px; height: 171px;}
Resize the image. Your page will still load the original image, but display it in smaller dimensions. Make sure that you calculate the width and height correctly. The original size of the photo is 512 × 343 pixels. If you use a width that is 40% of 512, the height should also be 40% of 343: 205 × 137 pixels. There is a possibility that the photo may look strange in certain dimensions.

#ikc_text {font-color: #ccc; line-height: 1.5em}
Make the text light-grey, and increase the space between the lines.

.morelink a {font-weight: bold;}
Make the link bold.

How to place the text next to the image

The following css example will create a photo feed with the photo on the left and the text on the right. Please consider interference from your existing css when using this example.

#ikc_article {clear: both;}
#ikc_title a {font-weight: bold; font-size: 14px;}
#ikc_title {margin-bottom: 7px; clear: both;}
#ikc_image {float: left;}
#ikc_text {float: right;}

The Latest Photo Feed

No adjustments have been made to this feed, it automatically uses the css from your current active stylesheet. To make it look better you would at the very least want to change the look of the title.

Small Image Sample

The following css was used for the photo feed below.

#ikc_article_thumb {clear: both; margin-bottom: 10px;}
#ikc_title_thumb {font-weight: bold; font-size: 14px; margin-bottom: 7px; clear: both;}
#ikc_image_thumb {width: 120px; float: left;}
#ikc_text_thumb {width: 380px; float: right; font-size: 10px;}