[Tutorial] Adding images to your subreddit.

https://www.reddit.com/r/CSSTutorials/comments/mv3zx/tutorial_adding_images_to_your_subreddit/

created by Raerth on 30/11/2011 at 20:07 UTC*

18 upvotes, 2 top-level comments (showing 2)

In this tutorial I will show you some of the most common ways to add images to your subreddit.

1. Adding an image link

2. Adding an non-linked image

Before we start, these tutorials assume you know that you upload images to your subreddit on the `/about/stylesheet` page. The upload form looks like this[1].

1: http://i.imgur.com/ikzpe.png

1. Adding an image link

As an example, this code will add the twitter logo to a the link of a twitter account.

You can adapt this code for any image link.

Upload this picture[2] to your stylesheet and call it "twitter".

2: http://thumbs.reddit.com/t5_2rzot_2.png

In the sidebar you will need to create the link to your twitter account. Because you are adding the image later via CSS, you will not need any link text.

> *[](*`http://twitter.com/BritishTVreddit`*)*

In the stylesheet you will need this CSS:

> /*Twitter Feed Graphic*/

.side a[href="`http://twitter.com/BritishTVreddit`"]:after {

width: `68`px;

height: `16`px;

content: "";

background-image: url(%%*twitter*%%);

display: inline-block;

position:relative;

}

The `blue` values are the only bits you will need to change if using this to create a different image.

This is how it will look.

2. Adding a non-linked image

This code will enable you to add a non-linked image to your sidebar or comments. This is how subreddits add rage-faces.

In this example, we will show you how to add a star[3]. Upload this image to your stylesheet and call it "star".

3: http://i.imgur.com/xaIo2.png

You will need to create an anchor link wherever you want the image to appear:

> [](#`star`)

Add this code to your stylesheet:

> /*Star Image*/

a[href$="`star`"] {

width:`16`px;

height:`16`px;

content:"";

background-image:url(%%`star`%%);

position:relative;

display:inline-block;

cursor:default;

}

The `blue` text shows the values which would need editing for a different image.

[Tutorial] Adding images to your subreddit.

Contents

1. Adding an image link

2. Adding a non-linked image

Comments