Uploading and Editing Media

Similar documents
Links Menu (Blogroll) Contents: Links Widget

Newcastle University Personal Web Publishing

Copyright 2012 Anthony Hortin

WordPress User Guide Version February 2012

Wordpress Blog Manual. DMM Designs

WordPress

Website Reference Guide

The Gardens Trust WordPress Manual. thegardenstrust.org. Page: 1

Introduction... 5 Login... 6 Dashboard Dashboard Menu Options Toolbar Hiding the Toolbar Posts versus Pages...

USER GUIDE AND THEME SETUP

Starting Your SD41 Wordpress Blog blogs.sd41.bc.ca

Rocket Theme. User Guide

ONEFUSION INSTRUCTION MANUAL HELPING YOU MANAGE YOUR OWN SITE

UW Oshkosh WordPress Training Manual. June 2015 Integrated Marketing Communications *Updated January 2016

WordPress Manual For Massachusetts Academy of Math and Science

How to use WordPress to create a website STEP-BY-STEP INSTRUCTIONS

WordPress Blog Service Pilot

Creating and updating content on your WordPress content management system (CMS)

PRESENCE. RadEditor Guide. SchoolMessenger 100 Enterprise Way, Suite A-300 Scotts Valley, CA

Wordpress Training Manual

I T H E M E S P R E S E N T S T H E U L T I M A T E G U I D E T O W O R D P R E S S 5. 0 & THE GUTENBERG EDITOR

HOW TO UPDATE YOUR NEW WEBSITE IN WORDPRESS

APPLICATION USER GUIDE. Application: EasySiteWizard PRO Version: 8.7

Do It Yourself Website Editing Training Guide

Classroom Blogging. Training wiki:

Content Elements. Contents. Row

LizardThemes.com Free & Premium WordPress Themes. LizardThemes. User Guide. First Edition

This type of content can be added to any content area (such as Subject Materials) or a Learning Module.

Getting Started: WordPress UBC Blog

Easy WP Guide WordPress Manual

How to Edit Your Website

BindTuning Installations Instructions, Setup Guide. Invent Setup Guide

An Introduction to. WordPress.com. ICA40311 Certificate IV in Web-Based Technologies Southbank Institute of Technology

EDUSOCIAL BLOGGING HELP GUIDE. An EduTech Workshop

Installation and Activation of Foody pro theme

WPI Project Center WordPress Manual For Editors

Piktochart 101 Create your first infographic in 15 minutes

WordPress How to Create a Simple Image Slider with the New RoyalSlider

How to Edit Your Website

School Website WordPress User Guide

WORDPRESS TRAINING MANUAL LAST UPDATED ON FEBRUARY 26TH, 2016

NETZONE CMS User Guide Copyright Tomahawk

Creating Teacher Webpages on the New APS WordPress Site

CUPA-HR Chapters: WordPress Reference Guide

A Quick Introduction to the Genesis Framework for WordPress. How to Install the Genesis Framework (and a Child Theme)

A Guide to Using WordPress + RAVEN5. v 1.4 Updated May 25, 2018

A Guide to Blogging on Wordpress

Center for Academic Excellence engaging faculty inspiring learning. WordPress Quick-Reference Manual

Iconasys Advanced 360 Product View Creator. User Guide (Mac OSX)

To upgrade to ifeature Pro visit:

Logging Into Your Site

AGENT123. Full Q&A and Tutorials Table of Contents. Website IDX Agent Gallery Step-by-Step Tutorials

KS Blogs Tutorial Wikipedia definition of a blog : Some KS Blog definitions: Recommendation:

The Veranda House WORDPRESS MANUAL O ROURKE HOSPITALITY MARKETING OROURKEHOSPITALITY.COM

EASYDNNROTATOR 7.X [USER S GUIDE]

Volunteer User Groups: CMS User Guide. September 2014

Linn-Mar Staff Web Page Setup

Introduction... 1 What is WordPress?... 2 Log in to the Administration Dashboard... 3 The WordPress Dashboard... 4

Website Management and Editing

JSN PageBuilder 3 Configuration Manual Introduction

Nilmini Theme Documentation

ScholarBlogs Basics (WordPress)

Bugis Theme Documentation

DOCUMENTATION. Lotos WordPress Theme

EventsNow. Getting Started Guide

Beginners Guide to Snippet Master PRO

ADRION PROJECT WEBSITES USER S MANUAL

The Photo Gallery. Adding a Photo Gallery Page. Adding a Photo Gallery App

AGLOWNET WORDPRESS HOW-TO

Portwalk Place WORDPRESS MANUAL O ROURKE HOSPITALITY MARKETING OROURKEHOSPITALITY.COM

Lectures 6: Manage WebSite/ CATEGORIES and POSTS

Word 2013 Quick Start Guide

UNIVERSITY OF CYPRUS PUBLIC AND BUSINESS ADMINISTRATION DEPARTMENT

While editing a page, a menu bar will appear at the top with the following options:

Setting up your WordPress blog CS4031

WordPress 2.7 Basic User Documentation

WordPress Basics. A Short Guide to Updating and Maintaining Your WordPress-Powered Website. ienvisionmedia.com

introduction what you'll learn

Jack s Coal Fired Pizza

How to add video to JigsawBox

Digital Web Spinning: Blogging and Web Design for the Composition Classroom, Part I Blogging With Wordpress Presented by Dom Ashby, Nov

Net4 s EasySite Builder

Logging in to the management system.

WebsiteBuilder. Manual

Managing your Website s Content in WordPress

PART I: Formatting the Appearance of the Blog

ADMIN MANUAL OF Wordpress

page 1 OU Campus User Guide

Centricity 2.0 Section Editor Help Card

Preface 3. Typographical Conventions... 3 Feedback Introduction 5. Getting Familiar With Web Presence Builder... 6

A QUICK GUIDE TO USING WORDPRESS

Creating a Website Using Weebly.com (June 26, 2017 Update)

Creating Post(s) In WordPress

Basic CMS User Guide

Contents. Page Builder Pro Manual

User Guide. Version 1.0

Picture 1.1 Click PAGES in Control Panel

P a g e 0. CIDRZ Website Manual.

CAT ALUMNI MEMBER USER GUIDE

A PRACTICAL GUIDE TO USING WIX TO BUILD A WEBSITE

Transcription:

29 Uploading and Editing Media In addition to uploading media files directly to your blog s media library, you can also upload, manage, and insert images, audio (with a Space Upgrade) and video (with VideoPress) directly from your post or page editing/creation screen using the icons found within the Upload/Insert group. Note: Click on the links below for full instructions on using the media icons. Add an Image Easily insert an image into a post or page. Add Video If you wish to upload video files directly from your computer, you will need to purchase VideoPress. For information on embedding videos from other hosting sites/services (e.g. YouTube, DailyMotion, Vimeo, etc.), please review the links in the Related section of our Videos support document. Add Audio If you wish to upload audio files directly from your computer, you will need to purchase the Space Upgrade. To link to audio elsewhere without storing them in your Media Library, check out your other Audio options. Add Media (PDF, Microsoft Word document, etc.). This icon will allow you to insert a download link to a document or file. If you wish to embed the actual document/file into the post/page content, you can use Scribd. Add Poll Adds a PollDaddy-powered poll to your blog. Note: If these buttons are not visible to you, this means that you do not have the appropriate privileges, according to your role on the blog. Contributors do not have the ability to upload files. Image Settings Contents: Media Library, Within Posts, Drag size You can customize a variety of settings for each and every image uploaded to your WordPress.com blog s media library. There are a few ways in which you can access the settings for your images, so we ll outline all of them for you here. Media Library You can modify a few settings for your images directly from your media library, which can be accessed from within your dashboard via Media -> Library on the left menu.

30 Once in your blog s Media Library, you can hover your pointer over any of the images and choose the Edit option that appears (you can also simply click on the image s title). You will now have the ability to edit some of the image s settings, as shown below. Within Posts Title Image title to be displayed as a tooltip (when a mouse is hovered over the image). Caption Image caption to be displayed when using captions (will also display as the alternate text). Description Full image description. File URL This is the location of your image. Note that it cannot be modified. After you modify any of the settings, make sure to click the Update Media button to save your changes. As well as being able to set the size of an image from the image settings you can also edit the image directly from the visual editor. To do this click on an image in the visual editor and select the configure button: A window will appear: For the most part the options are the same as for image settings with the addition of a resize scale:

31 Clicking on a percentage will scale the image to that percent. The preview area to the right will size accordingly to show you the effect of the resize. Also along the top is an advanced settings tab which, when clicked, will display this: Source The actual URL for the image in case you want full control over parameters Size Exact control over width and height, with the option to reset to the image s original values. CSS class - The CSS classes that will be added to the image given the current settings. You can override this as appropriate. Styles Any CSS styles to be applied to the image. Image properties Thickness of border (in pixels), vertical space (in pixels), and horizontal space (in pixels). Title Image title to be displayed as a tooltip. Link rel The link s rel attribute, for adding nofollow amongst other things. CSS class CSS class applied to the link. Style Styles applied to the link. Target Select whether the link should open in a new window or the same window. Drag size If the above options aren t enough you can also directly resize an image using any of the standard resizing handles: The image can then be resized by moving the mouse. Note that the image may become distorted or blocky, depending on your resize.

32 Image Editing Contents Opening, Cropping, Rotating, Flipping, Resizing, Undo and Redo,Reverting For each image uploaded to your WordPress.com blog s Media Library, you have some basic editing options (crop, rotate, flip, and resize) available. Opening To access these options, first go to Media -> Library in your blog s dashboard and click on the name of any image you wish to edit: Click on the Edit Image link to reveal the advanced editing options: The screen will load and looks like the following: Cropping You can remove any unwanted portion of an image (like an ex-boyfriend) you have uploaded to your media library by using our cropping feature. First, with your mouse (click and drag), select the portion of the image you want to keep. Once you re happy with the selection, click on the Crop button (highlighted below): You will then have your new image:

33 If happy with the result, click Save. If unhappy, click Cancel. Note that you must click Save for the crop to finalize. Rotating You can rotate (clockwise or counter-clockwise) any image in your media library using the appropriate icons above the image in its editing screen: Be sure to click Save in order to finalize the image rotation. If you are unhappy with the result, click the Cancel button. Flipping You can flip (vertically or horizontally) any image in your media library using the appropriate icons above the image in its editing screen: Be sure to click Save in order to finalize the image rotation. If you are unhappy with the result, click the Cancel button. Resizing larger it may become fuzzy. You can proportionally scale any original image in your Media Library. For best results the scaling should be done before performing any other operations on it (crop, rotate, etc.). Note that if you make the image Click on the Scale Image link to reveal the editing fields. If you then change the width (first field), you will notice that the height (second field) will adjust automatically and proportionally. Once finished, click Scale to finalize the action.

34 Undo and Redo Similar to an image editing program found on your desktop, you also have the ability to undo and redo edits you have made on an image. These icons are illustrated below: Reverting It s always a good idea to maintain a copy of any images on your computer, but you do have the ability to revert any previous edits made to the image and restore the original image that you uploaded initially to your media library. When you open an image in editing mode (one to which you have previously made edits), you will see a Restore Original Image link: If you re sure you would like to restore the image, click on the Restore image button. The image should then revert back to its original form, and you will receive a message that the restoration was successful. Polls Contents Creating a New Poll, Creating a New Poll by Email, Inserting an Existing Poll Adding a Poll to your Sidebar, Video, Comment Embeds Polls are another great way to enhance your blog with an interactive element or feature. WordPress.com is directly integrated with PollDaddy, a popular online poll creation service, so adding them to your blog is very easy. You can access all poll functions/options from your dashboard menu: Creating a New Poll To add a PollDaddy poll, just click on the Add Poll icon above the editor.

35 If you are using polls for the first time on WordPress.com you will be prompted to create or import an account. Choose either option and follow the instructions presented to you. After your account has been setup, you can create a new poll. Configure the poll options to suit your needs. After you have configured the poll, click the Save Poll button. A message will appear at the top letting you know the poll has been created. Click the Send to Editor button to insert the poll into your post or page.

36 After publishing the post, the poll will appear on your blog. Here is an example poll. Do you use polls? No Yes View Results Polldaddy.com Note: Each poll can only be displayed once on a page. So, if you have a poll in a post and in the sidebar, only the first instance of the poll will show. You can show 2 or more different polls on one page, however. Creating a New Poll by Email You can also send polls by email using the WordPress Post by Email feature and the special [poll] shortcode. Full details can be found on the Post by Email support page. Inserting an Existing Poll When clicking on the Add Poll icon in your visual editor while creating/editing a post or page on your blog, you will see a list of any polls you have created. Click on the Send to Editor link to add the poll to your post/page. You can then publish or update the post/page. Adding a Poll to your Sidebar You can add a PollDaddy poll to your sidebar using a Text Widget. When clicking on the Add Poll icon in your visual editor while creating/editing a post or page on your blog, you will see a list of any polls you have created. Under the appropriate poll, click on the HTML code link.

37 Copy the code which appears in the Shortcode field. You can then paste this code into a new Text Widget in your sidebar from Appearance -> Widgets. Important: When adding a poll to your sidebar, you may need to update its design to use the Narrow style to ensure that it properly fits. Comment Embeds You are able to embed actual YouTube videos into comments that you leave on any WordPress.com blog. To embed a PollDaddy poll into a comment, simply grab the URL/permalink of any poll found on PollDaddy Answers and paste it directly into your comment text: To obtain the URL/permalink of a poll you created on your own WordPress.com blog, go to Polls -> Edit in your blog s dashboard and click on the HTML code link attached to any of your polls. You can then copy the URL found within the section, as highlighted below: Once posted/approved, you will see your comment with the active poll. Other readers can then vote on the poll as they like.

38 Video 1. YouTube The YouTube video shortcode will then be inserted into your post. Publish the post and the video will look like the one below.... 2. Videos Blip.tv DailyMotion Flickr Video Google Video Kyte.tv LiveVideo PodTech Redlasso Splashcast TED Talks Viddler Videolog Vimeo... 3. Flickr Video Find a video on Flickr you would like to use on your blog. Copy the URL (or the video ID from the URL, which is the very last portion).... 4. Google Video Dec 29, 2009... Visit a video page on the Google Video site.... The Google video shortcode will then be inserted into your post/page.... 5. Vimeo Dec 29, 2009... Visit Vimeo and find a video you would like to insert. Copy the URL or video ID from your web browser's address bar while viewing the video.... 6. VideoPress Jan 18, 2010... After you've selected a video file, the upload process begins. A progress bar on your screen communicates the current status of your video... 7. Video Tag: Video. Media Library Press This Shortcodes VideoPress Videos; Videos» Blip.tv; Videos» DailyMotion; Videos» Flickr Video... 8. Gallery Contents. Adding a Gallery; Editing a Gallery; Gallery Settings; Gallery Shortcode; Video. Related... Video. Creating an image gallery...

39 YouTube Contents: Embedding and Additional Options Embedding Visit a video page on YouTube. Copy the URL from the address bar. In your blog s Dashboard, go to Posts->Add New or Pages->Add New. Click on the Add Video button on the Upload toolbar. Select the From URL tab. Paste the YouTube video s URL into the URL field. Then click the Insert into Post button. The YouTube video shortcode will then be inserted into your post. Publish the post and the video will look like the one below. Additional Options You can specify the width and height of the embedded video by appending &w=... or &w=...&h=...to the shortcode. It will automatically adapt to your theme s content length and give you preferred dimensions. You can obtain a HD (high definition) version of the video if it has one by appending &hd=1 You can disable related videos by appending &rel=0 You can turn on the search box by appending &showsearch=1

40 Examples: To embed the video with default width and height adapted to your theme: [youtube=http://www.youtube.com/watch?v=h2ncxw1xfck] To specify the width and height explicitly: [youtube=http://www.youtube.com/watch?v=h2ncxw1xfck&w=320&h=240] To specify the width only: [youtube=http://www.youtube.com/watch?v=h2ncxw1xfck&w=320] To play HD video: [youtube=http://www.youtube.com/watch?v=h2ncxw1xfck&hd=1] To play HD video with specific width and height: [youtube=http://www.youtube.com/watch?v=h2ncxw1xfck&w=480&h=360&hd=1] To hide the related videos from appearing after the video is done: [youtube=http://www.youtube.com/watch?v=h2ncxw1xfck&rel=0] To show the Youtube search box: [youtube=http://www.youtube.com/watch?v=h2ncxw1xfck&showsearch=1] Vimeo Inserting vimeo video to Page or Post Visit Vimeo and find a video you would like to insert. Copy the URL or video ID from your web browser s address bar while viewing the video. The default width and height of the embeded video is 400 300. Insert the shortcode into a new post or page using one of the following formats. Make sure to replace the URL or ID with the one you are using. [vimeo http://vimeo.com/240975] or [vimeo 240975]

41 Additionally you can specify the width and height, ex: [vimeo http://vimeo.com/240975 w=500&h=400] After publishing, the video will look like the one below. Vodpod Videos Widget The Vodpod videos widget lets you display image-links to your favorite videos from around the web in your sidebar. Short Code You ll paste the code from Vodpod s site into this text area. Enable Widescreen Player The widescreen player automatically adds a button to all videos posted on your blog that allows your readers to watch each video in widescreen mode right on your site.