A rare event – I want to do something in WordPress but have no idea how to go about it and searching turns up literally nothing.
When you’re inserting an image into a post, you get alignment options: ‘none’, ‘left’, ‘right’, ‘center’. These result in the image being inserted with a CSS class related to alignment, like ‘alignleft’, ‘alignright’ or ‘aligncenter’.
Great.
What if my theme was a little more complex and I wanted to add a couple options here that, just like the core options, would just add a new CSS class to the inserted images? For example – a ‘right margin’ option that I could style with some fancy CSS to get some more complex layouts?
Any pointers on where I might start?
I agree with david-binda – great question! I’ve run in to this problem on a number of occasions and come up with a solution that works pretty well. While I do like the idea of adding a shortcode to insert the image with classes as suggested by pavlos-bizimis I don’t think it really solves the issue as elegantly as adding options to the image edit popup (for example you would probably have to wrap the image in your shortcode unless you prefer having to enter an image ID manually). Also, for some of my clients even a shortcode is too complicated (in which case you could bind it to a TinyMCE button off course).
Anyway,
withoutwith further ado – here’s my five cents. I use this solution in a slideshow plugin which gives me the options to include/exclude the image from slideshow and set a background color for an overlay showing contents of some image meta fields. Basically it hooks intoattachment_fields_to_editandattachment_fields_to_savein order to add the input fields and save the form data respectively. This data will be available as standard post meta for the attachment post (i.e. the image you are editing). This is great since it’s easy to retrieve usingget_post_meta()as usual. And you should also add a filter towp_get_attachment_image_attributesorimage_send_to_editorwhich will allow you to add the appropriate class automatically each time the image is being output.I’ve modified the code slightly for readability, so some parts might be incomplete/erroneous.
UPDATE: I just copied this code to use it as boilerplate in a project I’m working on. As you can probably tell from looking at the code I like to store my post meta keys in defined constants. When I do this I always prepend the value with
_to prevent it from showing in the meta fields editor, but this practice might cause some problems withattachment_fields_to_save. Keys in the$form_fieldsarray cannot start with_, so be careful to use different keys for the array and meta values or trim any underscores when dealing with attachment fields. SinceSLIDESHOW_EXCLUDE_IMAGE_KEYis not even defined in my example this is probably not a big deal when copying the code, but I thought I’d mention it anyway. It took me a while to figure this out (and for the second time, at that).Good question. And this question has got it’s solution. Maybe the code below is far too long, but can not be any shorter. The point is, that you can remove the wp_footer and wp_admin_footer hook for wp_print_media_templates function and replace it with your own wp_print_media_templates function with custom options. Simply placing code below into your functions.php will override the orginial function and allows you to modify classes after line with HTML comment <!– SETUP YOUR CLASSES HERE –> Classes are inserted into gallery shortcode in this way:
value set as MyClass1 produces alignMyClass1.
If you would like to set classes without “align” prefix, you’d have to modify javascript inserting shortcode into post’s content textarea and it may be too complicated comparing to renaming your classes in CSS. Enyoj!
Maybe you should create a shortcode for inserting the image with class attributes. I´ve seen this in a lot of commercial themes.
You can use the unique image I.D to style specific images individually.