Archived

Difference between revisions of "Add an image"

From Joomla! Documentation

m (Adjusted link after page move)
 
(14 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{:GSheader16}}
+
{{version/tutor|2.5}}{{:Getting_Started_Page_Index/2.5}}
{{JVer|1.6}} The aim of this document is to show how pictures (also called images) can be added to Articles. It is one of four documents with hands-on instructions about editing Articles in a series introducing Joomla! version 1.6.
+
The aim of this document is to show how pictures (also called images) can be added to Articles.
  
 
Many articles benefit from having images, illustrations or pictures in them.
 
Many articles benefit from having images, illustrations or pictures in them.
Line 23: Line 23:
  
 
Your picture is likely to be on your own computer, where you can edit it and give it a suitable name.
 
Your picture is likely to be on your own computer, where you can edit it and give it a suitable name.
<div style="border:thin solid green; margin-left:50px; background: #f5f5f5;  width: 90%;">
 
 
'''Note on editing images:'''
 
 
This is a large subject in itself. There are many packages used for editing photographs and various images. If you are doing simple illustrations, a simple editor like Paint is perfectly suitable. If you are experienced using images, you will know enough about image manipulation not to need to be told it here! This is very useful for screen capture and simple editing - http://picpick.wiziple.net/features
 
  
 +
<div class="large-10 panel large-offset-1 radius" style="border:1px solid green;background:#f5f5f5; margin-top:1em;">
 +
'''Note on editing images:''' - This is a large subject in itself. There are many packages used for editing photographs and various images. If you are doing simple illustrations, a simple editor like Paint is perfectly suitable. If you are experienced using images, you will know enough about image manipulation not to need to be told it here! This is very useful for screen capture and simple editing - http://picpick.wiziple.net/features
 
</div>
 
</div>
  
Line 38: Line 35:
 
*There will be a place for you to put the picture files on the web site you are using and you need to know where this is located in order to insert an image. You will not be able to copy the image file directly to that place, the article editor does this as part of the insert process.
 
*There will be a place for you to put the picture files on the web site you are using and you need to know where this is located in order to insert an image. You will not be able to copy the image file directly to that place, the article editor does this as part of the insert process.
 
*If you are using the localhost sample data, there is a folder for images.
 
*If you are using the localhost sample data, there is a folder for images.
:::::[[Image:GSimagelocation.png]]
+
::[[Image:GSimagelocation.png]]
 
You can copy the image there but it is useful experience to upload it using the editor.
 
You can copy the image there but it is useful experience to upload it using the editor.
  
<div style="border:thin solid green; margin-left:50px; background: #f5f5f5; width: 90%;">
+
<div class="large-10 panel large-offset-1 radius" style="border:1px solid green;background:#f5f5f5; margin-top:1em;">
 
+
'''Layout on the screen for images:''' - You may find it easier to get the picture where you want it to be on the page by setting up a table with one row and two columns. The text is entered in one cell and the picture in the other cell.
'''Layout on the screen for images:'''
+
:*Create a table with one row and two columns - and no border.
 
+
:*Put the picture in one cell and any commentary in the other.
You may find it easier to get the picture where you want it to be on the page by setting up a table with one row and two columns. The text is entered in one cell and the picture in the other cell.
 
::*Create a table with one row and two columns - and no border.
 
::*Put the picture in one cell and any commentary in the other.
 
  
 
This is frowned upon by purists but it is a convenient way to get a helpful layout.
 
This is frowned upon by purists but it is a convenient way to get a helpful layout.
 
 
</div>
 
</div>
  
 
'''Uploading the picture'''
 
'''Uploading the picture'''
  
::Open the Article for editing
+
:*Open the Article for editing
::Position the cursor where you want the image to start vertically on the page. If you are using a cell in a table, then place the cursor in the cell.
+
:*Position the cursor where you want the image to start vertically on the page. If you are using a cell in a table, then place the cursor in the cell.
::Click on the Image button below the Edit Article screen [[Image:GSImageButton.png]]  ('''not''' on the icon in the tool bar, which does not let you see images on your own computer)
+
:*Click on the Image button below the Edit Article screen [[Image:GSImageButton.png]]  ('''not''' on the icon in the tool bar, which does not let you see images on your own computer)
 
The dialogue box opens and hovers over the edit screen.<br/>
 
The dialogue box opens and hovers over the edit screen.<br/>
 
The top part of the screen defines where the pictures will go on the server. The bottom part is where you can browse for the picture on your own computer.
 
The top part of the screen defines where the pictures will go on the server. The bottom part is where you can browse for the picture on your own computer.
Line 63: Line 56:
 
[[Image:GSimageInsert1.png|frame|center|'''The update image dialogue box showing where the pictures will go and allowing choice of a file from a local computer.''']]
 
[[Image:GSimageInsert1.png|frame|center|'''The update image dialogue box showing where the pictures will go and allowing choice of a file from a local computer.''']]
 
'''Define where the image file is to go'''
 
'''Define where the image file is to go'''
::Click on the folder on the server where you want the picture to go
+
:*Click on the folder on the server where you want the picture to go
 
'''Find the image on your computer'''
 
'''Find the image on your computer'''
::Click on the Browse button.
+
:*Click on the Browse button.
 
This opens the File upload window which lets you find the folder where your image is located.
 
This opens the File upload window which lets you find the folder where your image is located.
  
 
[[Image:GSimageInsert2.png|frame|center|'''Browsing for the image file''']]
 
[[Image:GSimageInsert2.png|frame|center|'''Browsing for the image file''']]
::Find the picture file that you want to use on your computer
+
:*Find the picture file that you want to use on your computer
::Click Open
+
:*Click Open
 
This puts the location into the Upload box.
 
This puts the location into the Upload box.
  
 
To copy it to the server:-
 
To copy it to the server:-
::Click the Start Upload button
+
:*Click the Start Upload button
  
 
After upload, the file should show up be amongst the image files at the top section of the screen.
 
After upload, the file should show up be amongst the image files at the top section of the screen.
Line 80: Line 73:
 
=== 3 Insert the picture to an Article ===
 
=== 3 Insert the picture to an Article ===
  
::Highlight the image you want to use
+
:*Highlight the image you want to use
 
'''Enter the details for inserting the image'''
 
'''Enter the details for inserting the image'''
  
 
[[Image:GSimageInsert5.png|frame|center|'''The image is highlighted in the top part of the screen''']]
 
[[Image:GSimageInsert5.png|frame|center|'''The image is highlighted in the top part of the screen''']]
  
::'''Image URL:'''This is filledout when you select an image
+
:*'''Image URL:'''This is filledout when you select an image
::'''Image Description:''' Give the image a description (needed for those who are visually impaired and have the information converted to speech).
+
:*'''Image Description:''' Give the image a description (needed for those who are visually impaired and have the information converted to speech).
::'''Align:''' This can be set to the left or right of the text.
+
:*'''Align:''' This can be set to the left or right of the text.
::'''Image Title:''' Give it a title, which displays when the mouse cursor hovers over it.
+
:*'''Image Title:''' Give it a title, which displays when the mouse cursor hovers over it.
  
 
It is now ready to be inserted
 
It is now ready to be inserted
::Click the Insert button at the top right of the dialogue box
+
:*Click the Insert button at the top right of the dialogue box
 
The picture should be inserted on the page according to your instructions. It may look a little strange in the editor.
 
The picture should be inserted on the page according to your instructions. It may look a little strange in the editor.
  
::Save the article
+
:*Save the article
::Check that it looks OK
+
:*Check that it looks OK
  
 
[[Image:GSimageInsert6.png|frame|center|'''The image inserted in an Article. The layout does not use a table in this case.''']]
 
[[Image:GSimageInsert6.png|frame|center|'''The image inserted in an Article. The layout does not use a table in this case.''']]
Line 103: Line 96:
 
*You can resize it in a number of ways:-
 
*You can resize it in a number of ways:-
 
:*'''resize it on the screen''' - the most straightforward but there is a bit of a knack in doing it!
 
:*'''resize it on the screen''' - the most straightforward but there is a bit of a knack in doing it!
::Position the cursor over the small square 'toggle' in one corner
+
::#Position the cursor over the small square 'toggle' in one corner
::drag it to make the image smaller or larger.
+
::#drag it to make the image smaller or larger.
::You can repeat re-sizing again but may need to Save and then Edit again.
+
::#You can repeat re-sizing again but may need to Save and then Edit again.
 
:*'''resize using the Insert/Edit icon''' on the toolbar (a green box - actually an oak tree)
 
:*'''resize using the Insert/Edit icon''' on the toolbar (a green box - actually an oak tree)
::Use Alter Dimensions: But be careful because you need to keep the relationship between the height and width of the image. With a very large picture it can be useful to put in a decimal place.
+
:**Use Alter Dimensions: But be careful because you need to keep the relationship between the height and width of the image. With a very large picture it can be useful to put in a decimal place.
 
:*'''resize the original picture''' using an editor and upload it again.
 
:*'''resize the original picture''' using an editor and upload it again.
::Then delete it from the article, re-import and insert it again.
+
:**Then delete it from the article, re-import and insert it again.
  
 
It is often necessary to fiddle around to get it the right size and in the right place.
 
It is often necessary to fiddle around to get it the right size and in the right place.
Line 116: Line 109:
 
This is much as you might expect
 
This is much as you might expect
  
::Open the Article for editing
+
:*Open the Article for editing
::Select (highlight) the picture
+
:*Select (highlight) the picture
::Press delete on your keyboard.
+
:*Press delete on your keyboard.
  
 
The picture remains on the server.
 
The picture remains on the server.
  
 
==Further information==
 
==Further information==
:* There is some background to using the Media Manager in the Back-end of Joomla! in another document in this series:-  [[Start to manage a Joomla! 1.5 site|Starting to manage a Joomla! site]]
+
:* There is some background to using the Media Manager in the Back-end of Joomla! in another document in this series:-  [[J2.5:Start_to_manage_a_Joomla!_site|Starting to manage a Joomla! site]]
:*http://docs.joomla.org/Adding_an_image_to_an_article
+
:*[[Adding an image to an article]]
:*Image file formats is a large subject - see http://en.wikipedia.org/wiki/Image_file_formats
+
:*Image file formats is a large subject - see wikipedia's article on [[wp:Image file formats|Image file formats]]
  
==Index to other documents in this series==
 
{{:GSFooter/1.6}}
 
 
----[[User:LornaS|Lorna Scammell]]  March 2011
 
----[[User:LornaS|Lorna Scammell]]  March 2011

Latest revision as of 16:50, 26 April 2022

This page has been archived. This page contains information for an unsupported Joomla! version or is no longer relevant. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

The aim of this document is to show how pictures (also called images) can be added to Articles.

Many articles benefit from having images, illustrations or pictures in them.

Who is it written for?[edit]

  • Everyone
But there is more complexity in inserting images than in entering and manipulating text.
It is worth a try - even if you do not have a lot of experience.
The main problems are likely to be manipulating the image itself, especially if you are mainly used to altering text.

For the mechanics of uploading the image - do look carefully at the uploadscreen and be aware of where the various files are, especially if you do not have a lot of practice with locating files.

Introduction[edit]

There is more complexity in inserting a picture than in writing the text.

  • There are distinct stages in getting images to display in articles:-
  1. Prepare a suitable image
  2. Upload the image to the website
  3. Insert it into an article.

You have to prepare the image but the mechanics of upload and insert are done using the editor. The detail depends upon the Web site that you are using.

1. Prepare a suitable image[edit]

Your picture is likely to be on your own computer, where you can edit it and give it a suitable name.

Note on editing images: - This is a large subject in itself. There are many packages used for editing photographs and various images. If you are doing simple illustrations, a simple editor like Paint is perfectly suitable. If you are experienced using images, you will know enough about image manipulation not to need to be told it here! This is very useful for screen capture and simple editing - http://picpick.wiziple.net/features

  • The image should be a file in a standard format - normally jpeg or png
  • Give the image a short name without spaces. (The computer-way is to use capitals - eg LondonVisit)

2. Upload the picture[edit]

The picture has to be on the web server (where the web site is hosted) in order to be inserted in an article.

  • There will be a place for you to put the picture files on the web site you are using and you need to know where this is located in order to insert an image. You will not be able to copy the image file directly to that place, the article editor does this as part of the insert process.
  • If you are using the localhost sample data, there is a folder for images.
GSimagelocation.png

You can copy the image there but it is useful experience to upload it using the editor.

Layout on the screen for images: - You may find it easier to get the picture where you want it to be on the page by setting up a table with one row and two columns. The text is entered in one cell and the picture in the other cell.

  • Create a table with one row and two columns - and no border.
  • Put the picture in one cell and any commentary in the other.

This is frowned upon by purists but it is a convenient way to get a helpful layout.

Uploading the picture

  • Open the Article for editing
  • Position the cursor where you want the image to start vertically on the page. If you are using a cell in a table, then place the cursor in the cell.
  • Click on the Image button below the Edit Article screen GSImageButton.png (not on the icon in the tool bar, which does not let you see images on your own computer)

The dialogue box opens and hovers over the edit screen.
The top part of the screen defines where the pictures will go on the server. The bottom part is where you can browse for the picture on your own computer.

The update image dialogue box showing where the pictures will go and allowing choice of a file from a local computer.

Define where the image file is to go

  • Click on the folder on the server where you want the picture to go

Find the image on your computer

  • Click on the Browse button.

This opens the File upload window which lets you find the folder where your image is located.

Browsing for the image file
  • Find the picture file that you want to use on your computer
  • Click Open

This puts the location into the Upload box.

To copy it to the server:-

  • Click the Start Upload button

After upload, the file should show up be amongst the image files at the top section of the screen.

3 Insert the picture to an Article[edit]

  • Highlight the image you want to use

Enter the details for inserting the image

The image is highlighted in the top part of the screen
  • Image URL:This is filledout when you select an image
  • Image Description: Give the image a description (needed for those who are visually impaired and have the information converted to speech).
  • Align: This can be set to the left or right of the text.
  • Image Title: Give it a title, which displays when the mouse cursor hovers over it.

It is now ready to be inserted

  • Click the Insert button at the top right of the dialogue box

The picture should be inserted on the page according to your instructions. It may look a little strange in the editor.

  • Save the article
  • Check that it looks OK
The image inserted in an Article. The layout does not use a table in this case.

A common problem is that the picture is the wrong size and sometimes much too large.

  • You can resize it in a number of ways:-
  • resize it on the screen - the most straightforward but there is a bit of a knack in doing it!
  1. Position the cursor over the small square 'toggle' in one corner
  2. drag it to make the image smaller or larger.
  3. You can repeat re-sizing again but may need to Save and then Edit again.
  • resize using the Insert/Edit icon on the toolbar (a green box - actually an oak tree)
    • Use Alter Dimensions: But be careful because you need to keep the relationship between the height and width of the image. With a very large picture it can be useful to put in a decimal place.
  • resize the original picture using an editor and upload it again.
    • Then delete it from the article, re-import and insert it again.

It is often necessary to fiddle around to get it the right size and in the right place.

Remove a picture from an Article[edit]

This is much as you might expect

  • Open the Article for editing
  • Select (highlight) the picture
  • Press delete on your keyboard.

The picture remains on the server.

Further information[edit]


Lorna Scammell March 2011