Blog Surfer

Plugin Authors: Organize Bug Reports and Feature Requests Using the WordPress Plugin Repository
One of the downsides of having a popular plugin is the amount of support requests, bug reports, and feature suggestions that come in. Well, it’s not that bad, but sometimes it’s difficult to organize what features should be added, what bugs must be tackled first, and what can just be ignored. If you’re one of […]

One of the downsides of having a popular plugin is the amount of support requests, bug reports, and feature suggestions that come in. Well, it’s not that bad, but sometimes it’s difficult to organize what features should be added, what bugs must be tackled first, and what can just be ignored.

If you’re one of the few and the proud over at WP Extend Plugins, you have a nice tool at your disposal to keep track of all your plugin related needs. The tool, you ask? It’s the trac ticketing system over at the WordPress Plugin Repository.

WordPress Plugin Repository

WordPress Plugin Repository - Trac

Each plugin hosted on WP Extend allows the plugin author to post and assign tickets to their plugin. In fact, any member of the WP Support Forums can post a ticket against any plugin hosted in the official repository.

Logging into the WP Plugins Repository

Login Button

The first step to start assigning tickets (besides creating a user account) is to head over to the repository and log in.

Username/Password Dialog

After you are logged in you can view the “New Ticket” button.

New Ticket Button

Creating the New Ticket

After clicking on the “New Ticket” button, you are presented with a form for creating a new ticket. Creating the ticket is as simple as filling out a few form fields.

• Short summary: Basically a title for the bug or feature request.
• Type: Is it a defect (bug), enhancement (feature request), or task?
• Full description: Detailed description of the issue with code examples if applicable.
• Priority: How seriously you think the developer should take the request.
• Severity: How much damage (or potential damage) the issue causes
• Component: This is where you select which plugin you’re creating the ticket for.

Screenshot of the “Create New Ticket” Screen

Once you’re all set creating the new ticket, you can either preview it or hit the “Submit Ticket” button. Once the ticket is finally submitted, you’ll get a nice summary screen with your new ticket (shown below).

Screenshot of “Submitted Ticket” Screen

After the ticket is submitted, it’s up to the plugin author to accept and assign the ticket.

Viewing Open Tickets

It’s simple to view your open tickets once one has been created against your plugin. If you are logged in, click on the “View Tickets” button.

View Tickets Button

Once on the “View Tickets” page, you will want to browse to “My Tickets”.

“View Tickets” Page

From there you will be able to see all of your plugin’s open tickets based on priority. You can then click on a ticket, assign it, mark it as resolved, add comments, or a number of other options.

Open Tickets - Priority Based

Conclusion

The WordPress Plugin Repository is a great asset for plugin authors who receive a lot of bug reports and/or feature requests. The ticketing system allows for one place to store all bug reports and feature requests in a nice priority-based system.

This article touched on just one of many features available to plugin authors (and regular WordPress users) over at the repository. For plugin authors, becoming familiar with the repository is recommended.

CSS Tip: Positioning photos with floats
In the past I’ve discussed how the use of photos can enhance a Web site, but I’ve not discussed the code one uses to incorporate them. On campus, and elsewhere, Web designers use a variety of techniques to include their photos.

Night shot of one of three recently dedicated light pavilions on Superior Avenue.

In the past I’ve discussed how the use of photos can enhance a Web site, but I’ve not discussed the code one uses to incorporate them. On campus, and elsewhere, Web designers use a variety of techniques to include their photos. Some will build complex tables to get their photos positioned just right while others will add something like hspace=”5″ vspace=”5″ align=”right” into the img tag.

Neither of these is recommended by current standards (the latter is deprecated as of HTML 4.1 but is necessary in HTML e-mail) nor do these techniques give you the control you need. A better way to do this is with Cascading Style Sheets (CSS).

Create a CSS class to float your photos to the right or left of your text

An easy way to include photos is to use the CSS property “float” to float the image to the right or left of the content that follows. One can float either the image itself or a container, such as a paragraph enclosing the image. I prefer to do the latter in case I wish to include a caption with the image.

One begins by opening the page’s existing stylesheet and defining a new class to contain the image. On this blog I typically use a class I call “photoright.” The code in the stylesheet looks something like:

.photoright {float: right; padding:2px 0px 8px 10px; margin: 0; font-size:90%; color: #7F8E29; font-style:italic; width: 200px;}

Close-up of different pavilion in daylight.
This picture uses a class without the
width defined. I can add line breaks
(with varying results) or let some of the comment
push past the edge. Note how this moves the photo in.

• .photoright is the name of the class. Usually class names don’t include things like location and color (in case one wants to change those attributes in the future) but I typically include a .photoright and a .photoleft in all of my stylesheets just to offer some flexibility, and in this case the literal naming convention seems practical.
• float: right; indicates that the paragraph (or other entity such as a div) will float to the right of whatever content follows.
• padding:2px 0px 8px 10px; sets the padding for the paragraph. Padding is listed in clockwise order from top to the left, thus this class would have 2 pixels of padding on top, 0 to the right, 8 below and 10 to the left. Given the existing line-height of my regular paragraphs the 2 pixels on top allow me to line up the top of my photo with the top of uppercase letters in the main text. 0 on the right lets me float the picture as far to the right as the text will allow, 8 on the bottom gives me some space for text that wraps below the photo and the 10 to the left gives me some space between the photo and the text.
• margin: 0; specifies that I have 0 pixels of margin on all sides. I’m using padding to set my spacing rather than margins so that my captions will begin at the same left edge as my photos and because Internet Explorer may interpret margins differently than other browsers.
• font-size:90% indicates that my caption text should be 90% the size of my normal text. Some users may prefer .9em. (I’ll leave the merits of various font-sizing methods for a later discussion.)
• color: #7F8E29; indicates that the caption should be lime. In the Case stylesheets this would typically be the same color that one would use for h3’s. Because the text is small I’ve made this slightly darker than the usual lime color.
• font-style:italic; specifies that the caption will be italic.
• width: 200px; is an optional measurement specifying the width of the floated content. This number should match the width of your image and will insure that long captions wrap, rather than extend past the picture. If you plan to always use the same size image, I would recommend setting this width. If you use different sized images, you could establish separate css classes for each image size. Some users may prefer to simply keep their captions shorter than the width of their images or to use
  ’s to break the caption to fit. Note: manual line breaks will look fine on your own computer, but not necessarily on everyone else’s. Users who have adjusted the font size of their browser/user agent may still see captions jutting past the image, or line breaks that seem to occur in illogical places.

Apply the .photoright (or .photoleft) class to your page

Once the class has been added to your stylesheet you can begin to incorporate it into your pages. As the image will float to the right of any content that follows, you will want to start a paragraph, using the new style, immediately before the accompanying text. For example, in this blog entry I’ve put this at the very beginning of my entry:

Night shot of one of three recently dedicated light pavilions on Superior Avenue.

Close-up of first pavilion, floated left.

In this example I’ve used a class that defines a width of 200 pixels, the same width as the photograph. Note that I’ve included a line break immediately before the caption. This ensures that the caption starts below the image. Without a break (or a space), some browsers might ignore the width and have the caption begin to the right of the image. The other two pictures are placed farther down in the copy, again preceding the adjacent text. (View source to see exact placement.) The middle image uses a different class that doesn’t define the width. I’ve left some of the caption hanging out so you can see how that works.

Using photoright and photoleft with Case templates

I’ve included the classes .photoleft and .photoright in the Case template files. These are in the current, and some past, versions. If you are using an older version that doesn’t include the classes, simply copy them from the appropriate color stylesheet. Not knowing what size photos one might wish to include, the templates do not include the width measurement, but you may add it in based on the sample above.

That is pretty much all there is to it. If you have any questions, comments or other ideas, please submit them in the comments below.

Our new addition
The Office of Marketing and Communications is pleased to welcome Gina Prodan, to our Web development team.

The Office of Marketing and Communications is pleased to welcome Gina Prodan, to our Web development team. Gina comes to us from Kent State University where, in her capacity as Senior Web/Editorial Specialist, she worked on—among other things—the award winning Kent State Magazine Web site.

Gina is just settling in right now, getting her computers configured and such, but we’ll soon have her busy building sites, answering questions, and sharing her insights here on the Web Development blog. (In fact I’ll be tagging her to follow up on a blog meme later today.)

A picture is worth a thousand words, but that’s not always enough
How to add captions to images in Photoshop On the Web it is preferable to place your caption in the HTML. If that won’t work and your captions are long, you should also link to a place providing a description of the image and an alternative rendering of the text. Colleagues of mine are involved in a project that involves adding captions to photographs. Like many of you, they aren’t full-time designers and haven’t spent a great deal of time using Photoshop. While they know how to crop and resize photos, they’ve not yet worked with type. For those…

How to add captions to images in Photoshop

On the Web it is preferable to place your
caption in the HTML. If that won’t work and
your captions are long, you should also link
to a place providing a description of the image
and an alternative rendering of the text.

Colleagues of mine are involved in a project that involves adding captions to photographs. Like many of you, they aren’t full-time designers and haven’t spent a great deal of time using Photoshop. While they know how to crop and resize photos, they’ve not yet worked with type. For those of you who may someday face the same situation, here is a quick tutorial on adding text to images.

Establish your project parameters—size matters

Are your captioned images going to be used on the Web, on hand-outs produced by your office printer or in commercial print work such as a magazine? At what size will they be used? When editing your photos you will want to start with the largest image file available, crop it as necessary then resize it to your project specifications before adding your text.

As I mentioned when discussing image formats, your usage will impact your size specifications. Generally you will want an image that is 300 pixels per inch (ppi) for commercially printed pieces, one that is 125-250 for desktop printing (refer to your user manual to determine the maximum dots per inch (dpi) your printer will produce) and somewhere around 72 to 100 for the Web.

Note: measurements for print are exact; if your photo is 300 dpi and 1 inch square, it will be printed to be exactly 1 inch square. If you print it at 72 dpi and 1 inch square it will still be exactly 1 inch, but will have less detail. Measurements for the Web are relative because they are determined by your display. On my Dell there are 77 pixels in an inch, while on my Mac there are 98 pixels in an inch. Your display may be different. As a rule of thumb I just use 72 (which was common for most monitors back in the 1990’s) and keep in mind the fact that a 3 inch wide photo at 72 ppi will appear smaller on the Mac than it will on the PC. Either way it is 216 pixels, but the pixels on my PC are bigger than those on my Mac.

Consider the amount of text you are supposed to add to the image. Try to make this as brief as possible, especially if your project will be viewed online. While you may be able to use tiny type on printed matter, that type will be harder to read online. Fewer pixels mean fewer details, so 6 point type online will be tiny and jagged.

Also ask yourself if the text needs to be on the picture itself or if it can be read as a caption underneath the image. If the project is for the Web you can include captions underneath a photo in the text rather than in the image. For situations where that won’t work, such as HTML e-mail, just be sure to repeat your caption text in the alt tag of the image.

How to add text in Photoshop

For this example I’ll walk you through the steps used to caption the image used in this entry. We’ll add text on top of the image and below.

1. Open your image file in Photoshop. For practice you are welcome to use this sculpture photo.
2. Resize your photo by going to the image menu and choosing image size. Make sure that “constrain proportions” and “resample image” are checked. Set the resolution appropriate to your project. I’m using 72 for the Web. Choose the appropriate width for your image. I’m using 240 pixels.
3. Click on the foreground color and use the picker to select a color for your type.
4. Select the type tool, click and drag on the image to create your type box, and start typing your content.
5. If it is not already open, go to the window menu to open your layers window. Note that your type was created on a new layer.
6. Switch to the selection tool to reposition your type as desired.
7. If your background is too busy, you may find that your type is hard to read. Try adding a drop shadow or outline to it. To do this double click on the type layer in the layers menu (click to the right of the layer name). This will open up the layers style menu. Check drop shadow, then click on the words “drop shadow” to see your parameters. Drag the menu somewhere to the side—so you can still see your type—then adjust the angle, spread, size and distance until your type looks clear. You can experiment with drop shadow and other options to create different effects. You can also try changing the color. Just try to keep it simple. (Hot pink type with a lime drop shadow is usually a no-no—unless you’re competition is “Hello Kitty.”)
8. Sometimes a drop shadow isn’t enough. In this case you may want to experiment with darkening the background behind the type. You can use the burn tool to just darken an area (paint over your background with this). Another option is to create a rectangular area behind your type that is darker than the rest. To do this, create a new layer above your background image, and create a rectangle with your selection tool. Using the paint can fill it with black. Now you can leave it as is to call greater attention to your caption, or you can adjust the opacity to the layer to make it semi-transparent. In the sculpture photo I’ve set the opacity of the black square to 50%.
9. If you’ve tried a few of these options and your type still doesn’t look right, you may want to put the caption below, instead of on, the image. If your project is going on the Web you can do this in your HTML. If you are sending an HTML e-mail though you will want to include it in the image file. To do this, you will need to increase the size of the image. First set your background color to be the same as that of your document. In this example I’ll use white. Next go to the image menu and select canvas size. Click on the center top square in the grid then increase your height measurement to an appropriate size. I’ve added .5 inches. Now just add your type to this area. If you’ve added too much space you can crop accordingly.
10. Save the file in Photoshop format (in case you want to make edits) then go to the file menu and choose “Save for Web.” Select JPEG as your file format then click save. If you would prefer a .tif file (for print) you would instead flatten image (under the layers menu) and save as .tif.

Alternative Text for Captions

Captioning images can add value, but will also pose accessibility challenges. If your caption is short, you should copy it into the alt tag of your image. This will make it available to those who use screen readers or other user agents that don’t show images. If your caption is too long, you may also want to link to an alternative copy of the text, either on the same page, as a footnote, or wherever you deem appropriate. Read Andy Clarke’s article, Accessible alternatives, to learn more about these techniques. For this example I’ve linked to a description of the image and text and placed it here on the page:

Photograph of part of a sculpture featuring a man holding an umbrella next to a dog whose nose is pointed at the mans’s knee. Captions built into the image read as follows:

• Spot, can’t you find a squirrel to chase? You’ve been sitting here panting on my leg for years now.
• What, and you think this is my idea of the perfect view?
• This caption is part of the image file, but sits below the picture.

In Conclusion

As you’ve seen, it’s pretty easy to add text to an image. The tricky part is making it look right and ensuring that the content is available to all. But with a bit of experimentation you can accomplish both tasks.