Webtools How-to Guide
Article: Featured media
How to...
How to add image to an article
Before uploading images to a Webtools article, let’s have look at the Image Sizing Chart, which has image specifications for the websites across International Institute: //www.international.ucla.edu/size
- A thumbnail image can be displayed on any webpage within your website, on the International Institute news page, and on any other website that requires a square image.
- A medium image is displayed on any page on your website that doesn't use the square image, the front page of the Intl Inst, and the Intl Inst monthly newsletter.
- A large image is displayed usually only on the display article page.
- Extra large images are reserved for special purposes. You only need to use this if specifically instructed, for instance for a slider.
Regardless of the center or program, we encourage everyone to always upload a thumbnail, medium and large image.
Before uploading an image, it is important to make sure that the image is the right size. If you need assistance with determining the correct image sizes, please refer to the above link or click on the same link provided at the bottom of the Images & Documents section of the Add/Edit Article page.
Once you make sure of the size and resolution, here is how you upload them to a Webtools article: In the Images & Documents section of Add/Edit Article page, click Choose File, select the image for that image size, and click Open and Upload. Do the same for images of other sizes. Alternatively, you can add an Image Caption that will be displayed with the large image.
Accepted file types:
- Images: .jpeg, .jpg, .png, .gif
Do not forget to Save the article once you are done with the uploads.
Here is how these images are previewed on an International Institute page.
Back to top
How to add video to an article
If you want to add a video file to your article, have your .mp4 file ready, and on the Edit Article page, scroll down to the section named Video.
After you click Choose File button, locate the video file by using the file picker, then click Open and Upload.
We recommend that you upload a video preview image as well, which is the still image that displays inside the video frame when the video is not played.
Now you are good to go.
It is optional to enter the player dimensions. When you are done, click Save.
Accepted file types:
- Videos: .mp4
- Images: .jpeg, .jpg, .png, .gif
Alternatively, you can upload a Flash Small Web Format (SWIF) file, or enter a Flash Video (FLV) Path for JW Player, based on the description noted here on the page. You can define a Hex color code for the player skin.
Here is how the video is displayed on International Institute article page. Here is the preview image, here is the video playing.
Back to top
How to add podcast to an article
To add a podcast file to your article have your .mp3 file ready, and on the Edit Article page scroll down to the Podcast section.
After you click Choose File, locate the audio file in the file picker, then click Open and Upload. There you have the file with the audio icon.
It is optional to type in the duration of the podcast in this field, although it should be noted that if your center publishes podcasts to iTunes U, a duration is required.
When you click Save, the podcast will be saved in the article.
This is how it will be displayed on the International Institute page. You can either click Play on the player control bar, or click Download Podcast to display it in a larger frame and save the file if you wish.
Back to top
How to add/pull quote to an article
The Pull Quote feature that is under the Basic Information section of Add/Edit Article page enables you to highlight a quote on your article page in a larger font and in a more stylized way.
You should simply copy and paste the quote you want to highlight, then click Save on top of the page.
Depending on the layout of your site, the quote box is placed in different areas of the page. Here is how it is displayed on the International Institute website.
Back to top
How to add hyperlink, link text to an article
The field Hyperlink right below the text editor is used to link to an article that is hosted outside the your website (i.e. a blog or the Daily Bruin).
You can either directly type in the address starting with http:// or just copy and paste the link you want to publish on your article page.
You have the option of writing in the text of the hyperlink in the next field.
Once you click Save, you are good to go.
Depending on how the website is configured, the hyperlink links the title of the article on the news page, or appears on the bottom of the article page. Here is how it is displayed on the International Institute page. When you click on the link, it takes you to the outside source.
Back to top
How to add a related document at the bottom of an article
To add a document at the bottom of your article as a source or reference, you should scroll down to the Images & Documents section and visit the Related Document field.
Accepted file types:
- Related documents: .pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx
Click on Choose File, and after locating your file with the file picker, click Upload.
Here it is, with a file URL, if you want to share the file with others.
When you click Save, the article is there with the related document.
Here is how the related document is displayed on the International Institute site. For more information or a reference, the visitors can click on the link and open or save the document.
Back to top