Author Archives: tech-tamer

Creating Images for a Slideshow with Pixlr

When you have a slideshow on a website, you often have to create a number of images all the same very specific size/shape. Here’s how to do that using the online image editor Pixlr, which is amazingly quick and good, and even free!

The instructions below assume you have a folder of photos on your computer, though Pixlr does offer other options if your photos are stored online somewhere.

Screenshot: Pixlr open image options

Choose Open image from computer

Go to: http://pixlr.com/editor/ and choose Open image from computer. Navigate to the folder where your photos are stored on your computer & choose the photo you want to edit to open it in Pixlr.

 

 

 

 

Screenshot - Pixlr crop tool

Choose the Crop tool

 

 

Choose the Crop tool.

 

 

In the grey submenu below the black menu at the top, find “Constraint” and choose “Output  Size.”  Then enter the numbers, in pixels, that you need for your slideshow images, e.g. Width: 800 and Height: 300.

Screenshot: Pixlr contrain image size options

Enter the size you need

Now click on the image and drag to create a box around the general area of the photo you want to keep.  The box will automatically have the right width:height ratio, no matter how big or small you make it.  Don’t worry about being exact – you’ll be able to adjust everything in the next step.  And don’t be afraid to experiment: there’s a very capable Undo button on the Edit menu.

Screenshot: Pixlr create initial selection box

Create an initial selection box

Once you’ve drawn the box, you can hover over it and drag to the part of the image you want.  You can also click any of the blue corners and shrink or enlarge the photo to suit.

Screenshot: Pixlr - Refine selection

Refine your selection box by dragging the whole box, or dragging one or more handles to resize it.

Play around till you’re happy, then click “enter” (return). You’ll be asked if you want to apply the crop – answer “yes.” Have a look.  If you don’t like it, click Undo from the Edit menu and try again.

Once you have an image you like, go to the black menu and choose File: Save, and give it a reasonably short and descriptive name. (Tip: don’t use spaces in your title – use a hyphen between words instead.) Then, make sure you’re saving to My Computer, into the folder you want your finished photos and Save it.

Done!

Edit an Image already on a Post or Page

To edit an image already on your page or post, click the image once.  The image will turn blue, and two icons will appear in the upper left: a “landscape” icon and a universal red-circle-with-slash. Click the red circle to delete the image, or the landscape to open the Edit Image dialog box.

Edit or delete image icons

The pop-up editing box is organized differently from the information box that appears when you originally upload or insert an image.  It’s straightforward to change an image’s alignment, or to  edit the title, caption, alt text, or description.  It is important to know, though, that your edits will only apply to this instance of the image.  (They won’t be saved to the Media Library, so if you insert the image somewhere else, the original information will be inserted.)  You can also change what it links to, though you need to know that “Link to Image” means link to the  media file (not the attachment page.)

You can also change what the image links to, but the wording may be unfamiliar.  “Link to Image” means “Link to Media File,” and there’s no option to link to the attachment page.  If you need to do that, just delete your image and start over.

Image size, too, is different: you aren’t allowed to pick a different set size (thumbnail vs. medium or large). If you had inserted the medium size originally but now want the large version, delete the image and start over.  If, however, the “large” size image for your site is a bit too large, though, you can use the scale to reduce it using the percent scale (don’t try to increase it — image quality will suffer noticeably).

Edit image dialog box

Last, there is an Advanced Settings tab.  This tab is, in fact, the only way to get to the settings here.  They all relate to how this particular image is display in this particular location, and most of them require understanding a bit of CSS (the styling code of the web) to make full use of, but have a look and experiment if you’re curious, or see the Image Settings article from WordPress.com.  (WordPress.com is different from the official WordPress codex, but it often has helpful articles that are relevant to users of both versions of WordPress.)

Advanced Settings -Edit Image

 

Exporting PayPal data

If you are accepting payments through PayPal using a Form, information about those payments will appear in your Form Entries list.  To cross check that information with PayPal’s, you may want to download your PayPal account information.

Log in to your PayPal account,  From My Account – Overview, click “view all my transactions,” adjust the date for whatever period you want, and then click choose the kind of Download you want from the menu choice:

PayPal - Account Overview - All Transactions link

PayPal – Account Overview – All Transactions link

PayPal - Download Transactions

PayPal – Download Transactions

Gravity Forms: Viewing or Exporting Entries

To include forms on a WordPress site, you need a plugin. One of the most popular plugins available is Gravity Forms, which is what this article describes. Once Gravity Forms is installed, you will see a new item in your admin menu labeled Forms.

To view the entries a form has received, choose Entries from either of two places:

From the main Forms submenu:

Form entries from main submenu

Or, if you’re already looking at the list of forms on your site, you can choose Entries from the small pop-up menu that appears when you hover over the form name in the list of all forms:

Form entries from popup menu in list of forms

The Entries list will show you all the submissions to your form in a table-type presentation.  You can adjust which columns are displayed and how wide they are,* but many forms just contain too much information for this area to be a realistic way of viewing it.  In that case, you can just download entries into a spreadsheet file and manage it that way.

To export any or all of a form’s data, choose Import/Export from the main Forms submenu, select the correct form, and then select the fields you want to export as well as the date range for the data you want.

Forms select data to export

*To change which columns are displayed and/or the order the columns appear in, click the Cog icon in the upper right corner:

Cog icon on Form Entries list

Cog icon on Form Entries list

And then drag and drop columns between Active and Inactive:

Choose columns and column order

Choose columns and column order

Forms: Notification settings

To include forms on a WordPress site, you need a plugin. One of the most popular plugins available is Gravity Forms, which is what this article describes. Once Gravity Forms is installed, you will see a new item in your admin menu labeled Forms.

To add or change the information governing how you are notified about a form, you need to open the form for editing and click the Notifications item from the top, horizontal menu (see Forms: Introduction for screenshots and information on opening a form to edit it).

There are many, elaborate notifications options (you can email different people depending on different things, etc.), but the basics are noted below:

Form notification settings

 

Create newspaper-style columns out of a list of items

NOTE: This function depends on having the tt-columnizer plugin installed and activated.

To turn a list of item into newspaper-style columns, you need to add a small code where you want the columns to start, and another where they end:

[columnize] before the first item
[/columnize] after the last item

You add the codes right in the text (the brackets tell WordPress to interpret the contents as a command rather than to output the text of the command itself).

Notes:

  • Each item must be on a separate line or in a separate paragraph. Blank lines are ignored.
  • The default is 2 columns; if you want something else, add columns=”#”, to the starting code, e.g.: [columnize columns=”3″ ].
  • The styling is flexible — the default is a table layout, but a list or other styling is possible – contact us for details.

Forms: Editing existing form fields

To include forms on a WordPress site, you need a plugin. One of the most popular plugins available is Gravity Forms, which is what this article describes. Once Gravity Forms is installed, you will see a new item in your admin menu labeled Forms.

The areas available for editing will depend on the type of form field.  The first section in any form will be the Settings section for the whole form, which offers a spot for a title and some introductory text — plus a tab called Confirmation, where you can add or edit the message a user sees when they have successfully edited a form.

Edit form settings section

A checkbox field, on the other hand, will offer the ability to add or edit the checkbox items:

Screenshot of editing a checkbox form section

Other types of fields will have different areas available for editing, but most are fairly self-explanatory.  If you are ever in doubt about the purpose of an area, be sure to hover over the small question mark to get some explanation:

Form help text

Once your click the blue Update Form button (or Save Form, if it’s a new form) in the lower right, your changes will be saved.  If your form already appears on a page, it will automatically be updated.

Form update button

Forms: An Introduction to Gravity Forms

To include forms on a WordPress site, you need a plugin. One of the most popular plugins available is Gravity Forms, which is what this article describes. Once Gravity Forms is installed, you will see a new item in your admin menu labeled Forms.

To add a new form, edit an existing form, or delete a form, select Forms from the Forms menu on the main administrative dashboard menu.

Forms entry on dashboard menuv

This will take you to a list of the forms on your site (a list that looks very much like the All Posts or All Pages lists).  To create a new form, click the Add New button; to edit an existing form, locate it in the list and double-click its name to open it in editing view.

Add a new form

The editing view for a form has a horizontal menu across the top, the body of the form in the main section, and boxes to the right offering different types of form fields.

Screenshot of form editing screen

Form editing screen

The image above is for a new form, one without any content.  But if you are editing a form, the various parts of your form will appear in the main section.  As you hover over any part, that form section will highlight, and you’ll see an option to Edit that section.

Edit a form section

Clicking Edit will open that area for making changes:

Screenshot of Form section opened for editing

Site Management 101: Finding your way around

Log in to your site

To move from the publicly accessible version of your site into its administrative “Back End” where you can change content, you need to log in.  Many sites will have a log in link for administrators (check the footer or bottom of the sidebar), but as long as you know the log in address, you don’t need a link: just add /wp-admin at the end of your site’s regular address, like this: www.mysite.com/wp-admin, and hit return.  (/login usually works too, if that’s easier).

Go back and forth between your site and its dashboard

Once you’ve logged in, you’ll be at the site’s administrative view, or control panel, and a thin black menu will appear at the top of the site window. This menu, often called the “Admin Bar,”  gives you a way to get back and forth between the public site and the administrative back end so you can work on your site.

From dashboard, you can always click the name of your site (at the far left of the thin black menu) and a Visit Site link will appear so you can go to the live site itself. From the live site, you can likewise click the name and choose the “Dashboard” link that appears.

From the Dashboard, click to your site’s name to visit the public version of your site:

Toggle from dashboard to public site

Toggle from dashboard to public site

Or, from the public version, click to go back to the dashboard (or one of its specific sections):

Toggle from site to dashboard

Toggle from site to dashboard

Enter “Edit mode” for the post or page you are on

To edit a particular page simply to go to that page on the live site and click Edit Post (or Page) from the Admin Menu.

Edit from the public site

Edit from the public site

Add a Featured Image to a Post

WordPress supports a featured known as the “Featured Image” (formerly called a post “thumbnail.”) This is an image that is supposed to represent the post in an overall sort of way, and can be displayed automatically alongside the summary of the post (when it’s listed as part of a group of posts), sent along in the RSS feed with the post, and otherwise stand in for the post.

How and where a featured post appears is up to the specifics of each theme.

To add a featured image, open a post for editing.  Look in the right-hand column, toward the bottom, for a small and simple box labeled “Featured Image,” with a link to “set featured image.”  When you click that link, you come to the regular Add Media screen, where you can add a new file or choose an image from your existing Media Library.  When you’ve selected your image, you then click the large blue “Set Featured Image” button at the bottom right of the Media editing screen.