Adding alternating images to Posts and Pages

Classes for adding alternating photos

For use on most Posts and Pages

  1. Write the text of the article in the main editing box. Save.
  2. Optimize images to roughly 300px wide.
  3. Click the Upload/Insert button to add all images to the Media Library at once. Upload/insert button
    • If the image is already in the library, don’t add it again.
      • Update the TitleAlternative TextCaption.
      • Remove the link in the Description box.
      • Remove the link in the Link URL box.
      • Keep the Alignment at NONE.
      • Choose the Full Size size.
    • Click Save all Changes and Close the upload window. Save all Changes button
  4. Place the cursor at the very top left of the text in the editing box.
    1. Click Upload/Insert again.
      • Click Show for the image you want to show first.
      • Click the Insert into Post button.Insert into Post
    2. Click the HTML tab.
    3. Add three classes to the <img> tag to improve style and placement:
      •  <img  class=”alignright fancy phototopright” title=”Sched…
      • Click Update then View Page.
  5. Place the cursor a few paragraphs down from the top of the editing box.
    1. Add another image following steps all three steps from step 4 above.
    2. Instead of assigning the alignleft and phototopright classes, type alignleft and  photomiddleleft instead.
  6. Place the cursors a paragraph or two from the bottom of the article text.
    1. Add another image following all three steps from step 4 above.
    2. Instead of assigning the phototopright or photomiddleleft, type photobottomright instead.

Leave a Reply

Your email address will not be published. Required fields are marked *