Introduction to T4 Site Manager (its-t4sm-1t) 
41 
4.  Click Add when done. 
The media is now listed in the relevant category (Figure 67): 
Figure 67: Newly added media 
6.4  Working with images on the web 
Before using an image on a website, it is good practice to optimise it for the web. 
This means re-sizing it to the pixel dimensions (i.e. width and height) you want it 
to take up on the page and reducing its file size, and ensuring that it is in a 
suitable format. 
What is a good image size? 
A good size for an image depends on how you are planning to use it, but as a 
rule of thumb, 955 pixels is the maximum width needed on the University 
website (for a full page width banner for example). 
In the case of images used to illustrate a standard page and positioned to the 
right with the text on the left, you should use the recommended width of 283 
pixels to ensure the image fits properly within the page layout. 
However there may be occasions (e.g. when it contains a lot of small details or 
textual information) when the image needs to be wider than 283 pixels. 
Note that the height is not so important, so you should always decide on the 
width first. 
What tools to use for resizing and cropping images? 
The quickest is to use a free online tool like Web Photo Resizer 
(http://www.webresizer.com ) or Pixlr (http://pixlr.com ): 
Web Photo Resizer is very easy to use: click on the Resize Photos 
Now button, upload your image, set the width (leaving all other options 
as they are), click the apply changes button and download the resized 
image. 
Pixlr is a full blown image editor with Photoshop like capabilities. 
Choose the advanced option (Pixlr editor) and select Open image from 
computer to upload an image. Then go to Image > Image size and 
When uploading images, DO NOT enter anything in the Description field 
ield 
as this would be used by default as the image alternative text and may not 
be appropriate to the context in which the image is used, or reflect its 
function (e.g. if used as a link). It is better to enter a description when 
inserting the image in a page. 
Pdf to tiff converter - SDK control API:C# PDF Convert to Tiff SDK: Convert PDF to tiff images in C#.net, ASP.NET MVC, Ajax, WinForms, WPF
Online C# Tutorial for How to Convert PDF File to Tiff Image File
www.rasteredge.com
Pdf to tiff converter - SDK control API:VB.NET PDF Convert to Tiff SDK: Convert PDF to tiff images in vb.net, ASP.NET MVC, Ajax, WinForms, WPF
Free VB.NET Guide to Render and Convert PDF Document to TIFF
www.rasteredge.com
Introduction to T4 Site Manager (its-t4sm-1t) 
42 
enter the width you want (the height will automatically adjust provided 
Constrain proportions is selected). Click OK. Go to File > Save 
(choose a suitable file format 
see below). 
Alternatively use Serif PhotoPlus which should be pre-installed on your 
University computer (go to Start > All Programs > Serif Applications) or any 
other photo editor you may have access to (e.g. Photoshop CS / Elements, 
Google Picasa, etc). 
Which file format? 
There are three file formats for the web: 
JPG  (or JPEG): best for photos and images with lots of colours but no 
transparency. You can set the level of quality between 10% and 100% - 
don’t go for 100% for web images, instead cho
ose 80% which is still 
high, but will reduce the file size considerably. 
GIF: for a long time the default format for logos and graphics with solid 
areas of colour. However it can only display a maximum of 256 colours 
and for this reason it is not suitable for photos. 
PNG: seen as a replacement for GIF, over which it has many 
advantages: not limited to 256 colours; better transparency support 
(useful for creating images with transparent backgrounds); smaller file 
size (a PNG image is about 20% smaller than the same images saved 
as GIF). You should use this format instead of GIF whenever possible. 
Have a play 
Following the instructions above: 
1.  Optimise an image using Web Photo Resizer: 
Open webresizer.com in a browser. 
r. 
Click on the Resize Photos Now button and upload an image (use 
(use 
images located in Favorites > Public > Public Pictures > Sample 
Sample 
Pictures
note that the maximum size allowed is 10MB. 
Set the width size to 283px, leave the Sharpen and Image quality 
ality 
options as they are. 
Click on the apply changes button followed by the download this 
his 
image link and save the optimised image locally (e.g. in Favorites 
Downloads
at this stage don’t forget to rename the file to a web
-
safe name (see note on previous page). 
If you have time you can also try the crop option with another image 
and save it in the same folder. 
2.  Upload your image to the Media Library: 
Upload the image you have just optimised to the Training > images 
es 
category. 
Optionally, add a PDF file to the Training > documents category. 
ory. 
SDK control API:Online Convert PDF file to Tiff. Best free online PDF Tif
Online PDF to Tiff Converter. Download Free Trial. Convert a PDF File to Tiff. Just upload your file by clicking on the blue button
www.rasteredge.com
SDK control API:C#: How to Use SDK to Convert Document and Image Using XDoc.
Sample Code. Here's a snippet of sample code for converting Tiff to PDF file using XDoc.Converter for .NET in C# .NET program. Six
www.rasteredge.com
Introduction to T4 Site Manager (its-t4sm-1t) 
43 
6.5  Deleting media from the Media Library 
To delete individual media 
In the View Media in Detailed mode: 
Click on the Delete icon opposite the media you want to delete (Figure 68) and 
confirm when prompted: 
Figure 68: Deleting in the View Media in Detailed Mode 
In the View Media in Preview mode: 
1.  Hover the mouse cursor over the media you want to delete and click on the 
Advanced button (Figure 69). 
Figure 69: Deleting in the View Media in Preview Mode 
This opens the media details view (Figure 70). 
Figure 70: Media details view, Delete 
2.  Click Delete and confirm when prompted. 
SDK control API:C# Tiff Convert: How to Convert PDF to Tiff Using C#
|. Home ›› XDoc.Converter ›› C# Converter: PDF to Tiff. using RasterEdge.XDoc.Converter; How to Convert PDF to Tiff Using C#.
www.rasteredge.com
SDK control API:XDoc.Converter for .NET, Support Documents and Images Conversion
converter SDK supports various commonly used document and image file formats, including Microsoft Office (2003 and 2007) Word, Excel, PowerPoint, PDF, Tiff,
www.rasteredge.com
Introduction to T4 Site Manager (its-t4sm-1t) 
44 
To delete several media files at once 
In the View Media in Detailed mode view: 
1.  Select the file(s) you want to delete in the Select All column on the left. 
2.  Press the Delete Media button. 
Figure 71: Deleting several files at once 
6.6  Assigning media to other categories 
By default, media item are assigned to the category in which they are added. 
However it is possible to move a media file to a different category or assign a 
media item to several categories. 
The latter is particularly useful when you want a media file to appear under 
different categories without duplicating it. For example if you have a photograph 
of a person in a particular location, you may want it to appear under a sub-
category named people and another named places. 
Notice that if the media file you try to delete is used on a page you will 
receive a warning like the one below: 
In this case Cancel, as this would result in a broken link on those 
pages that have a link to it. 
SDK control API:C# Create PDF from Tiff Library to convert tif images to PDF in C#
Best and free C# tiff to adobe PDF converter SDK for Visual Studio .NET. .NET component for batch converting tiff images to PDF documents in C# class.
www.rasteredge.com
SDK control API:VB.NET Create PDF from Tiff Library to convert tif images to PDF
C#.NET: View Tiff in WPF. XDoc.Converter for C#; XDoc.PDF for C#▶: C#: ASP.NET PDF Viewer; Best tiff to adobe PDF converter SDK for Visual Studio .NET.
www.rasteredge.com
Introduction to T4 Site Manager (its-t4sm-1t) 
45 
To move a file to a different category 
In the View Media in Detailed mode view: 
1.  Select the file(s) you want to move in the Select All column on the left. 
2.  Press the Move Media button. 
Figure 72: Moving media files 
3.  In the pop-up box, select the new category and press Move Media (Figure 73). 
Figure 73: Selecting a new category for the file(s) 
To assign a media file to several categories 
In the View Media in Detailed mode: 
1.  Click either on the Media Name (and then the Modify button on the next 
screen), or on the Modify icon opposite the media you want to modify (Figure 
74). 
Figure 74: Modifying in the View Media in Detailed Mode 
SDK control API:RasterEdge XDoc.Tiff for .NET - SDK for Tiff Document Imaging
Able to view and edit Tiff rapidly. Convert. Convert Tiff to PDF. Convert Tiff to Jpeg Images. Convert PDF to Tiff. Convert Jpeg Images to Tiff. Tiff File Process
www.rasteredge.com
SDK control API:VB.NET PDF Converter Library SDK to convert PDF to other file
PDF converter component plug-in embeds several image compression mechanisms, it can be used for multiple PDF to image converting applications, like PDF to tiff
www.rasteredge.com
Introduction to T4 Site Manager (its-t4sm-1t) 
46 
2.  Select the Categories tab (Figure 75). 
Figure 75: Selecting the Categories tab 
3.  Once in the Media Categories screen, select or de-select the categories you 
want to add or remove the media in / from (Figure 76) and click Update
Figure 76: Selecting / de-selecting categories 
In the View Media in Preview mode: 
1.  Hover the mouse cursor over the media you want to delete and click on the 
Advanced button (see Figure 69 above). 
2.  In the media details view, click Modify (Figure 77). 
Figure 77: Media details view, Modify 
3.  Follow steps 2 to 3 above. 
Have a play 
Following the instructions above reassign a media to a different category: 
Go to the Media Library and reassign the PDF file to the Training > 
documents category. 
Introduction to T4 Site Manager (its-t4sm-1t) 
47 
Editing and formatting text in 
TinyMCE 
Objectives 
In this task you will learn: 
to use basic text formatting (e.g. headings, lists, etc) correctly 
to create links (to other websites, to sections in your website and to 
bookmarks within a page) 
to create links to non-HTML files (e.g. PDFs) stored in the Media Library 
to create data tables 
to add and position images from the Media Library 
Comments 
This final task focuses on editing the content of pages using TinyMCE, a simple 
WYSIWYG
1
content editor. Whatever editing method you use (standard or Direct 
Edit) you will use TinyMCE 
7.1  Before you start 
The content editor toolbar 
The content editor toolbar (Figure 78) will be familiar as it uses similar icons to 
those seen in other word processing applications such as Microsoft Word; for 
example icons for making text bold, creating bullet lists, etc. 
However some icons will be new as they are specific to web content editing 
within Site Manager. 
Figure 78: TinyMCE content editor toolbar 
The faded out tools are inactive until needed (e.g. the table formatting options at 
the bottom become active when a table has been created and is selected). 
For a full list of tools available in TinyMCE, please refer to Appendix A. 
1
What You See Is What You Get 
Introduction to T4 Site Manager (its-t4sm-1t) 
48 
Working in full screen mode 
For longer edit and when working in Direct Edit mode you may want to switch 
the editor to full screen. 
To do this, click on the Toggle fullscreen mode icon (Figure 79). Click on it 
again to go back to Site Manager or Direct Edit view. 
Figure 79: Switching to full screen mode for easier editing 
The context menu 
The context menu can be accessed by right-clicking on any element (word, 
paragraph, image, table cell, etc) on the page. 
The tools available in the context menu depend on the actions that are possible 
with the currently selected element in the WYSIWYG view of the editor. 
Copying and pasting content from other sources 
The cut, copy and paste options currently only work in Internet 
Explorer, so if you use Google Chrome or Firefox, you will need to 
use the keyboard shortcuts (i.e. <Ctrl> + X for cut<Ctrl> + C for 
for 
copy and <Ctrl> + V for paste). 
Copying and pasting from a Microsoft Word, PDF 
document or web page: 
Simply use the Paste icon 
in the toolbar or the <Ctrl> + V 
keyboard shortcut. You can also use the Paste from Word icon 
icon 
but it does not seem to make any difference. 
Copying from Google Mail: 
Before pasting, click on the Paste as Plain Text icon 
and THEN 
the Paste icon (or <Ctrl> + V). 
). 
In both cases, you will probably need to reformat your content in 
TinyMCE afterwards. 
BEWARE the back button in your browser as using it to exit the fullscreen 
mode will result in losing all your changes! 
For the same reason make sure you do not close the browser tab or 
window by mistake. 
Introduction to T4 Site Manager (its-t4sm-1t) 
49 
For example right-clicking on a group of selected words will give you the options 
to cut, copy and paste, and to insert a link (Figure 80). 
Figure 80: Accessing the context menu 
7.2  Structuring text: paragraphs, headings and lists 
Paragraphs and headings 
When you start typing the text will be automatically formatted as a paragraph: 
Pressing <E
NTER
> will create a new paragraph. 
Pressing <S
HIFT
>
+
<E
NTER
> will create a line break. 
To create a heading, place the mouse cursor anywhere in the text you want to 
turn into a heading (there is no need to select it all) and select one of the options 
from the Format drop-down box in the Toolbar (Figure 81). 
Figure 81: Creating a level 2 heading 
Heading formatting options starts from Heading 2 because Heading 1 
1 
is reserved for the page title and is automatically created by the system 
when using a Content Type with a Title field. 
eld. 
Rules for using headings:
1.  Use the different heading levels in their intended, logical order 
(i.e. start from Heading 2 to introduce the main sections in your 
page, followed by Heading 3 for sub-sections and, if necessary 
Heading 4 for sub-sub-sections). 
2.  Finally, use headings for their intended purpose  (i.e. as section 
tion 
headings); do not use them for anything else (e.g. for making text 
g text 
bold or for image captions). 
Introduction to T4 Site Manager (its-t4sm-1t) 
50 
Lists 
Lists come in two types: unordered (ie bullet) and ordered (ie numbered). To 
insert a list: 
1.  Type the list items one by one as separate paragraphs (press <E
NTER
> at the 
end of each item). 
2.  Select all items with the mouse and click either of the list icons: 
for an 
unordered list and 
for an ordered list. 
3.  To take a list item out of a list, click the same list icon (it is highlighted) again 
the item is automatically formatted as a paragraph. 
7.3  Creating links 
There are three ways to create links in Site Manager, depending on the target of 
the link: 
an external web page 
an email address 
another page in your site 
a PDF or Microsoft Office file. 
Linking to external websites 
1.  Select the text you want to make a link then click on the Insert/edit link  icon 
in the toolbar. This opens the Insert/Edit Link  dialogue box (Figure 82). 
Have a play 
Following the instructions above: 
1.  Copy and paste content: 
Open a familiar web page (e.g. 
http://www.bristol.ac.uk/university/history/), select a few paragraphs 
of text and copy it (C
C
TRL 
+
C). 
Modify one of the content blocks you created earlier and paste the 
text (C
TRL 
+
V). 
2.  Add formatting to the text: 
Add a couple of sub-headings and format them accordingly. 
Add a list of 3 or 4 items. 
Save your changes. 
Documents you may be interested
Documents you may be interested