Creighton Students
Manual Home  >  Typo3 assistance  >  Help working with content  >  Working with images  >  Adding images to a page
Adding images to a page

Contents

Uploading and adding an image to your page.

The Creighton Typo3 trainers do an excellent job of covering this in the Typo3 class.  You can find it in the handout from that class on page 15.  If you cannot find your copy you may download one from here (pdf, doc).  The class is also available in Bluetrain.

To top

Scaling an image

We would prefer that the image be the correct size when it is uploaded to your site.  However, occasionally an image is a touch too large for the space and you only have to adjust a bit.  If the image document size is not large this will really not affect your page's load time at all.

To scale an image in the Rich Text Editor.  Highlight the image in the RTE.  Once highlighted, you'll see a square at each corner of the image.  Click on the square in the lower right corner, then hold down the mouse button and drag toward the upper left corner.  This will resize proportionately.  You can click on any of the squares and change the size, height or width as you like.

Click image for full size:

As you resize you will see the changes in a small tool tip that will follow your cursor up the image as you change it.

Click image for full size:

To top

Creating a link out of your image

You may want to create a link out of your picture.  To link to another page, another site, a file or as illustrated to a larger version of the image.

Linking an image to a larger version of itself is just like linking to a file except you are using the image instead of text to create the link.  Click on the image in the rich text editor.  This will give you the scaling outline and handles.  The click on the "Insert web link" icon.

Find and click on the larger version of your image (see page 13 & 14 of the training manual).  Save your content and check the page.  When you click on the image it will go to the larger version of that you linked to. (But not in your webpage.  If you want to display your large image in your site, as is done here in the manual with large image, you'll need to contact the webteam about using a lightbox)

 

To top

Making a page with an image more interesting

Wrapping text around an image

Having an image sitting in your page... just sitting there... can be kind of boring.   

To have the text flow around your image, add your image to your content in the Rich text editor.  Then click on the image highlighting it like you would if you were going to scale the image.  Right click (or Control click on a Mac) to get the contextual menu.  Choose "Image properties".

To top

Image Properties

  1. Width and Height - change these at your own risk, you could change the size but not proportionately. 
  2. Border ** - Add a border around th eimage
  3. Float - Not set, Non-floating, Left, Right.
  4. Padding ** - Top, Right, Bottom, and Left.   Add space around your picture.
  5. Title - Extra information about the image, it's title... kind of like art.  Some vision impaired screen readers will read the title.
  6. Alternate text - This can be important.  This text will show if the image is for some reason, missing.  It is also read when a screen reader reads for vision impaired individuals.  Sadly it's often overlooked.

**  Most of the time these elements are controlled in the design of the site and any changes you make in image properties will not reflect on your page.  If you want a border or more padding around your images contact the webteam.

To top

Floating the image

Really you are not wrapping text around an image, you are floating the image next to the text. 

In image properties choose the float select.  Not set and Non-floating are the same thing I believe.  I'm unsure why they state it two different ways.  The valid options are Left, right, none and inherit (from the parent element). 

If you choose left your image will sit to the left of the paragraph with the text flowing around it.  How the text sits next to the image depends on how the text is justified.  How the text looks in the RTE is not how it will look on your page.  So if the text looks as if it's crowding the image check your site (don't use the View module) to see if it's got enough space.  If it doesn't on your site, contact the webteam and we'll adjust the styles to give it more room.

Click image for full size:

If you choose right your image will sit to the right of the paragraph with the text flowing around it.  How the text sits next to the image depends on how the text is justified.

Click image for full size:

NOTE: The lack of space between the image and the text in the rich text editor is not what your visitors will see.  The site's styles will determine how much space there is between the image and the text.  Please do not add your own padding as that can interfere with the sites styles.

To top

Creighton University