WordPress-qTranslate : How to make alt tag attribute of featured image change language

When you need Free plugin that would make your WordPress site multilingual, qTranslate is a way to go. It works great, but I encountered a problem recently when I wanted to have multiple languages in attributes of Featured Image previously known as Post Thumbnails. I tried to insert qTranslate language tags in Title, Description, Caption, and most importantly Alternative Text but unfortunately nothing got translated when the_post_thumbnail() was called.

In this article you will learn how to make those fields multilingual.

Featured Image

Setting Featured Image in Post Editor

First we will examine how to store multilingual text when no tabs are available to switch between languages. Then we will explore where those attributes of Featured Image are stored and finally we will use PHP code to extract that information and use it when calling the_post_thumbnail() function.

Note:If you need qTranslate to translate some part of the template not related to Featured Image, you can skip to 3rd step in this article (PHP code) and focus on 3rd and 4th line of the code and their explanation.

  1. qTranslate Language code in featured image attributes

    Add multilingual text into the attributes of a featured image

    Currently (qTranslate v2.5.34) there are no tabs available when filling  fields of attributes for Featured Image, so we will have to insert qTranslate language tags ourself. For those unfamiliar with these tags, they look like this

    <!--:en-->english text<!--:--><!--:de-->german text<!--:-->
    

    For some reason Alt Text of Featured Image cannot save language tags <!–:xx–><!–:–> , so for that attribute we must use Quicktags instead. They are used like this:

    [:en]english text[:de]german text
    
  2. Location of Featured Image attributes in Database

    Since calling the_post_thumbnail() doesn’t do anything in regard to translating our text, we will need to extract attributes of Featured Image ourselves. But to do that we must first know where the data is stored.

    Featured Image thumbnails are stored in post_type table, same as regular posts but with post type of attachment. Inside those posts we will find data for most of the attributes of the featured image. Some other information is stored in the wp_postmeta table.

    Where each attribute is stored is shown below:

    DB Table: post_type

    Column in post_type Featured Image attribute stored
    post_content Description
    post_title Title
    post_excerpt Caption

    DB Table: wp_postmeta

    meta_key column meta_value
    _thumbnail_id ID of that featured image in the post_type table
    _wp_attachment_image_alt Alt text

  3. PHP code to add

    In our example, we are going to use Alt Text and Title attributes for our Featured Image, but you could also include description and caption in the same way. Size of our thumbnail is set to 150×150. Adjust that size to your needs.

    Replace the_post_thumbnail() line with the following code:

      $thumbnail_id    = get_post_thumbnail_id($post->ID);
      $thumbnail_image = get_post($thumbnail_id);
      $title=__($thumbnail_image->post_title);
      $alt_text = __(get_post_meta($thumbnail_id , '_wp_attachment_image_alt', true));
      the_post_thumbnail( array(150, 150),array( 'alt' => $alt_text,'title'=>$title) );
    

    Line by line explanation of the above code:

    • Line 1

      To get our thumbnail from post_type table, we need its ID and we get that by using get_post_thumbnail_id function.

    • Line 2

      We use that ID in get_post function which returns single WP_Post object. This post object has post type of attachment and contains our Featured Image.

    • Line 3, 4

      From $thumbnail_image we can extract most of the attributes. In our example we are only interested in Title and Alt Text. Unlike other attributes Alt Text is stored in post_meta table. To grab that, we use get_post_meta function and specify meta key _wp_attachment_image_alt.

    • Line 3, 4

      Both Title and Alternative Text will contain unfiltered text in all the languages. We need qTranslate to filter them, so we use __(string $str) PHP function which returns a translated string of the current language.

      Note:For other useful qTranslate functions check out Official qTranslate Support Forum

    • Line 5

      All that is left to do is insert the translated text as an array of attributes into attr parameter of the_post_thumbnail function. Generated img tag will contain both attributes containing the text we used in the array.

I hope you found this article useful. Please drop a comment or consider sharing it.

3 thoughts on “WordPress-qTranslate : How to make alt tag attribute of featured image change language

  1. Hi there!

    Thanks for the tutorial it works as a charm.
    I have a problem though and I would really appreciate if you could help.
    This works great for the default featured image but I can’t make it work with “Multiple Featured Images” plugin.

    The following is the code that I use to display the additional image(s):

    < ?php if( class_exists( 'kdMultipleFeaturedImages' ) ) {
    echo '';
    kd_mfi_the_featured_image( 'featured-image-2', 'page',
    'thumbnail' );
    echo '';
    }
    ?>

    Please help if you can :)

    Thanks!

    • I looked at the source code of “Multiple Featured Images” plugin and kd_mfi_the_featured_image() function calls wp_get_attachment_image() WordPress function, so you could try to use wp_get_attachment_image_attributes filter and apply __() translation there, something like this:

      function qtranslate_image_attachment_attributes($attr) {
      $attr['alt']=__($attr['alt']);
      return $attr;
      }
      add_filter('wp_get_attachment_image_attributes', 'qtranslate_image_attachment_attributes', 10, 2 );

      Add that code inside functions.php file in your theme.

      I haven’t tried this code. Let me know if it works.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge