Menu
menu

Step by Step Guide to Creating an Entry

Watch the video or follow the text instructions below – we’ve made it easy for you!

Before you Begin

Thank you for becoming a contributor to Leatherpedia. We’re happy you’re here!

Creating an entry can be as simple or complex a process as you wish to make it. This step-by-step guide takes you through the steps of creating a sophisticated entry, which in some cases requires some basic HTML coding. If you are not experienced in HTML or do not have the time to learn through this guide, it is perfectly acceptable to create a text-only entry, which is easy and intuitive. In this case, other contributors may wish to add images or media to your entry at a later time.

The Text Editor

Entries can be created by clicking the “Create Entry” menu item once you are logged in. Please get started here. On the Create Entry page, you will see an empty text editor. The text editor has three functionalities: Visual (where you can enter text, and it will appear formatted roughly the same as once the page is published), Text (where HTML code can be utilized, and is useful for formatting media such as photos), and Add Media (where images can be uploaded).

Step 1: Add and Format Text (Easy)

1. Add a title. This is the name of your entry.

2. Add your text. We recommend creating your entry text in a word processing application such as Microsoft Word. Once you have finished this, copy and paste your text into the visual text editor.

3. Formatting. Text will be formatted as “Paragraph” by default. For main headings, highlight the heading text and select “Heading 2” from the Paragraph drop-down menu. For subheadings, choose “Heading 3” and for subheadings of these, use subsequent Heading classes. Your paragraph text likely does not need any further formatting, unless you have tables or lists as a part of your entry.

Step 2: Hyperlink your Text (Easy)

Hyperlinking is an important feature of Leatherpedia, as internal links bind the Project together into an interconnected whole. Appropriate links provide instant pathways to locations within Project that are likely to increase readers’ understanding of the topic at hand.

1. Look through your text for subjects that you think may already have a Leatherpedia entry that would be useful to link to. For example, if you are writing an entry on Guy Baldwin, you may wish to highlight International Mr. Leather and link to it.

2. In the Visual text editor, highlight the subject text you wish to link to.

3. Click the Hyperlink button at the top of the text editor. The button is represented by an image of a chain.

4. In the text field that pops up, type the subject name of the entry you’re looking for. In the Guy Baldwin example from above, you would type “International Mr. Leather.” If there is a page of that name that exists, it will appear. Click it, and click the turquoise “apply” button to insert the hyperlink.

Your hyperlink should now be added. You’ll know you were successful if the text changes color to blue. If you would like to remove the hyperlink, select the text and click the Remove Link button in the top bar of the Visual text editor, represented by the broken chain.

Step 3: Add Images/Media (Intermediate)

You may or may not wish to add images to your entry. If you are not experienced with basic HTML code or do not have the time to follow the steps below, you may wish to stop here and post your entry. This is perfectly acceptable, and another contributor may wish to add images at a later time. Or if you’re feeling ambitious, please feel free to continue along!

Images appear throughout entries in relevant sections to help make the entry more informative and visually appealing. Images can either be formatted to align to the left or right hand side of the page. The best entries alternate between left alignment and right alignment. To add an image to your entry, follow these steps:

1. In the Visual tab of your text editor, navigate to the beginning of the paragraph where you would like your image to appear.

2. Click the “Add Media” button.

3. Follow the prompts to upload a new image.

4. Once uploaded, on the right hand side, add a title and alt text. Alt text is the text that appears in the event the image cannot be loaded, so it should be descriptive of the image as a whole. The other fields may be left blank. Click the “Insert Into Page” button. The image will not appear formatted correctly; do not worry, we will fix this in the next step.

5. Click the “Text” tab at the top of the text editor. You should now see the image represented by an HTML tag beginning with “<img”, followed by a long string of code. This is the HTML code for your image.

6. After the end of the code for the image (noted with the “/>” symbols), copy and paste the following code:

If you would like to align the image to the left side of the page:

<figure class="wp-caption alignleft"><img title="INSERT YOUR IMAGE TITLE HERE" src="INSERT THE LINK TO THE IMAGE SOURCE HERE" alt="INSERT YOUR ALT TEXT HERE" /><figcaption class="wp-caption-text">INSERT YOUR CAPTION TEXT HERE</figcaption></figure>

If you would like to align the image to the right side of the page:

<figure class="wp-caption alignright"><img title="INSERT YOUR IMAGE TITLE HERE" src="INSERT THE LINK TO THE IMAGE SOURCE HERE" alt="INSERT YOUR ALT TEXT HERE" /><figcaption class="wp-caption-text">INSERT YOUR CAPTION TEXT HERE</figcaption></figure>

7. Now, take snippets of the original image code from Step 5, to fill in the necessary areas from the code in Step 6.

  • First, replace the INSERT YOUR IMAGE TITLE HERE text in the code from Step 6 with the the Image Title you chose in Step 4. Note: you must preserve all quotation marks. Replace the capitalized text only.
  • Replace the INSERT THE LINK TO THE IMAGE SOURCE HERE text with the “src” URL from the image code generated in Step 5. This URL should start with “http://”.
  • Replace the INSERT YOUR ALT TEXT HERE text with the alt text you chose in Step 4.
  • Replace the INSERT YOUR CAPTION TEXT HERE text with the text you would like to use as a caption for the image. Please do not use all capital letters for captions.

8. Delete all of the image code from Step 5 from your text editor, so that only the code from Step 6 remains.

Congratulations! You have successfully added an image.

Step 4: Add Infobox (Intermediate)

The Infobox is the photo and description at the top right-hand side of the entry. It contains an image and relevant information on the subject. For a person, this includes the name and what the person is known for. Creating the Infobox:

1. Select the “Text” tab at the top of the main text editor.

2. Ensure you are scrolled to the very top of the text editor, clicking your cursor in the very top left-hand section of the box. The next steps track closely to the steps followed to add a regular image.

3. Click the “Add Media” button.

4. Follow the prompts to upload a new image, and as described in the prior section, add a title and alt text. Click the “Insert Into Page” button. The image code will appear. As a reminder, this code should be the first thing that appears in the box.

5. After the end of the code for the image (noted with the “/>” symbols), copy and paste the following code:

<figure class="wp-caption alignright"><img title="INSERT YOUR IMAGE TITLE HERE" src="INSERT THE LINK TO THE IMAGE SOURCE HERE" alt="INSERT YOUR ALT TEXT HERE." /><figcaption class="infoboxheader-text"><strong>INSERT NAME OF ENTRY HERE</strong><br>INSERT WHAT THE SUBJECT IS KNOWN AS HERE</figcaption></figure>

6. Now, as with the images section, take snippets of the original image code from Step 4, to fill in the necessary areas from the code in Step 5.

  • First, replace the INSERT YOUR IMAGE TITLE HERE text in the code from Step 6 with the the Image Title you chose in Step 4. Note: you must preserve all quotation marks. Replace the capitalized text only.
  • Replace the INSERT THE LINK TO THE IMAGE SOURCE HERE text with the “src” URL from the image code generated in Step 5. This URL should start with “http://”.
  • Replace the INSERT YOUR ALT TEXT HERE text with the alt text you chose in Step 4.
  • Replace the INSERT NAME OF ENTRY HERE text with the name of your entry. For example, if the entry is about Guy Baldwin, you would write “Guy Baldwin”.
  • Replace the INSERT WHAT THE SUBJECT IS KNOWN AS HERE text with the name of your entry. Again in the example of Guy Baldwin, you may wish to write “International Mr. Leather 1989”. If you would like to enter more than one, please separate the lines with the <br> tag.

7. Delete all of the image code from Step 5 from your text editor, so that only the code from Step 6 remains.

Final Step: Posting your Entry

Click the two check boxes below the text editor and click the “Add New Entry” button.

Congratulations, you have created an entry!

Sidebar