1. Welcome to MotorMavens.net - The premiere car culture community!
    You are viewing this site as a guest.

    and share your favorite aspects of car culture with others. can create their own profile pages, photo galleries & participate in our regular photo contests!

How To: FORMAT IMAGE PREVIEWS To Improve Your Reader's Blog Posts!

Discussion in 'Introduce Yourselves' started by Antonio Alvendia, Dec 28, 2012.

  1. Antonio Alvendia

    Antonio Alvendia Editor in Chief, MotorMavens Staff Member

    It has been brought to our attention that when they create a new forum post, most of our readers don't understand how to make their 4 image previews (1 big photo and 3 small thumbnails) show up on the Reader's Blog Homepage. Well, here are instructions on how to do it!
    1) How do I get the 3 small image preview thumbnails to appear with my post on the Reader's Blog Homepage?
    1. Create or navigate to the thread.
    2. Click the Upload A File button, and upload between 3-10 images to your post as attachments. Each image should be between 800px and 1100px wide, ideally. Screen Shot 2012-12-28 at 6.28.13 PM.png
    3. Insert every image as a... FULL IMAGE. Screen Shot 2012-12-28 at 6.30.15 PM.png
    4. Write your text captions and/or stories underneath each photo to make it look good!
  2. Antonio Alvendia

    Antonio Alvendia Editor in Chief, MotorMavens Staff Member

    2) How do I get the large "cover image preview photo" to appear with my post on the Reader's Blog Homepage?

    1. Create or navigate to the thread.
    2. Select the image that you want to appear as the main "cover photo" on the Reader's Blog Homepage and open it in full size in another window. If you're on a Mac, you can simply Command+Click the red image name. If you're on a PC, you can probably just right-click Open in New Window.............. Screen Shot 2012-12-28 at 6.50.23 PM.png
    3. Once the image has opened in another tab/window in full size, select Copy Image URL for the desired image. Screen Shot 2012-12-28 at 6.54.54 PM.png
    4. Move the cursor to the location in your post that you want the photo to appear. At the Post Editor Toolbar at the top of the post, click on the button that says Insert/Edit Image, which has a photo of a tree on it. insert img.png
    5. A pop-up will appear, which prompts you to Enter Image URL for the desired "Cover Photo." Paste the URL into the box, and hit Insert. Screen Shot 2012-12-28 at 7.00.57 PM.png
    6. Make sure to use a "Prebreak BBCode" after the photo and the text that you want to appear on the front page. The code is in brackets below, in the photo. Screen Shot 2012-12-28 at 7.09.00 PM.png
    7. Remember to hit the Save Changes button below your post, and you're done!

    Attached Files:

  3. Antonio Alvendia

    Antonio Alvendia Editor in Chief, MotorMavens Staff Member

    3) How do I modify which text from my thread appears on the Reader's Blog home page?

    Function: Prebreak BBCode

    Description: This BBCode allows you to take control of the article/thread content that appears on the home page, ignoring the Max Summary Length character limitation, so you may now show as many or as few characters as you like[. This also allows you to specify the text that gets hyperlinked. The default text is 'Continue reading...'. The BBCode to use looks like this:
    Code:
    [prebreak]Your Text Here[/prebreak]
    How it works:
    Code:
    On the portal, everything in the article up to the [prebreak] tag will be visible in plain text, whereas the text between the [prebreak] and [/prbreak] tags will appear as a link to the forum thread. All text after the closing [/prebreak] tag will not appear on the portal.
     
    So, in the thread, if you have something like...
     
    This is line 1 of my article.
    [prebreak]Continue reading[/prebreak]
    This is line 2 of my article and so on.
     
    On the portal, this will be visible as:
     
    This is line 1 of my article.
    Continue reading{This will be a link to the forum thread}
     
    In the thread, it will be visible as:
    This is line 1 of my article.
    This is line 2 of my article.
     
    If you would like to simply break the article at a particular point, just insert the [prebreak][/prebreak] tags and leave the space between them empty. This will just break the article at that point without hiding anything.
    Please do not feature more than one image before the prebreak code.
  4. Antonio Alvendia

    Antonio Alvendia Editor in Chief, MotorMavens Staff Member

    4) How do I hyperlink the large Cover Image from the thread preview on the Reader's Blog Home Page to the thread itself? (This allows people to get to your post by clicking the big photo, rather than only clicking the Post Title.)
    1. Create or navigate to the thread.
    2. Copy the URL, making sure it is a clean URL. A clean URL will be without a URL anchor, which is a hashtag followed by additional information that tells the browser to scroll to a certain point on the page after loading.
      Dirty URL:
      Code:
      http://motormavens.net/threads/tips-feature-updates.381/#post-592
      Clean URL
      Code:
      http://motormavens.net/threads/tips-feature-updates.381/
    3. Click Edit in the footer of the thread and click or select the first image.
    4. Click the 'Insert/Embed a link' button in the tool editor:
      edit.link.jpg
    5. Paste the Clean URL into the popup field and click embed.
    6. Click 'Save Changes' in the thread and then navigate to the home page to verify it works as desired.
  5. Antonio Alvendia

    Antonio Alvendia Editor in Chief, MotorMavens Staff Member

    5) If you follow these steps correctly, your final image post will look like THESE POSTS (below) on the main MotorMavens Reader's Blog FRONT PAGE:

    [​IMG]

    [​IMG]
    [​IMG]

    Attached Files:

Share this page with other Mavens!