How can I include a roster of humans in my Wordpress blog?
March 1, 2012 10:25 AM Subscribe
Need help with Wordpress- is there a plugin or other solution that will support the display of photos and brief (paragraph) bios of people in a neat and orderly fashion?
I'm trying to add a new page to my Wordpress blog that will essentially be a roster of people; it will include a photo of them and a brief biographical paragraph. My efforts at doing this within the default functionality of Wordpress have been unsuccessful due to my inability to maintain the proper alignment of text and photos relative to each other. Searching for Wordpress plugins to meet this need has been more confusing than fruitful, possibly because I'm uncertain exactly what keywords I need to search for. This is an example of the sort of result I'd had in mind. Photo aligned to left or right of the bio paragraph, horizontal lines (or a box) separating one person from the next. Is there a plugin or other technique that I can employ that will allow me to post something similar?
I'm trying to add a new page to my Wordpress blog that will essentially be a roster of people; it will include a photo of them and a brief biographical paragraph. My efforts at doing this within the default functionality of Wordpress have been unsuccessful due to my inability to maintain the proper alignment of text and photos relative to each other. Searching for Wordpress plugins to meet this need has been more confusing than fruitful, possibly because I'm uncertain exactly what keywords I need to search for. This is an example of the sort of result I'd had in mind. Photo aligned to left or right of the bio paragraph, horizontal lines (or a box) separating one person from the next. Is there a plugin or other technique that I can employ that will allow me to post something similar?
Response by poster: Sadly, my knowledge of HTML/CSS is limited and very rudimentary- I can bold and italicize things, but that's about it. I've considered taking some classes to learn the basics of CSS, but obviously haven't yet.
posted by EKStickland at 11:41 AM on March 1, 2012
posted by EKStickland at 11:41 AM on March 1, 2012
Well there's this staff directory plugin but God knows if it works. (The last time it was updated was in 2010.) Maybe you could hire someone to just do it for you real quick. This probably would take more time to explain than to do. I'm assuming even if you're using wordpress.com (as opposed to a local installation) that you can edit the CSS. You're welcome to contact me via mefimail if you need help.
posted by phaedon at 12:12 PM on March 1, 2012
posted by phaedon at 12:12 PM on March 1, 2012
The simplest, if not standards compliant and elegant solution is a 2 column table. Put the photos in the left column and the text in the cell to the right. Then create a new row for the next photo, and so on. The table will keep everything lined up nicely.
Purists would say you should never use tables to align text, and they might be right. But it works, and it'll look ok in all browsers.
posted by COD at 12:27 PM on March 1, 2012 [1 favorite]
Purists would say you should never use tables to align text, and they might be right. But it works, and it'll look ok in all browsers.
posted by COD at 12:27 PM on March 1, 2012 [1 favorite]
What you MIGHT be looking for is something along the line of a "content slider".
This is a plug in that I found that might be flexible enough for your needs.
posted by THAT William Mize at 12:43 PM on March 1, 2012
This is a plug in that I found that might be flexible enough for your needs.
posted by THAT William Mize at 12:43 PM on March 1, 2012
Someone could quickly work this up in HTML for you if you had the text/images already. Installing a plugin is just more headache than it's worth unless you have a prohibitive number of items.
posted by chrisfromthelc at 2:35 PM on March 1, 2012
posted by chrisfromthelc at 2:35 PM on March 1, 2012
Put in your picture. You're making sure it's a standard size, right? Because that makes things easier.
Write your text. This is where the standard size picture comes in. The height/width of the text and picture will be different on the editing window than on the actual website. Figure out how much text you need to get past the picture and make sure you always have at least that much text. If you don't want the text to start going under the image than just make sure you don't have enough text to need that much space.
After you get each person's text/picture combination finished switch to the HTML editor, go to a new line, and enter [hr] using < and > instead of [] to get a horizontal line across the screen. I just had to type it that way here so it would show up and not be treated as code. Then go to a new line and start over with the next person.
posted by theichibun at 5:00 AM on March 2, 2012
Write your text. This is where the standard size picture comes in. The height/width of the text and picture will be different on the editing window than on the actual website. Figure out how much text you need to get past the picture and make sure you always have at least that much text. If you don't want the text to start going under the image than just make sure you don't have enough text to need that much space.
After you get each person's text/picture combination finished switch to the HTML editor, go to a new line, and enter [hr] using < and > instead of [] to get a horizontal line across the screen. I just had to type it that way here so it would show up and not be treated as code. Then go to a new line and start over with the next person.
posted by theichibun at 5:00 AM on March 2, 2012
« Older What to do with a sandy digital camera? | How do I get the old Google search results back? Newer »
This thread is closed to new comments.
posted by phaedon at 11:14 AM on March 1, 2012