Japan NewsTue 21
Everything I believed in was demolished...
Real Japanese Fashion

Subscribe

Mail

First Name

Daily   Biweekly  

RSS | Atom

Ads

Advertise on iKjeld

Japanese Furniture

Kitchen cabinets, coffee tables, more.

Japanese Streets Friends

The largest friend finder in Asia!

In the News

Metro Tokyo ordinance on sexually explicit manga walks fine line on freedom of speech
The Mainichi Daily News, 12/13/2010
SDP head criticizes Kan's possible dispatch of SDF to Korean Peninsula
The Japan Times, 12/13/2010
2 Japanese local assembly members visit one of Senkaku Islands
Associated Press, 12/13/2010
Why Japan is ready for anything Pyongyang might want to throw at it
Guardian, 03/01/2010
Japan disputes racism allegations at U.N. panel
Kyodo, 02/26/2010

(Receive headlines like these in the Daily Newsletter. Sign up above!)

Currency Rates

• Photo Feed
iKjeld.com » About » • Photo Feed

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;}


Previous Photo Essays

See previous photo essays to get a good idea of the kind of material that iKjeld.com provides.