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.
By default the GregCustom theme gives all images a thin border around them and, unless over-ridden by some more specific rule, the image will occupy the full width of the page. Before adding the appropriate tag to the page you are editing you first need to upload your image. You do this via the Files page on the Admin Modal.
Once uploaded the page reports the full path and file name of the file, but all you need is the bit following the domain name. The 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.
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, 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, described on the Special Cases page.
To take advantage of some of the code built into the GregCustom Theme you need to wrap the video code within the following tags:
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.
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/ .
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, Text & Links and Special Cases.