Inserting Images
Image Size
Don't use images taken direct from a camera on a web site. They will be unnecessarily large and visitors will find they take time to appear, especially on slow Internet connections.
Before uploading them use image editing software to resize them to around 900px wide or, if they are to appear left or right aligned, 600px at most. There is an exception to this rule, mentioned on the Special Cases page.
Before adding the tag that will add the image a page's content you first need to upload your image. You do this via the Files page on the Settings Panel. Once uploaded the page reports the full path and file name of the file, but all you will need is the bit following the domain name.
By default the GregCustom theme will display force images to occupy the full width of the page with a thin border around them. There is additional code in the theme that provides ways of varying the default display and its use is described on the Special Cases page, but the basic image tag needs no closing tag and takes the form:
where xxx is the name of the image file. Because files are always uploaded to the same location, the contents of the src= attribute will always start with /data/files/. The quotes following alt= attribute is for the text to be displayed if the file can't be found or to be read to you if you use screen reader software. Alternative text is important to include for those who find text difficult to read or are currently interrogating the web by voice command and not able to look at the screen.
Variations in Image Display
You will notice there are many variations in the way images are included on this site. Some occupy only half the width of the page on wide screens, some have captions, sometimes with accreditation, some are side by side, some have accreditations. Others have a combination of these features. These all involve getting various tags to operate in non-standard ways through the use of classes attached to tags. These techniques are described on the Special Cases page.
Inserting Video
To take advantage of some of the code built into the GregCustom Theme you need to wrap the video code within the following tags:
YouTube and Vimeo
Simply place the embed code for the clip you wish to add to your site between the tags shown above, not the URL of the clip itself.
For YouTube you find the required code by selecting the "Share" option on the desired video and then clicking on the "Embed" option indicated by the "< >" icon.
For Vimeo it's much the same. The Share option is indicated by a "Paper Dart" icon and the Embed code option by the "< / >" icon.
I haven't explored whether the code built into the theme works with other video hosting services.
Uploaded Video
First use the WonderCMS file upload facility to upload the video and an image, known as the "poster", to be shown while the video is downloading, or until the user hits the play button. For the theme code to work as intended both image and video should be of 16:9 aspect ratio and the image should have a ".jpg" extension.Then add the following code:
inserting the location and name of your image in the quotes following poster= and those for your video in the quotes following src= . As both of these files have used WonderCMS' file upload facility both file names will be prefixed with /data/files/ .
Inserting Audio
First use the WonderCMS file upload facility to upload the the MP3 file that you wish to appear in a player. Then insert the following code into the page:
substituting "myaudio.mp3" for the name of your file. The theme code is designed to ensure the player fills the entire available width of the screen/window.
Related pages: Introduction, Basic Tags, More Text Tags, Added Classes and Special Cases.