Custom Fieldtypes

[meepz]

Hey guys,

I'm jumping ship from WordPress to ProcessWire because PW seems so much easier and intuitive than WP.  I am trying to make my portfolio in PW and I am trying to make a custom field. My portfolio is for web design and development and on the portfolio page I want to have a basic image followed by text underneath it.  I figured I would try my hand at making a custom field for this, one called "project". So when I query through each project on the page it has an image and a title.

I would greatly appreciate any help with this, also if I am approaching this wrong I am 100% open to all suggestions.

Thanks!

[kongondo]

Hi Meepz. Welcome to the forums and the wonderful world of PW
 
Not sure how much you've read of the docs. You want to start there if you haven't. Things will then make a lot more sense. Selectors and page(s) variables are a must read . Check this part of the docs to know how to access images. This thread has links to great resources, tutorials and articles.
 
OK, back to your question...
 
If you had that image as inline in your text, then all you need to do in your template file is to echo 

echo $page->project; 

 If you had the image in an image custom field that could only take one image, in your template file you could have:

echo $page->project;//contains your text
if($page->image) echo "<img src='{$page->image->url}'>"; //where image is your image field 

There are other ways to achieve this; I'm just giving you basic examples here..

[meepz]

Thanks for the quick reply Kongodo, yeah I've taken a look at the docs and seems pretty straight forward. I'm just confused on creating a custom field.  I've included a mockup as an example to help better illustrate what I am trying to achieve.

http://i.imgur.com/z5SLdyc.jpg

I want to be able to create a field called 'project'. Project contains an image and a title.  

So if I have 5 projects, I can traverse through the projects and populate the page with them.

I understand what you mean a little bit. Would you recommend not bothering with creating a custom fieldtype and just use data from each individual project i.e. Portfolioo->Example Project(1,2,3...)

[kongondo]

Btw, let me clarify one thing; with the exception of "name" [not title] all PW fields are custom fields . The title field in the default install is also a custom field, included with the default profile and "marked" as a global field, hence its appearance everywhere..
 
How you go about this really depends on a number of things. For instance, do you want each of those projects to have a URL? If so, then each has to be a page. If not, they can all go in one page but that may not be very versatile. So, here's one way of doing it:
 
Note that PW fields are reusable.

• Create an image field called whatever you want (as per the naming rules for fields). Configure it to either accept only 1 image or multiple depending on your needs. Let's call the field "image" [single image field] or "images" [multiple image field]
• Create a template file called "projects.php"
• Create a template and associate it with the "projects.php" template file. Add the "image" [or "images"] field to it. If you are using PW default install you will already have the title field attached to this template since it is marked as "Global". If you want a field to contain text, e.g. a write-up about your projects, then create a text area field and add it to this template.
• If you will have other pages not related to projects, you may want to group your project pages into one "container", i.e. under one parent. So, go ahead and create a page called "projects". You can make it use the template "projects" or another template [all depends on how you code your template file]
• For each of your 5 projects, create child pages under the parent page "projects". Call them whatever you wish. Make sure these child pages use the "projects" template. Edit the child pages as you create them, adding a project image [or images] depending on the type of image field you created above. Enter a title and save each page.

Now comes the fun part.
 
Go into your template file and use a PW selector to grab and display those project child pages. I suppose in your parent projects page, what you want are links to your 5 projects. The HTML is of course up to you. You could do something like this.

$projects = $pages->find('parent=projects');// this will give you all the children of the parent project page with the title "projects". If you wont have a lot of projects, no need to place a limit here on the amount of results you retrieve. 

 Now, the call above will retrieve an array (more than one result returned)...Traverse the array using foreach. With that single call, you have access to everything about those child pages - their custom fields, etc... So, we use foreach to traverse the array...E.g.

foreach ($projects as $project) {
 /*do something. What you want to do depends on you. Do you want to echo the project pages' titles? Do you want to echo a thumbnail of their images? Have a read of the project walkabout in the wiki as well as have a look at the default PW install. If you are still stuck, feel free to ask. */
} 

Small Project walkthrough
 
Hope this helps

[meepz]

That was VERY helpful and pretty much solved my problem. Thanks for the advice! I will post the update after I finish everything