Website Editing: Add photo/image/picture to website page

SwimOffice Admin - Email/Print/Calendar

To upload and add photos/images to a web page, follow the steps below. Note: If you have a large image, such as from a smartphone or camera, please resize before uploading.

  1. Go to the page where you want to add an image.
  2. Click the Edit link in the upper right. This will open the content editor.
  3. Click in the content where you want the image and then click the Image button. This will open the Image Properties screen.

    CKEditor toolbar

  4. Click Browse Server. This will open the CKFinder screen.
  5. Click the folder on the left where the image resides or you want it to reside.
    1. To add a subfolder to stay organized, right click a folder and click New Subfolder.
  6. If you have have not uploaded the photo to the CKEditor follow these steps:
    1. Click Upload.
    2. Select the .gif, .jpg or .png file(s) you want to upload and click Open.


  7. Double click the desired image you wish to add.
  8. This will insert the image into the Preview Screen located in the bottom of the editor. From here you can adjust:
    • Alternative Text (label the image for both search engines and visually impaired users)
    • Width
    • Height
    • Border (how many pixels wide to make a border around the image)
    • HSpace (the number of pixels of space to add to the left and right of the image)
    • Vspace (the number of pixels of space to add to the top and bottom of the image)
    • Alignment (use this have content flow beside the image; Left will put the image to the left of the content)
  9. You can optionally link the image to a page or website. Perhaps you have a registration button that, when clicked, takes people to your registration.
    1. Click the Link tab.
    2. Fill in the URL field with the full URL of the site or page to which you want to link the image, such as
    3. If it links to an external website, you may click the Target dropdown and click New Window (_blank) to open the site in a new browser tab.
    4. Click the Advanced tab and fill in the Advisory Title with a tooltip that appears when someone hovers the cursor over the image, such as Click to register.
  10. If you selected Left for Alignment, click the Advanced tab and enter this at the end of whatever is in the Style field to add a 10 pixel margin to the right of the image:
    margin-right: 10px;

    Image Properties Advanced tab

  11. If you selected Right for Alignment, click the Advanced tab and enter this at the end of whatever is in the Style field to add a 10 pixel margin to the left of the image:
    margin-left: 10px;
  12. Click the OK button and the picture will appear in the designated space.
  13. Click Save Changes when finished editing the page.

See Also
Edit or resize images and photos, add text to images
Embed a YouTube video
Upload and link a document

Website Design/Editing

  1. Website Design VIDEO Tutorials
  2. Automatically Archive or Manually Archive News
  3. Can I add HTML to my homepage text area?
  4. Can I Customize the Color of my Team Title?
  5. Website Editing: Translate site into another language
  6. Can I remove my USA and/or LSC badge from my banner?
  7. Add a custom background / wallpaper
  8. Can I move my command buttons?
  9. Change the Title/Banner/Header Text
  10. Change where Team Partners area appears
  11. Changing the USA Team Status and Level (Gold,Silver,Bronze & Level 1, 2, 3)
  12. Add Team Partners to site
  13. Website Design - Creating a Tab as a draft before releasing it to the public
  14. Adjust Event tabs on home page
  15. Website editing: Change / edit main home page text
  16. Chameleon: Change to the Chameleon Template
  17. Create a photo slideshow/slide show on home page
  18. Change the website background / wallpaper
  19. Limit the Number of Events Shown on the website home page
  20. Limit the Number of News Items Shown on the Homepage of my Sites
  21. How do I Move the Sign in column from Left to Right?
  22. Embedding a Google Spreadsheet / Excel
  23. Website Design - Allowing Non Admin to edit/administer a tab
  24. Set an event to be a Swim Meet or Team Function for the home page view
  25. Website editing: Upload logo to display on website and/or emails
  26. Chameleon: Quick Start Tutorial
  27. Website Editing: Content Editor - CKEditor
  28. Website Editing: Browse Server to manage files with CKFinder
  29. Best Practice to copy/paste text into the editor
  30. Creating Single & Double Line Spacing
  31. Embedding Videos into your Site
  32. Getting to the Finish Line - Season Teams
  33. Website Editing: Add a blog to your website
  34. How can I add scrolling text or a marquee?
  35. How can I add text to my pictures?
  36. Website Editing: Add a countdown timer
  37. Add a forum to website
  38. Website Editing: Add a music/sound/mp3 file to site
  39. Website Editing: Add a submenu/dropdown to a tab
  40. Add / create a team partner
  41. How do I add a URL to a picture?
  42. How do I add HTML to a page?
  43. Website Editing: Add or edit a tab/page or sub tab
  44. Website Editing: Add photo/image/picture to website page
  45. How do I add sound to my website?
  46. How do I change the layout of TeamUnify websites?
  47. How do I create a online form or survey with Google Docs?
  48. How do I create thumbnails of pictures?
  49. Customize / link Command home page buttons
  50. Website Editing: Add/edit a table
  51. Website Editing: Make table mobile responsive
  52. Website Editing: Edit or resize images/photos, add text to images
  53. How Do I Embed a Google Calendar?
  54. Embed a PDF in a web page
  55. How do I embed a PowerPoint presentation on one of my pages?
  56. How do I embed a Vimeo video?
  57. Embed a YouTube video
  58. Website Editing: Hit counter alternatives
  59. How do I get a link to open in a new window?
  60. Link to a page
  61. Link a photo / image
  62. Website editing: Make a tab or sub tab redirect to another page or site
  63. Website Editing: Add a slideshow to a web page
  64. How do I resize the column or cell width in a table?
  65. How do I see who has used the Swim Today Widget?
  66. Set up or create anchors/bookmarks
  67. Set up a campaign in the Sponsor Center
  68. How do I setup/edit account details in your gateway?
  69. How do I use the new Swim Today (formerly Americas Swim Team) interface to collect leads for my team?
  70. How To Add Meta Key Words To Your Site?
  71. Website Editing: Embed a Google map
  72. HTTP Error 404 when I link to a document
  73. Linking or uploading a document
  74. Reader error
  75. Uploading/Linking files
  76. Benefits of switching to the Chameleon template
  77. Website Editing: Correct photo/image sizes/dimensions
  78. What do I do when I get the error wrong encrypted data?
  79. Where to edit "More Information" pages
  80. Website Editing: Supported file extensions when uploading
  81. Website Editing: Can't upload an HTML document in the editor
  82. Why do I keep getting a error when I upload a file/PDF?
  83. Why does my page I just edited appear blank?
  84. Why doesn't the slideshow load in Internet Explorer?
  85. Why doesn't my logo appear for logged in users?
  86. Why has all of my information dissappeared from the page and the editor?
  87. Why is editing slow or freezes?
  88. Why when I paste into the editor is my information not coming in correctly?
  89. Why won't my photos/images upload or display correctly? Color Profile
  90. Website title is pushing down USA swimming badges [Chameleon]
  91. Moving page contents to another page or tab
  92. Updating your bronze/silver/gold badge and level
  93. Canadian teams and sponsor center
  94. Column sort ascending/descending
  95. Partner Logo Size
  96. Connecting Picasa with my blog to instantly update my photos
  97. Wrapping text around a photo
  98. SwimOffice Editor - Editing your site in your Android device / Request Desktop Site
  99. Website Design - Editing your SwimOffice site on a mobile device / tablet
  100. Change settings on the spell checker
  101. Website editing: Add/edit notes/content on Events page
  102. Website Design: Turn on/off USA Swimming Shop
  103. UK Website Editing: Display swim21 and clubmark kitemarks
  104. Website Editing: Display USA Swimming World 100 badge
  105. Website Editing: Add document to page (Chameleon)
  106. Website Editing: Add image to page (Chameleon)
  107. Website Editing: Add custom form

Feedback and Knowledge Base