HTML
HOW-TO : Insert Images
General Image Use Policy
If you want to become an Art, Editorial Cartoon or Photography contributors, please send us a link to your portfolio at editors@culturekitchen.com.
We have a small gallery of images in our Galleries. If you would like to contribute re-usable images to the galleries, please ask for gallery contributor privileges.
Use of third party images
At culturekitchen we take our right to fair use of copyrighted materials very seriously. We believe we should be able to use third party photographs in situations where the image is needed as a point of reference as is in the case of the People Magazine cover of Brangelina.
Unfortunately, the lawyers at People Magazine did not agree with us; prompting our hosting company to harrass us.
We will defend our rights to fair use, but we also ask you to refrain yourself from using third party photographs without their consent --that is, unless they are in the public domain or unless there is a really good fair use reason like the Brangelina story.
Which means, if in doubt, just ask us.
Here are some public domain resources for photographs and other media :
- WikiMedia
A wiki, by the people of Wikipedia, chockful of public domain images. - Creative Commons Search
Find any kind of media with some or no copyright restrictions on the net through this portal. - Public Domain Photographs
Unbelievable advertising driven public archive of old and modern photographs. It will leave you drooling for more. - Public Domain Central
Do we need to explain? - The Memory Hole
Harrowing compilation of supressed images related to 9/11 and the current occupations of Iraq and Afghanistan. - Gimp Saavy Public Domain archives
Copyright-free images made with GIMP, the free and open-source photo manipulation program. - USA. GOVs archives
A historical archive in photographs. - NOAA Photo Library
Awesome collection of metereological events. - Other sources:
Yellowstone National Park
US Fish & Wildlife
OurMedia
Environmental Education Station
Image Hosting
culturekitchen does not host images or photos for members.
If you want to embed an original image or photo, you must load your photo onto your own image server. You can also use photo hosting services like Flickr or Buzznet.
If you open an account with any these services, you need to make sure you allow for culturekitchen posts to hotlink to your account. You should find information on this at your photo hosting service's account settings.
Allowed Image Formats
We only allow embedding of compressed file formats : JPG, GIF, PNG.
No PSDs, BMPs or TIFFs! These image formats are uncompressed files that suck massive amounts of bandwidth.
Embedding an original image or photo
You need the <img src="http://"> syntax to embed an image. So to embed the Cross Fingers image,
I had to write the following piece of code,
<img src="http://culturekitchen.com/files/images/crossed_fingers_0.thumbnail.jpg">
Sizing Images
All images or photographs posted should not be more than 450 pixels wide. As you can see the following photograph is too wide:
You don't need Photoshop or GIMP to scale this image. All you need to do is to use HTML to force to scale to 450 pixels wide. Here's how you do it:
<img src="http://culturekitchen.com/files/images/dog%20surfing.jpg" width="450">So now the image looks like so :
You can do the same with the LENGTH of the image.
NOTE:
Images can be forced to upscale or downscale by defining their width, length or both. We strong advice against upscaling. Small images that are forced to size up with HTML usually lose focus, render pixilated and basically look awful.
Positioning of Images (regular flow)
You can position images without or without float on the center, left or right of the textarea.
Center Positioning
Use <center><img src="http://culturekitchen.com/files/images/crossed_fingers_0.thumbnail.jpg"> </center> to center your image on top of your text.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Left positioning
If you want an image to be on the left-side of the screen, then do nothing but embed the image link : <img src="http://culturekitchen.com/files/images/crossed_fingers_0.thumbnail.jpg">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Right positioning
If you want it to move to the right while staying on top of the text, then you will have to force it with CSS : <div align="right"><img src="http://culturekitchen.com/files/images/crossed_fingers_0.thumbnail.jpg"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Positioning of Images (floated)
If you would like your photos to be floated, with text flowing by their side, then you need to use HTML to point to the floated side. For our images, you also should define a vspace and hspace of 10.
For left float :
<img src="http://culturekitchen.com/files/images/crossed_fingers_0.thumbnail.jpg" align="left" vspace="10" hspace="10">
For right float :
<img src="http://culturekitchen.com/files/images/crossed_fingers_0.thumbnail.jpg" align="right" vspace="10" hspace="10">
Design | HTML | Images | How-to | Style Guidelines
Allowed HTML tags
Full list of allowed HTML tags
<a> : hyperlink
<b>, <strong> : bold
<blockquote> : quote article
<blink> : creates annoyingly fun blinking words
<br> : force a break between paragraphs
<center> : centered text and images
<cite> : for in-line citations
<code>: to make code visible on the page
<embed>, <object>, <param> : used to insert widgets like YouTube, Revver and Video Google clips
<div>, <style> : for custom CSS styling
<dl>, <dt>, <dd>, <table> <td> <tr> : tags for creating tables
<em> : italics
<form> : forms
<h1> <h2> <h3> <h4> : headers
<HR> : hard line
<iframe> : inline frame
<img> : image
<ol>, <ul>, <li> : lists
<p> : paragraphs
<script> : scripts
<strike> : strike out text without deleting
<span> : groups inline elements for styling
HOW-TO | HTML | Style Guidelines
HOW-TO : Formatting your text with the style bar
You have two sources of information for styling your posts. On top of the post form you have a series of buttons. These buttons allow you a minimum of formatting with no knowledge of style coding in either HTML or CSS.
inserts the tags to create italics.
inserts the tags to bold the text.
is absolutely necessary to introduce quotes from a source that are a paragraph or more long. You wrap the text in
culturekitchen is a community blog aimed at cultural creatives who believe progressive activism starts in the kitchen, the bedroom, the home, the wallet. It is open for all who believe the decline of progressive and libertarian values have set us back as a democratic nation.
For more information on how to handle quotes, please go to How To Quote Sources.
makes it easy to create links to other sites. Now pay attention because there are two parts to using this button.
- When you click on the button you will get the
. You need to put the internet address (URL) to the place you are linking to after the backward slashes [ // ] and right up to the quotation mark with closing bracket [ "> ]. - Right after the the quotation mark with closing bracket [ "> ] is where you put in the text you want to use to point to the link.
Normally I prefer people use the title of the article or page they are pointing to; but you can use text like "Source", "Here", "Link", etc.
- Click on the button again to insert
, the link that closes your code.
So culturekitchen looks like this : culturekitchen.
is used to insert the <"!--break--"> PHP tag (without the quote marks) to divide the content that will go the front page from the rest of the post.
Collaboration | community | HTML | Design | How-to | Style Guidelines
