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 Change the Time on our website to reflect my time zone?
  48. How do I create a online form or survey with Google Docs?
  49. How do I create thumbnails of pictures?
  50. Customize / link Command home page buttons
  51. Website Editing: Add/edit a table
  52. Website Editing: Make table mobile responsive
  53. Website Editing: Edit or resize images/photos, add text to images
  54. How Do I Embed a Google Calendar?
  55. Embed a PDF in a web page
  56. How do I embed a PowerPoint presentation on one of my pages?
  57. How do I embed a Vimeo video?
  58. Embed a YouTube video
  59. Website Editing: Hit counter alternatives
  60. How do I get a link to open in a new window?
  61. Link to a page
  62. Link a photo / image
  63. Website editing: Make a tab or sub tab redirect to another page or site
  64. Website Editing: Add a slideshow to a web page
  65. How do I resize the column or cell width in a table?
  66. How do I see who has used the Swim Today Widget?
  67. Set up or create anchors/bookmarks
  68. Set up a campaign in the Sponsor Center
  69. How do I setup/edit account details in your gateway?
  70. How do I use the new Swim Today (formerly Americas Swim Team) interface to collect leads for my team?
  71. How To Add Meta Key Words To Your Site?
  72. Website Editing: Embed a Google map
  73. HTTP Error 404 when I link to a document
  74. Linking or uploading a document
  75. Reader error
  76. Uploading/Linking files
  77. Benefits of switching to the Chameleon template
  78. Website Editing: Correct photo/image sizes/dimensions
  79. What do I do when I get the error wrong encrypted data?
  80. Where to edit "More Information" pages
  81. Website Editing: Supported file extensions when uploading
  82. Website Editing: Can't upload an HTML document in the editor
  83. Why do I keep getting a error when I upload a file/PDF?
  84. Why do sponsors show up in the Sponsor Center on my site who didn't sponsor my team?
  85. Why does my page I just edited appear blank?
  86. Why doesn't the slideshow load in Internet Explorer?
  87. Why doesn't my logo appear for logged in users?
  88. Why has all of my information dissappeared from the page and the editor?
  89. Why is editing slow or freezes?
  90. Why when I paste into the editor is my information not coming in correctly?
  91. Why won't my photos/images upload or display correctly? Color Profile
  92. Website title is pushing USA swimming badges
  93. Moving page contents to another page or tab
  94. Updating your bronze/silver/gold badge and level
  95. Canadian teams and sponsor center
  96. Column sort ascending/descending
  97. Partner Logo Size
  98. Connecting Picasa with my blog to instantly update my photos
  99. Wrapping text around a photo
  100. SwimOffice Editor - Editing your site in your Android device / Request Desktop Site
  101. Website Design - Editing your SwimOffice site on a mobile device / tablet
  102. Change settings on the spell checker
  103. Enable or disable spell check
  104. Website editing: Add/edit notes/content on Events page
  105. Website Design: Turn on/off USA Swimming Shop
  106. UK Website Editing: Display swim21 and clubmark kitemarks
  107. Website Editing: Display USA Swimming World 100 badge
  108. Website Editing: Add document to page (Chameleon)
  109. Website Editing: Add image to page (Chameleon)
  110. Website Editing: Add custom form

Feedback and Knowledge Base