Stocksy United, recently unveiled its API (Application Programming Interface). While the intent is for buyers to create applications for use within their organizations, it can also be useful for contributors.
I am certainly no programmer. I do, however, know enough to be dangerous and like to dabble in PHP and javascript, usually making little tools to ease some process along. A while back, I had written a WordPress plugin, a widget, that would look at the page at Stocksy that showed my latest work, and would “scrape” the data, essentially going through the page looking for images tagged a certain way, and then would show them on the side of my blog. This sort of programming is slightly dangerous, as any change to the html could mess up my script causing it to not find the images. Eventually, the page went to a more dynamic loading process, and I couldn’t figure out how to grab the info at all. Until now.
The developed API allows you to send a call to the site which responds with set information. It’s just the information you want, not buried in html and javascript. One of the function calls in the API allows the user to do a search. Basically the same search the site runs when you are looking for something there. So, I wrote a new WordPress widget, using the API that allows me to get the info needed for a display without worrying if the page layout is going to change. All I get is the search result information. Never mind all that. Here we go …
Download the .zip file for WordPress here: Stocksy Image Displayer
Go to the Plugins page of your WordPress dashboard. Go to the Add New section. At the top is a button to Upload Plugin. Use that to send the .zip file up to your install. When it is done installing, be sure to activate it using the link in the plugin details.
Now, you can drag and drop this widget from your list of available widgets anywhere you like. The most basic option is to put it in a sidebar, or maybe a footer. What this will do, is look at the options you have set on the widget and then display the loaded images in that area of your layout. Let’s look at the options, and for this, let’s assume we’re putting the widget into a sidebar.
To review the options:
- Title: The title that will display over the widget wherever you place it. Leave it blank if you want.
- API Key: Anyone wanting access to the API must have an API key. Email Stocksy Support to get one. It lets them know who is accessing the API.
- Search String: Enter in exactly what you want your search to be. I’m grabbing my latest in that image above, so I just do a search on “Sean Locke”, which, currently, requires me to use the code for double quotes, which is %22 . But I could just put “halloween” and get the latest Halloween images from everyone. Or I can do “%22Sean+Locke%22+halloween” just to get my spooky photos.
- Sort Method: Your choice of the four regular search sorting methods. Curated, latest, popular and emerging.
To insert a note here, the image display can be one of two methods in this widget. Either a table grid, or a responsive masonry layout.
- Image Maximum Width or Height: If you are doing a table layout, the images will all be scaled so their largest side is this size. Set to “0” to use the original dimensions. For masonry, the images will be scaled so their width is this size. “0” won’t work here.
- Container Maximum Width: For table layout, the cell with the image (and title) will try to be this width. “0” will set to the original image dimensions. For masonry, the holding cell for the image and title will try to be this width. You should always make this bigger than “image maximum width”. For masonry, I like 5-10 larger than the image size.
- Table or Masonry Layout: Pick your poison. Table gives you a nice orderly grid, with all the images and titles in rows and columns. Masonry gives you a Pinterest-style layout, packing all the same-width images into all vertical space. It should also be centered in the area of the layout it is in.
- Number of Rows/Columns: These two options are for the table option and allow you to define the number displayed by how many rows and columns
- Number of Images To Load: This masonry-only option allows you to define how many images to show.
- Show Image Title: Do you want the text title below each image, or not?
- Image Title Length: How long of a title do you want before it is cut off with “…”?
There also CSS classes so that you can style some of the elements to match your current layout. These would go in the “appearance->edit CSS” section of the dashboard. The main container has a class of “stocksyImageDisplayer” while parts within are “sid_table” or sid_item. Like:
div.stocksyImageDisplayer {
margin-bottom: 35px;
}h2.stocksyImageDisplayer {
font-size: 20px;
font-weight: 600;
}.stocksyImageDisplayer td {
line-height: 1.5em;
}
The neat thing now, though, is that you can use this widget anywhere you use widgets. And if you download a plugin for WordPress like AMR Shortcode, install it and activate it, you can put the widget right into the middle of a page or post, using shortcode. Once you activate the plugin, on the widget page in WordPress, you’ll see a new section to drag and drop into, called “Widgets for Shortcode”. Drag the displayer into that area, set the options, save, and then it will give you a shortcode. Put that shortcode into your page or post, and boom! Stocksy images.
This will help search engines find our/your images. The pages (if you use latest to sort) will be constantly changing. That’s good. Lot’s of good, interesting text. So not only will this provide interesting material for your blog readers to look at, it may help sales. Enjoy.
