Forums / Maintenance / Report Problems

27,697 total conversations in 1,731 threads

+ New Thread


Locked Locked
how do you create "notable examples".

Last posted Sep 03, 2012 at 04:24PM EDT. Added Sep 02, 2012 at 05:19PM EDT
4 posts from 3 users

First of all, start the section with a 'h2. Notable Examples' header. Then leave an empty line between that and the images.

Secondly, grab the HTML code from the images you wish to put under Notable Examples. We'll use Overly Attached Girlfriend as an example. Typically, there are around 6 images under Notable Examples.

Paste it with a empty line between it and the h2 tag. Now, get rid of the line break and 'See more on Know Your Meme' message (it's the part after </a>). I'll highlight it in this example -

<a href="https://knowyourmeme.com/photos/321900-overly-attached-girlfriend"><img src="https://i.kym-cdn.com/photos/images/original/000/321/900/dd3.jpg" /></a><br />See more on <a href="https://knowyourmeme.com">Know Your Meme</a>

Now, apply a height or width parameter. It generally depends on the size of the images you're using. For the Overly Attached Girlfriend entry, we're fitting three images per line with two lines and all images will have a height of 186 pixels. It auto sizes the other one if unspecified to keep with the original ratio.

To do this, in the code for each individual image add in ' height="186" ' in the 'img src' bit before the tag ends (before the >).

Using the same example from before…

<a href="https://knowyourmeme.com/photos/321900-overly-attached-girlfriend"><img src="https://i.kym-cdn.com/photos/images/original/000/321/900/dd3.jpg"height="186"></a>

Now, you'll need to do this for all the examples you'll be using to make them all the same height / width. Also, put a space between the end (</a>) and the beginning (<a href=..) of each image's code to not have them attach to each other.

As I said earlier, it'll be different for each type of image, on how many pixels tall or wide you'll make it, so choose a dimension that's reasonably easy to read (preferably, just change the height, that's what I've noticed the staff doing). You'll also have to put a new line (<br>) after the amount of images you want in that line (not after everyone or else they'll all be in their own line. So for example, after the third Overly Attached Girlfriend image in the code, we put <br> to start a new line for the next three images.

Finally, you should center all of the images by using a center tag ( <center> at the beginning of the images and a </center> at the end.

That should be it, It doesn't really matter if you use HTML or Textile but they both act the same way (except with textile you don't need to get rid of the See more on KYM message). Apologies if I wasn't concise enough. Did that answer your question?

Last edited Sep 03, 2012 at 08:45PM EDT
Skeletor-sm

This thread is closed to new posts.

This thread was locked by an administrator.

Why don't you start a new thread instead?

Yo Yo! You must login or signup first!