{"id":314,"date":"2013-10-29T09:12:10","date_gmt":"2013-10-29T09:12:10","guid":{"rendered":"http:\/\/pixert.com\/blog\/?p=314"},"modified":"2013-10-29T09:12:10","modified_gmt":"2013-10-29T09:12:10","slug":"wordpress-add-title-to-img-tag-using-get-the-image-plugin","status":"publish","type":"post","link":"https:\/\/pixert.com\/blog\/wordpress-add-title-to-img-tag-using-get-the-image-plugin\/","title":{"rendered":"WordPress: Add Title to IMG tag using Get The Image plugin"},"content":{"rendered":"
\"This<\/a>
This image is a screenshot from Get The Image plugin.<\/figcaption><\/figure>\n

Get The Image plugin from Justin Tadlock<\/a> is awesome, a script that can grab an image by custom field input, WordPress’ featured image, post attachment, or extracting it from the post’s content. <\/p>\n

Recently, someone asked about how to add Title to IMG tag. We know ALT attributes in IMG tag, but IMG tag also support Title attributes as well. These two attributes supposed to describe the image in words and impact image search rankings. ALT attribute should describe what the image is about, while Title should follow the rules of the regular title. <\/p>\n

Get The Image only have ALT attribute, we are adding Title attribute by changing following code
\n1. Open get-the-image.php with Text Editor. I’m using Text Wrangler on Mac
\n2. Find following code, it’s in line 459-460 on Text Wrangler. Change it from<\/p>\n

\/* Add the image attributes to the <img \/> element. *\/\r\n\t$html = '<img src="' . $image['src'] . '" alt="' . esc_attr( strip_tags( $image_alt ) ) . '" class="' . esc_attr( $class ) . '"' . $width . $height . ' \/>';<\/pre>\n
to<\/p>\n
\/* Add the image attributes to the <img \/> element. *\/\r\n    $html = '<img src="' . $image['src'] . '" alt="' . esc_attr( strip_tags( $image_alt ) ) . '" title="' . esc_attr( apply_filters( 'the_title', get_post_field( 'post_title', $post_id ) ) ) . '" class="' . esc_attr( $class ) . '"' . $width . $height . ' \/>';<\/pre>\n","protected":false},"excerpt":{"rendered":"
Get The Image plugin from Justin Tadlock is awesome, a script that can grab an image by custom field input, WordPress’ featured image, post attachment, or extracting it from the post’s content. Recently, someone asked about how to add Title to IMG tag. We know ALT attributes in IMG tag, but IMG tag also support […]<\/p>\n","protected":false},"author":1,"featured_media":336,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[54,5],"tags":[55,39,6,66,134],"class_list":["post-314","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-snippet","category-wordpress","tag-code-snippet-2","tag-php","tag-wordpress-2","tag-wordpress-plugin","tag-xhtml"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/10\/screenshot-1.jpg?fit=1138%2C742&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1pvi1-54","jetpack-related-posts":[{"id":268,"url":"https:\/\/pixert.com\/blog\/wordpress-limit-post\/","url_meta":{"origin":314,"position":0},"title":"WordPress Limit Post","author":"Pixel Insert \/ Pixert","date":"November 30, 2012","format":false,"excerpt":"This function controls the maximum\u00a0amount of characters displayed for an entry on the main page. If the set limit is surpassed, the text on the entry will be chopped\u00a0to that amount of characters, otherwise the content will be showed unchanged. Add following code to functions.php in your theme folder [php]\u2026","rel":"","context":"In "Code Snippet"","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2011\/03\/wordpresslogo-300x68.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":355,"url":"https:\/\/pixert.com\/blog\/create-responsive-menu-with-wordpress-plugin\/","url_meta":{"origin":314,"position":1},"title":"Create Responsive Menu with WordPress Plugin","author":"Pixel Insert \/ Pixert","date":"March 29, 2014","format":false,"excerpt":"Responsive menu is a WordPress \u00a0plugin that creates a nice three-lined menu button or responsive menu when the site viewed on devices that users can click to bring a slide out menu, which is easily navigated .\u00a0 We don't need to code responsive menu to themes, \u00a0just install the plugin\u2026","rel":"","context":"In "WordPress"","block_context":{"text":"WordPress","link":"https:\/\/pixert.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/03\/responsivemenu.jpg?fit=640%2C592&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/03\/responsivemenu.jpg?fit=640%2C592&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2014\/03\/responsivemenu.jpg?fit=640%2C592&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":216,"url":"https:\/\/pixert.com\/blog\/how-to-show-world-map-as-default-view-pronamic-google-maps-plugin-wordpress\/","url_meta":{"origin":314,"position":2},"title":"How to show World Map as default view using Pronamic Google Maps plugin for WordPress","author":"Pixel Insert \/ Pixert","date":"March 26, 2012","format":false,"excerpt":"Pronamic Google Maps plugin is the best WordPress plugin for Google Maps \"With this plugin a user can easily add location (latitude, longitude) meta data to a page, post or a custom post type. This plugin adds a meta box with an Google Map to the post editor. Users can\u2026","rel":"","context":"In "Code Snippet"","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":217,"url":"https:\/\/pixert.com\/blog\/how-to-center-marker-pronamic-google-maps-plugin-wordpress\/","url_meta":{"origin":314,"position":3},"title":"How to center marker with Pronamic Google Maps plugin for WordPress","author":"Pixel Insert \/ Pixert","date":"March 26, 2012","format":false,"excerpt":"We have World map viewed as default map when Google Maps loaded in the website, now we want to make marker centered on the map. \u00a0Put the following JavaScript code snippet below Google Maps mashup code\u00a0 [php] jQuery(document).ready(function($) { \/\/ Mashup jQuery(\".pgmm\").bind(\"pronamic-google-maps-ready\", function(event, map){ map.setCenter(new google.maps.LatLng(latitude, longitude)); }); }); [\/php]\u2026","rel":"","context":"In "Code Snippet"","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":261,"url":"https:\/\/pixert.com\/blog\/cropping-post-featured-thumbnails-from-top-instead-of-center-in-wordpress-with-native-cropping-tool\/","url_meta":{"origin":314,"position":4},"title":"Cropping Post Thumbnails from Top instead of Center in WordPress","author":"Pixel Insert \/ Pixert","date":"October 14, 2012","format":false,"excerpt":"WordPress Posts \u00a0Thumbnails or Post Featured Images \u00a0is a theme feature introduced with Version 2.9. Thumbnail is an image that is chosen as the representative image for Posts, Pages or Custom Post Types. The display of this images is up to the theme. This is especially useful for \"magazine-style\" themes\u2026","rel":"","context":"In "Code Snippet"","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2012\/10\/feaimagewp-300x173.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":300,"url":"https:\/\/pixert.com\/blog\/how-to-add-widgetized-custom-sidebars-wordpress-theme\/","url_meta":{"origin":314,"position":5},"title":"How to add widgetized and custom sidebars on WordPress theme","author":"Pixel Insert \/ Pixert","date":"April 13, 2013","format":false,"excerpt":"WordPress themes are usually come with Widgetized sidebars where you can drag and drop widgets. It's okay when we don't need more widgetized sidebars to the theme, but we probably think to add more when we think widgetized sidebar solution to your customization problem, for instance you want to add\u2026","rel":"","context":"In "Code Snippet"","block_context":{"text":"Code Snippet","link":"https:\/\/pixert.com\/blog\/category\/code-snippet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2013\/04\/cs-newsidebar.jpg?fit=1200%2C822&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts\/314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/comments?post=314"}],"version-history":[{"count":0,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/posts\/314\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/media\/336"}],"wp:attachment":[{"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/media?parent=314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/categories?post=314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixert.com\/blog\/wp-json\/wp\/v2\/tags?post=314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}