Quick Tips for Web Page Editing with JCE
Written by Guest Blogger Drew McDowell, Part 2: Adding Photos, Videos, and Tables August 13, 2013
In my previous post I covered some of the basics of using JCE to add and format content on your site. For those looking to add more than just text, Part 2 of this 2-part series will teach you how to add photos, videos, tables, and other multimedia elements to your site.
JCE makes it easy to upload photos, add them to your page, and format them. First, select a photo and make sure it’s saved on your computer. Photos taken from a digital camera or even a camera phone can be very large, so make sure the photo is no larger than 980 pixels wide (the width of a standard web page). Larger photos could cause your page to load very slowly, and eat up the bandwidth of your web server and possibly your visitor’s data plans.
- Click the “insert/edit image” button
- In File Browser, navigate to the folder on your server where you’d like to upload photos
- Click the upload button
- Select the file on your computer (or drag and drop) and click upload
- Click to select the file in the File Browser
- Click Insert
Once inserted in your page, you can resize the image by dragging the corners. You can make more adjustments to the image by selecting it and clicking “insert/edit image” again. Alignment will allow you to make the image float to the left or right, wrapping text around the image. If the text is too close to the image you can use Margin to add more space between them.
Embedding YouTube Videos or Other iframes
Many sites allow you to take an interactive or multimedia element from their site and embed it into your own. Using the iframe code that each site provides, you can embed a YouTube video, a Google calendar, a Wufoo contact form, or even an entire web page. The possibilities of what you can embed using iframes are virtually endless. All you have to do is find the iframe code (when offered) from the site you’re looking to embed. For YouTube videos, simply go to a video’s page, click “Share”, click “Embed”, and copy the code provided. YouTube will even allow you to customize options like the size of the video.
Since JCE’s main purpose is to help users format their content without having to edit the HTML code, inserting HTML code such as iframes is one area where it’s better to leave JCE behind. Luckily, you can easily turn JCE on and off with the “[Toggle Editor]” link. After all your content has been added and formatted on your page, click “[Toggle Editor].” By turning off JCE, you’re viewing the HTML code for the page. While this may look like Greek to you, it’s relatively simple to navigate.
Most of your content is likely in paragraphs. Paragraphs are contained by a starting paragraph tag “<p>” and an ending paragraph tag “</p>”. To add an iframe, paste the iframe code between the two paragraphs where you’d like the video (or other) to go. That means after the “</p>” of one paragraph and before the “<p>” of the next. Now that you’ve inserted the iframe code, all that’s left to do is Save.
IMPORTANT: By default, JCE removes iframe code, so as soon as you turn the editor back on (by clicking “[Toggle Editor]”) your video will be gone. So be sure to save your changes with the editor off.
JCE features several buttons dedicated to editing tables: a button for adding a new table, formatting cells, adding or deleting rows and columns, etc. These buttons can be very helpful for adding a simple table to your site, but what if you already have an Excel spreadsheet with a ton of information?
There are a number of online resources for converting your spreadsheets to HTML tables. I frequently use a site called Tableizer!. After you copy a group of cells from Excel (or other spreadsheet program) and paste them into the form, this site will convert your table to one that is compatible with your website. You can copy the resulting HTML code to paste into the HTML editor (see the section above for info on editing the HTML of your page) or you can copy the preview to paste directly into JCE. It’s a quick way to turn the laborious process of table-building into a simple copy/past maneuver.
- Tags: SageAdvice