Custom Fields
Silverio makes extensive use of custom fields to make it quicker to add a new project to your portfolio. There are basically two sets of custom fields: some are used to control the homepage slideshow, while others are used for the single project page. Note that although these custom fields appear for all posts and pages you create in WordPress, they are only needed and effective for posts that belong to your “portfolio” category.
Homepage slideshow custom fields
Thumbnail image
This drop-down menu lets you select which image will be used as the project thumbnail on the home page. To get good-looking thumbnails, you have two options:
- you can either create your own 56*40 image and upload it
- you can crop one of the images you’ve already uploaded. If you choose the second option, make sure to select “apply change to: thumbnail“.
Note: if you don’t want the image you picked as a thumbnail to appear in your project gallery, you have to pick the first option and upload a 56*40 image. The reason is that things should work with a single image for everything: thumbnail, medium image, and project gallery. But if I detect that you’ve uploaded another image specifically at thumbnail size, then obviously I won’t show it in the gallery.
Homepage layout
This lets you select which layout will be used in the homepage slideshow. The options are:
- Full size: the image takes up the whole width of the slideshow
- Full size with caption: same thing, with a caption.
- Featured project: the project title and content up to the “read more” tag are displayed on the left, and the homepage image is displayed on the right. You also get to choose a custom background color to fit the image.
- Include file: pick this option to include any php or html file. PHP code will be executed, so be careful. Note that the included file should be placed in the silverio/includes/ directory.
Homepage order
The order in which items appear in the homepage slideshow. I suggest using big enough numbers that you can always add a project between two existing items if you need to.
This is not a very convenient solution, but I’ll work on something better for the next version of the theme.
Homepage image
The image that is displayed in the homepage slideshow (unless of course you choose the “include file” layout).
Background color
Only for the “featured project” layout option. Lets you pick a background color (note that a transparent gradient will be applied on top of the color overlay).
File to include
Only for the “include file” layout option. Lets you specify which file will be included. The files should reside in the “includes/” directory inside the theme directory.
Single project page custom fields
Medium image
The image that will appear on the portfolio page
Site URL
Optional. A link to the live site, for web design projects. This will appear under the project summary as one of the project facts
Completed on
Optional. The date on which you completed the project, or just the general period where you worked on the project. This will appear under the project summary as one of the project facts
What I did
Optional. What you did for the project. It could also be the tools you used (photoshop, textmate), or the position you held (consultant, senior designer). This will appear under the project summary as one of the project facts
Video Embed Code
Maybe you’d like to embed a video instead of generating an image gallery. If so, just fill in this field with the embed code provided by your favorite video site (Youtube, Vimeo, Blip.tv, etc.). It usually looks something like that:
<object width="584" height="292"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=11673745&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00adef&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=11673745&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00adef&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="584" height="292"></embed></object>
The maximum width for the video is 584px (the width of the column). Video sites like Vimeo let you specify a width and then automatically calculate the correct height to preserve the aspect ratio.
Video height
Notice the height=”292″ part in the previous code? In this case, you would enter “292″ in this field. The video width is constrained to 584px, but you need to enter the height manually so that the height of the frame can be adjusted correctly.