Working  with  Images  1  /  12  

 

   

   

  To  brighten  up  your  website  it  is  often  nice  to  have  images  inserted  onto  various  pages  of  your  website.    We  have  an  easy  option  to  size  these  photos  on  your  page,  as  well  as  aligning  multiple  images  on  your  page.  

 

Loading  images  into  Media  Folder  

1. MEDIA  –  Create  new  

2. Give  your  image  a  title  and  a  keyword  –  then  browse  your  computer  for  the  image  you  wish  to  load.  

3. Submit  your  media  once  it  is  loaded.  

 

 

 

4.    You  will  land  back  on  the  media  page  once  it  is  loaded,  click  on  the  URL  beside  this  image.  

 

V3  SEP  2018  

Working  with  Images  2  /  12  

 

 

 

 

   

5.    Copy  the  link  in  the  pop  up  window  by  following  the  prompts:  CTRL  +  C  

 

6.       Copy  the  link  in  the  pop  up  window  by  following  the  prompts:  CTRL  +  C,  then  hit  OK  or  enter  on  your  keyboard.    Go  to  WEBSITE  CONTENT  and  find  the  page  you  wish  to  add  the  image  to.    Click  on  the  pencil  icon  to  edit  this  page.  

 

7.       Click  on  IMAGE  icon  (when  you  hover  over  it  says  “Insert/edit  image”      

 

Working  with  Images  3  /  12  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

8.     A  pop  up  window  will  open.    Paste  the  copied  URL  into  SOURCE    box.    

 

9.     Choose  your  image  size  from  the  drop  down  menu  

  Small  150  pixels  wide      Medium  300  pixels  wide      Large  600  pixels  wide  (or  choose  your  own  dimensions).    Then  click  OK.  

Working  with  Images  4  /  12  

 

 

 

 

 

 

 

 

 

 

 

 

10.   You  will  now  see  your  picture  on  your  page.    Make  sure  to  update  your  page,  then  VISIT  site  to  see  your  work.    You  can  repeat  the  process  with  other  images  in  your  media  folder.  

 

  In  the  example  below,  I  have  used  the  same  image  and  the  different  size  options.  

 

Working  with  Images  5  /  12  

  View  from  your  live  website.  

 

Working  with  Images  6  /  12  

  2.    Click  on  the  IMAGE  icon  (Insert/Edit  Media)  and  paste  the  URL  into  SOURCE.  

 

  WRAPPING  TEXT  AROUND  YOUR  IMAGE  

  If  you  have  a  page  that  you  would  like  to  brighten  up  with  images  displayed  throughout  your  text,  follow  these  instructions.  

 

1.    Follow  step  1-­‐6  in  the  above  guide.    Once  you  are  on  the  page  where  you  would  like  to  add  your  image,  put  your  cursor  where  you  would  like  the  image  displayed.    

 

Working  with  Images  7  /  12  

  3.    Choose  your  image  size  from  the  drop  down  menu  (or  add  your  own  dimensions  in  manually).  

 

  4.    Now  click  on  ADVANCED  tab  at  the  top.    Add  some  spacing  around  your  photo  so  the  text  does  not  bump  right  into  it.    I  suggest  5  pixels  for  bother  Vertical  and  Horizontal  Space.    Then  click  OK.  

 

Working  with  Images  8  /  12  

  5.    Your  page  will  look  like  this.    Now  we  have  to  align  the  image.  

 

  6.    Click  on  Format  in  your  toolbar  –  Align  and  choose  your  alignment.    In  this  case  we  have  aligned  the  image  to  the  LEFT.  

 

Working  with  Images  9  /  12  

 

 

 

 

 

 

  7.    Update  your  page  and  visit  your  site  to  see  what  it  looks  like!  

 

Working  with  Images  10  /  12  

 

 

 

 

 

  You  can  align  your  images  to  the  left  or  to  the  right  of  you  page  so  the  text  is  broken  up  with  images  landing  throughout.  

 

Working  with  Images  11  /  12  

  ALIGNING  MULTIPLE  IMAGES  ON  A  PAGE  

  You  may  find  that  you  would  like  a  row  of  images  displayed  on  your  page,  as  long  as  you  keep  the  size  choice  the  same,  they  will  look  great.  

 

1. Load  your  images  in  to  the  media  folder  following  the  steps  outline  previously.    Copy  the  URL  of  the  first  image  and  go  to  WEBSITE  CONTENT  to  find  the  page  you  wish  to  edit.  

2. Pop  your  cursor  where  you  would  like  the  image  and  click  on  the  Image  Icon  (insert/edit  image)  and  paste  in  the  URL.    Choose  your  picture  size  (in  this  instance  we  are  working  with  SMALL.  

3. Now  click  on  the  APPEARANCE  TAB  and  add  spacing  between  the  pictures.    Spacing  between  images  should  be  about  2  pixels.    So  both  Horizontal  and  Vertical  space  should  be  2.  

 

  4.    Click  on  INSERT  and  you  will  see  the  image  land  on  your  page.  

 

Working  with  Images  12  /  12  

    5.    Go  back  to  MEDIA  and  copy  the  URL  of  the  second  image  you  wish  to  load.    Then  

go  to  WEBSITE  CONTENT  and  edit  the  page  you  are  working  on.    Pop  your  cursor  to  the  right  of  the  first  image  and  then  click  on  the  Image  Icon  (insert/edit  image)  icon.  

  6.    Paste  your  URL  in,  choose  picture  size  SMALL  and  then  click  on  Appearance  to  add  in  the  vertical  and  horizontal  spacing.  

 

  7.    You  will  see  your  images  aligned  on  your  page,  continue  for  as  many  as  you  like.    Once  finished,  VISIT  site  to  see  your  work.