Images post meta fields

Images post meta fields

One thing that can be forgotten about attachments in WordPress is that, in their core, they are treated as a post type. As such, they too can be modified to have post meta data.

I know I didn’t write a tutorial in a long while. It’s not that I didn’t have anything to write about, I was a bit busy with clients, getting involved with WordPress.org theme reviewing, giving talsk and other projects and plugins. And since I really like to sleep I just didn’t find the proper time to write a tutorial. But I’m back now, and that’s all that matters :D I still have a redesign of the site to do, one article about my new plugin to write etc.

So, today I’ll write a simple tutorial that you can use to manipulate images a bit more.

Recently I worked on a site for a client, that was showcasing a lot of images. In sliders, in custom made pages that had a lot of images, and one request was that the single post was a showcase of images with a special arrangement. These posts would be made like horizontal sliders. First you’d have an image, then some post text about them, and then some more images. I used the info from the last tutorial about including images in your posts in a meta box, so that the client could arrange images to his liking, and also some ‘slides’ had 2 images placed side by side (60-40 ratio between the two images on a single slide).

All that was done relatively easily, I had some JavaScript that calculated the window height and width (so to cover the responsiveness of the site), and according to that I’d placed the images as a background of a container div. Now the drawbacks were how to determine which image should go to the left, and which to the right on a single slide, and how can I vertically position the images? I needed to be able to influence the  background-position of the background. So I immediately remembered that I can add post meta controls inside the media selection of each image. This will allow the client to position the image as he wants.

Before we begin…

One notice that I’d like to mention before we start. Since December of the last year I’ve been reviewing the themes on WordPress.org and that really thought me a lot. It’s a thing I would recommend everyone to do when they find the time. It’s voluntary job, you won’t get paid, but you’ll get rewarded with the knowledge about what to do when creating a theme and what not to do.
One thing I’ve been doing in my tutorials is add everything (the custom parts) inside the theme. Now this is a valid approach and will definitely work. But what happens when you switch the theme, or your client does? The problem with placing everything inside your theme is that there will be a lot of clutter and mess left in your database, that you won’t be able to use on other themes if you make a switch. Ideally every custom part should be placed in a separate file and added as a plugin. In a plugin you can easily call a method on hooks which can detect plugin deactivation, and remove any extra parts from the database to avoid the clutter. Now since most stuff that I cover gets written to the post meta, if you delete the post, its post meta gets deleted too, so you’re safe with that one. Just keep in mind that content shouldn’t be lost on theme switch.

Just a word of advice I wanted to share with you, so that you keep it in mind when developing a custom solutions for your clients. Write a foolproof code that will be easy to maintain, not only to you, but to future developers who could be tasked with maintaining your code : )

PHP part

To add additional custom fields we will use  attachment_fields_to_edit hook, and to save those fields we’ll use  attachment_fields_to_save. Inside your plugin file, or functions.php file add

This will add the following fields to your media library ‘Attachment Details’ screen

Attachment Details screen

The new fields that will show up on ‘Attachment Details’ screen

After that we need to save them, so we’ll use the following code for this

Since attachments are just posts with a post type ‘attachment’, we need to save the values from the new fields to the attachment post meta. And that’s it for the addition of the custom fields. So how do we use it?

Usage

Since this is post meta, all you need to do is access the image post meta and check for your added fields

You can do with it what ever you want. In my case I had gallery stored as a string of image attachments ID’s. So I had, inside the loop

You get the point.

This is a really easy way of adding additional fields to your attachments, and saving them. You can add many different fields. For instance you can put an input field with the photographer name, or some copyright information that you’d like show in your gallery for each picture.

I hope you’ll find this tutorial interesting and useful. If you have any questions feel free to post them below, and as always, happy coding : )

 


Also published on Medium.

Join the Discussion

  • Emilio Urriola

    Wow man this works really well. Great article.