steelbridge.io

(This post assumes you are familiar with creating custom meta fields)

It’s always bugged me when incorporating a meta field image attachment into a template, I find myself typing in the alt=”” contents when in the media section for any given image, there’s a field for alt text. I want to use the content in the alt text field to populate the alt tags in my theme or template, but I haven’t been able to find the solution until last night when I finally got fed up creating another group of image containers and facing the same old conundrum of typing the alt text in manually or calling the post title, maybe the post excerpt. The right thing to do is get the alt text from the image attachment. This time I simply could no longer ignore the fact that somehow, I could get the alt text for an image delivered by a custom meta field. So, I did it. Life is better.

Getting the alt content for a featured image or an image in the theme customizer is well documented online. But I struggled as I said, trying to acquire alt content from a media attachment for a meta filed. I could, and have just used the post_title like so:

The above certainly provides alt text. It prints the post title. But it’s not consistent and we are not using the resource precisely. We are printing the post title and not the intended resource found in the media post type.

So, how to get the image alt for an image attachment produced in a theme or template via custom meta field:

I’ll explain the code above:

The ‘post-meta-field-id’ can cause some confusion here if you are not already familiar with creating custom meta fields. Although there is a plugin available that allows easy creation of meta fields, called Advanced Custom Fields, I prefer to use my own code that I’ve developed over time. It’s a benefit to your clients to utilize your own crafted plugins because you are providing sound, tested, proven functionality without the noisy adds that are common in many of the free solutions available in the plugin repository. Some plugins are heavy on the database as well, loading scripts and features simply not needed for a given website. Anyway, sorry to digress… The ‘post-meta-field-id’ entry is from the code producing your meta field. It’s the callback that produces the content so it can be delivered on the front end… and it’s looks like this (poke around, it’s in there):

I am not trying to demonstrate how to create a meta field as much as I’m providing a reference since this post is for the tech who understands the process of creating meta fields.

Using attachment_url_to_postid associated the image id with the url to said image obtained via $get_image_url. I think using this method could create a load on the server if we are processing thousands of files on a single page. But, to that I say “isn’t processing thousands of files on a single page a problem in and of itself?”

The best part here is _wp_attachment_image_alt. This is where the alt test is delivered in the variable $alt

So, here’s how your in your theme or template will look based on the above solution:

I know there’s other ways to do this and maybe I could have written my examples differently. This is just my way of accomplishing a task as of today. I will update this post with your insights and improvements as they most certainly will come.

What are your thoughts/questions?