jPortfolio
jPortfolio Wordpress Plugin
This page isn’t much to look at right now. I’ll pretty it up in the future. Right now its just here to be here so I can do the preview release of jPortfolio.
Preview Release
This is a preview release of the plugin. It is not feature complete, it is not end user polished, and no doubt it does have some bugs in it. To add to all that fun, the documentation is going to be very very basic.
With that said however, it is very useable at this point and in fact as it stands right now it pretty much fulfills 99% of the requirements I personally had for it.
What is in?
- Hemingway Block for displaying jPortfolio
- Quicktags for inserting jPortfolio into posts and pages
- Template tags for inserting jPortfolio into Wordpress themes
- Ability to display a single photo from Flickr based on a photo ID
- Ability to display multiple photos from Flickr based ona Tag search
- Ability to display multiple photos from Flickr based on a free text search
- Ability to limit results from photo searches to ‘x’ amount of photos
- Several pre-defined formatting options for display of photos
- Ability to fully customize formatting of photo displays using full HTML and jPortfolio tokens
- Administration menu for inital setup of the plugin
- Administration menu for configuratino of the Hemingway Block. Code Free Setup!
- Administration menu for defining up to 5 custom formatting options. Code Free Setup!
- Access functions to get raw photo data for custom code formatting if desired
- Ability to define custom formatting options in code when using template options so as to have more than 5 custom formats.
What is not included but planned for a more complete release?
- Ability to display most recent photos in your Flickr photostream
- Ability to display random photos from any jPortfolio search
- Ability to authorize with the Flickr API to display your private Flickr photos on your blog
- No doubt other things that my brain dead brain can’t currently think of, plus other stuff based on user feedback
Installation and Setup
To install the plugin, simply unzip the archive then upload to your Wordpress plugins directory. If you wish to use the Hemingway block, upload the file jPortfolio.php found in the Hemingway Block directory to your Hemingway/blocks directory.
Once uploaded, proceed to the site admin menu, plugins menu, and activate the plugin. Then proceed to the Options menu, jPortfolio menu, and follow the directions for intial setup.
Documentation
Basic Useage
Inserting images into posts
To use jPortfolio to insert Flickr images into posts and Wordpress pages, quicktags are used. Quicktags are short bits of human readable code inserted into the post where you want the image or images to appear. Currently the quicktags must be typed in by hand, but they are short. In a future release quick buttons will be added to the post interface to simplify this. Currently there are two quicktags available, the image tag, and the imagesearch tag.
[jp:image:image_id:format_string]
Inserts a single photo into the post or page.
Arguments:
- image_id = The numeric ID of the specific image you wish to display.
- format_string = The name of the format to use when displaying the image. This must be lowercase. Default: ’simple’
[jp:imagesearch:search_term:format_string:search_mode:limit]
Inserts multiple photos retrieved by a photo search into the post or page.
Arguments:
- search_term = The tag or free text you wish to search for. When searching for multiple tags, seperate the tags with commas (EG: airplane,southwest).
- format_string = The name of the format to use when displaying the images. This must be lowercase. Default: ’simple’
- search_mode = The type of search to perform. ‘text’ means perform a free text search. ‘any’ means perform a ‘tag OR tag’ search, meaning as long as any one of the tags given matches, the image will be displayed. ‘all’ means a ‘tag AND tag’ search meaning all specified tags must be on the photo for it to be displayed. Default: ‘any’
- limit = The maximum amount of photos to return from the search. Default: ‘0′ No limit
With image and imagesearch, only the first argument is required. The rest are optional and have default values. You may skip optional values in the middle of the argument string by simply leaving it blank. You must however include the seperating colon even if the argument is left blank. For example to specify an image search with the search term of ‘apple’, leave the format at default, and set the search mode to ‘text’ the tag would look like this:
[jp:imagesearch:apple::text]
IMPORTANT NOTE ABOUT IMAGE IDS:
jPortfolio introduces a concept of image IDs into Flickr. When developing this plugin I wanted a way to be able to specify a specific photo from my Flickr account without having to retrieve every photo and then parse through them using the internal Flickr ID, as that just added extra overhead. Instead of devised a way to put special wordpress codes into Flickr photos. Wordpress codes are small snippets of text that you place into your Flickr photo’s comment text. They look like this: #wipid:10#
That small text identifies that photo as being photo ID #10 to jPortfolio. Note that this will be visible in your comment. If that bothers you however, you can hide it by wrapping it in an HTML comment and jPortfolio will still properly see it, and it will be hidden to viewers.
NOTE ABOUT TEXT SEARCHES:
Flickr has some odd behaviour when doing text searches. When searching for free text, Flickr will also match photos that contain any tags matching that free text regardless of whether or not the photo actually contains that text in its title or description. When using single word text searches this can sometimes provide unexpected results. This is not, as far as I can tell, a bug in the plugin but rather the way the Flickr API works.
Inserting images into Wordpress themes
jPortfolio can also be used to insert images into your Wordpress themes. This can be used to display photos in areas such as the header, or sidebar, or really wherever is desired. To do so, two template functions are used and they are almost exactly the same as the quicktags for posts.
jport_image($image_id, $format_string, $custom);
jport_imagesearch($search_term, $format_string, $search_mode, $custom, $limit);
The only differences between these template tags and the quicktags is the addition of a new argument called ‘$custom’. This argument allows you to specify custom code for special formatting when the photo or photos are displayed. Custom formatting will be covered in the advanced useage section.
Advanced Useage
Custom Formatting
Inspired by the Ultimate Tag Warrior plugin, jPortfolio has some powerful advanced formatting options which provides the ability to completely customize the HTML that is output by the plugin. When HTML is output by jPortfolio, the output is broken down into a potential 7 pieces. Each one of these pieces can be completely customized. These pieces are; Pre, Post, First, Last, Default, Single, None.
- Pre: The PRE code is output before anything else. One potential use for this is to open a special DIV for formatting purposes.
- Post: The POST code is output after everything else has been output. This is typically used to close a DIV previously opened with the PRE code.
- First: When displaying multiple images, the FIRST code is output for the very first image in the list.
- Last: When displaying multiple images, the LAST code is output for the very last image in the list.
- Default: When displaying multiple images, the DEFAULT code is output for each image in the list that is not the first or last image. IE every image between the first and last images.
- Single: When displaying a single image, or when an image search returns only a single result, the SINGLE code is used to output the image.
- None: When no image is returned, usually because an image search found no matches, then the NONE code is output. Typically this would beused to give a message indicating that no images were found.
Each section of output HTML code can be customized in one of two ways. First, up to five custom formats can be defined in the administration menu under the jPortfolio options menu. Simply select the custom format (#1 through #5) that you wish to edit, and then enter the HTML code for each section (Pre, Post, etc) that you wish. Tokens may be used to insert certain image properties into the code from the retrieved images. Let’s take a very simple example. Suppose you want to customize the output from the SINGLE code piece. That is, whenever a single image is output you want to make it display the image in a medium sized format. To do so you would enter the following for the SINGLE code:
<img src="%image_medium%" />
And when the actual image is output by jPortfolio, the plugin will replace %image_medium% with the URL to the medium sized image provided by Flickr. A complete list of all available tokens is below.
The second way to customize these outputs is in PHP code. This allows even greater flexability for when using the plugin’s template tags and you need to write custom formats that vary based on some code. If you’re doing this then i’m goign to assume your comfortable writing PHP code. If you aren’t then you probably shouldn’t be messing with this anyway :) To provide custom formatting in PHP code, there is an argument in the template calls named ‘custom’. This expects an array containing custom formatting codes. To use the same example above:
$custom_format = array("single"=>"<img src=\"%image_medium%\" />");
jport_image($imageID, "simple", $custom_format);
Note that when doign custom formatting in PHP code, all the keys must be in lowercase. The order they are defiend in the array is not important, and you may include only the ones you want to modify. In the example above, we are using the ’simple’ default formatting, and only the SINGLE code part of that will be modified by oiur custom formatting. All the other elements of that ’simple’ format (pre, post, etc) will remain as default.
jPortfolio Tokens
%image_thumbnail%
%image_square%
%image_small%
%image_medium%
%image_large%
%image_original%
%flickr_url%
%image_title%
[MORE COMING SOON]
Release History
Version 0.1
- First official public release
- Fixed bug preventing selection of formatting type when using jp:image in posts
- Fixed some custom formatting options
- Added ALT properties to the IMG tags output from the pre-defined format options so the code will validate
- Quicktag buttons! Both the standard and the visual rich editors now have quicktag buttons for entering in jp tags. They work similiar to other tags like Bold, UL, LI, etc. Highlight the text such as the image ID number for a single image or the search term for an imagesearch, then click the appropriate button. Your selection will then be placed into a quicktag with default settings.
- Added ability to return random images form an imagesearch. If the limit parameter is specified as a negative number, then that many random images will be displayed.
Preview Release 2
- Fixed bug that allowed jPortfolio quicktags to get marred by the Wordpress smilie system as well as plugins that used that system.
Preview Release
- Initial release to public
[…] The first official release of jPortfolio has happened. After a few small preview release which were used by about 20 or so WordPress bloggers, i’ve decided it is polished enough for an official release. […]
John W. Vanderbeck » Blog Archive » jPortfolio v0.1 Released said this on April 11th, 2006 at 1:10 pm
[…] I’ve more or less got my site how I like it; there’s little tweaking left to do. After experimenting with numerous themes, plugins, gallery softwares, etc, I’m pretty happy with what I’ve (finally) found works best. Namely, Wordpress and the Hemmingway theme for it, and the Flickr Photo Album and jPortfolio plugins to integrate my Flickr account into my site. This software stack rules. And it’s all free. The photo gallery options out there are numerous and very frustrating. Virtually none of them integrate with Wordpress in any satisfactory way. For a month now I’ve tried various options, settling on Gallery2, a solid image gallery for sure, but I’ve recently given up in frustration. Using the Wordpress-Gallery2 bridge scripts has resulted in an error-prone website (try enabling path rewriting in wp-gallery2 to see what i mean) that has really ugly site-design-breaking non-integration with wordpress. I’ve also come across no desireable themes for Gallery2, save PGtheme, which looks neat, but destroys all html standards compliance, has endless, confusingly named configuration options, etc. And through no fault of PGtheme, it made my ‘embedded’ Gallery2 page stick out like a sore thumb. And all this sits atop Gallery2 which has far too many configuration options, and mediocre layout and usability. […]
stimuli.ca » Blog Archive » The best gallery software for Wordpress (hint: it’s not Gallery2!) said this on April 11th, 2006 at 8:16 pm
Hello,
i have trouble with id concept. Where i can find the id ?
Bolo
bolo said this on April 12th, 2006 at 6:11 am
The ID is something you add to the description of your flickr photo like this: #wpid:40#
That would give that photo an ID of 40, which you could then display in a post like: [jp:image:40]
John Vanderbeck said this on April 12th, 2006 at 3:19 pm
Thanks John,
Bolo said this on April 16th, 2006 at 6:51 am
Hi John,
I can’t get jportfolio to work. It’s installed and I’m getting the following text in posts that have had the [jp, etc.] tags inserted and the wipid put into the comment field of the flickr photo:
No matching images available
Some ideas I have:
Perhaps the wipid is supposed to go in the description area on a flickr photo rather than inside a comment?
Perhaps I don’t understand the syntax for flickr or for embedding in my posts?
Any help you could offer would be great.
Thanks,
Ted
Denver
Ted Pearlman said this on May 12th, 2006 at 3:47 pm
The WPID tag does indeed need to be in the photo’s DESCRIPTION. Also bear in mind that sometimes after adding it to the photo’s description, it may take 5-10 minutes for that to update in Flickr’s API.
John Vanderbeck said this on May 13th, 2006 at 12:55 pm
[…] So many places so little time… That’s what i felt i had going on, 2 blogger blogs, 2 myspace blogs, and a xanga, plus a portfolio site… all are tough to keep going, why not combine all efforts into one site. Thanks clint you’re a genious! I knew i wanted a new look, easy, but mostly i wanted to dive into the world of CSS and XHTML design. So i googled it and found a plethora of info on the subjects at hand. Then I found wordpress and it all started to make some sense. I tweaked the Hemingway template, added a truckload o’ plugins; flickrrss for the flickr fotos spot, jPortfolio for the portfolio spot, LightboxJS2 for the rad image layover effects, Dan’s Avatar Thingy, which allows you to post a pic with your comments, and a bunch of plugins that you don’t see, and Voila! I still haven’t passed the tests on validation, but i’m getting there. I just wanted to change the site from the old look to the new asap. […]
subdesignstudios.com » Blog Archive » NEWNESS! said this on May 21st, 2006 at 10:47 pm
Keep a good job up!
kkkkoaaa said this on May 26th, 2006 at 4:29 pm
Hey John.
I am having issues with the plugin. I installed it per your instructions but when I go to input my Flickr screenname and click submit, it doesn’t register properly. The WP navigation comes up but everything below that is blank. Do you know why this might be happening?
Any help would be great.
Foad said this on May 30th, 2006 at 8:40 pm
Foad: Nothing shows up at all? Not even an error? At the top of the admin page where Wordpress normally says something like “Settings saved succesfuly” or gives an error, what does it say?
Also can oyu tell me what screenname you are using and what the Flickr URL is to that screenname?
John Vanderbeck said this on June 1st, 2006 at 1:55 pm
Hi John! I’m really looking ahead to use your plugin, specially to show the block on Hemingway. However, there seems that something is happening that is preventing the plugin to grab my screen name in Flickr. It always says that the specified screen name could not be found. I really don’t have a clue why this is happening. The Wordpress Flickr Plugin by Joe Tan, that I use to show my galleries, is working properly, so really I don’t know why jPortfolio is not working.
My screen name in Flickr is Sebastian Januszevski. And the URL is http://www.flickr.com/photos/sebastianba/
Perhaps you can shed some light here please, because I have no clue of what’s happening.
Cheers
Sebastian, from Buenos Aires, Argentina.
Sebastian said this on June 22nd, 2006 at 7:37 pm
Hi John,
Nice plugin! It would be really nie if you could use the numeric id assigned by Flickr (the one listed in the image URL - ‘http://www.flickr.com/photos/user_id/image_id/’) rather than having to update the description for each photo. I’m sure you’ve thought about this but I just thought I’d ask the question :-)
Thanks
Joe said this on July 6th, 2006 at 5:07 am
Joe, I agree. I’ve wanted to do something like that for a while now, and inf act i’ve wanted to have some sort fo image insertion browser to make it even easier. Unfortunately with school getting harder and harder and more fast paced I just haven’t gotten the time to work on this plugin and do the things i’d like to do.
I hope to do so soon though, if nothing else for the ability to specify a photo using its Flickr ID because I would like that for myself :)
John Vanderbeck said this on July 8th, 2006 at 5:25 am
For those having problems with setting your screen name:
This problem is, as far as i’ve been able to tell, not a problem with my code. I use a library, phpFlickr, to communicate with Flickr’s database, and in this case the library itself is returning no user.
I haven’t had a chance to try it out yet, but there is a new version of this library out that is supposed to fix a lot of bugs in the XML parsing which might fix this issue for some of you. I wold recommend you try it out. To do this, simply go to http://www.phpflickr.com/ and download the new version. On your webserver in your plugins/jportfolio directory you will see a subdirectory called phpFlickr. Simply replace that with this new version and give it a whirl.
John Vanderbeck said this on July 8th, 2006 at 5:30 am
Hey John, first of all i’d would be looking forward to the next release with the quickbuttons. typing it all makes me tired ;)
although i got some problems too … alas. when trying to enter the photos of my flickr into a template of a page i dont know exactly what to enter into the php tag for it. i know i have to use this:
but in the options screen i can’t seem to get the options saved under the hemingway block settings. i entered the info and pressed the savebutton and i gives me a positive save-result, but the fields remain empty. giving me the idea it’s not saved.
do you have any better idea about this?
mr.mark said this on August 24th, 2006 at 4:09 pm
When I use the hemingway block, I have this message in the block instead of images: “The recent photos setting for the jPortfolio block is not functional in this preview version.” Why is this?
martinra said this on September 22nd, 2006 at 10:48 pm
Search payday loans? Check my homepage.
Baldo said this on October 20th, 2006 at 5:26 pm
[…] This version treats selected text properly when using the default editor in WordPress. Other plugins that use buttonsnap to put buttons on the toolbar may include an older version of ButtonSnap which may delete selected text. If another plugin you have enabled uses the buttonsnap.php class as well, it may supersede the version being distributed with this plugin. I recommend replacing the buttonsnap.php used in these other plugins with the one distributed here. Thanks go out to John W. Vanderbeck of jwvanderbeck.com for updating ButtonSnap. Check out his jPortfolio plugin. Bookmark this story with:These icons link to social bookmarking sites where readers can share and discover new web pages. […]
How To: Add buttons to the WordPress Editor for your Plugin / Theme at MaxPower said this on October 28th, 2006 at 4:17 pm
hmm… wanted to install this, but got the following problem:
Warning: main(): SAFE MODE Restriction in effect. The script whose uid is 1015 is not allowed to access /usr/local/lib/php/PEAR.php owned by uid 0 in /home/—/domains/jeroom.eu/public_html/blog/wp-content/plugins/jPortfolio/phpFlickr/PEAR/HTTP/Request.php on line 46
anyone with news on how to solve this? tnx
Jeroom said this on November 16th, 2006 at 5:37 pm
d solution for the problem while setting the username is solved here:
http://www.phpflickr.com/forums/comments.php?DiscussionID=15
also in the beginning of phpflickr.php where it says:
// If you have problems including the default PEAR install (like if your open_basedir
// setting doesn’t allow you to include files outside of your web root), comment out
// the line above and uncomment the next line:
regards
hacki said this on December 1st, 2006 at 5:59 pm
John,
jportfolio is up and running on one of my weblogs but i’ve had trouble with custom formatting.
i’ve inserted the following code on the “default field” of the #1 custom format form:
and in the page i wrote:
[jp:imagesearch:teste:default]
however, nothing happened on the gallery page. what am i doing wrong??
thanx
Pedro said this on December 2nd, 2006 at 7:34 pm
how can i reinstall jPortfolio to use a different flickr account? i have tried deleting it from my plugins and deleted the hemingway block, then uploading it again, but it doesn’t allow me to start fresh. Any suggestions?
clint said this on December 22nd, 2006 at 2:05 pm
[…] jPortfolio […]
Una selezione dei migliori plugin di wordpress per Flickr | MondoBlog said this on February 12th, 2007 at 7:53 am
Ааану-ка ребятки голомуем!!!
Признаыайтесь проказники и власдельцы сайта www.jwvanderbeck.com ))))
ЧТО вы будете делать этим леотм?!
LolitochkaBC said this on May 10th, 2007 at 8:18 am
[…] Visit […]
WP Plugins DB » Blog Archive » jPortfolio said this on May 20th, 2007 at 2:51 am
Your guestbook is example of middle-class guestbooks. Congratulation! Ill show your site and guestbook to my friends.u
Helga said this on May 25th, 2007 at 11:19 am
huyak
Bush said this on May 31st, 2007 at 4:10 pm
Hi Jim. Photos i received. Thanks
Bill Compton said this on June 4th, 2007 at 2:04 pm
[…] jPortfolio […]
Wapnet Blog » Blog Archive » WordPress Plugins for Images, Photographs, and Graphics said this on March 3rd, 2008 at 1:52 pm