{"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_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":"","jetpack_post_was_ever_published":false},"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":216,"url":"https:\/\/pixert.com\/blog\/how-to-show-world-map-as-default-view-pronamic-google-maps-plugin-wordpress\/","url_meta":{"origin":314,"position":1},"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":2},"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":300,"url":"https:\/\/pixert.com\/blog\/how-to-add-widgetized-custom-sidebars-wordpress-theme\/","url_meta":{"origin":314,"position":3},"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":[]},{"id":290,"url":"https:\/\/pixert.com\/blog\/override-css-property-right-to-left\/","url_meta":{"origin":314,"position":4},"title":"Override CSS property right to left","author":"Pixel Insert \/ Pixert","date":"March 4, 2013","format":false,"excerpt":"\u00a0 This case is an example on how to override CSS property right to left We have this AdSense banner floating on the right side of the screen. What if you want to change it to the left Recently, I installed Floating AdSense plugin for WordPress. It's very helpful to\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":554,"url":"https:\/\/pixert.com\/blog\/a-micro-landing-page-for-social-media-with-wordpress-wp-mylinks\/","url_meta":{"origin":314,"position":5},"title":"A micro landing page for Social Media with WordPress, WP MyLinks","author":"Pixel Insert \/ Pixert","date":"March 22, 2021","format":false,"excerpt":"I need a micro landing page similar to Linktree but on top of WordPress. I could use Linktree but I already have a WordPress based website and my own domain which is good for my own branding. I found a plugin, WP MyLinks to make it happen. As the creator\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\/2021\/03\/AF5FD8F8-0BBF-422C-8294-335543A03248.jpeg?fit=1200%2C1045&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/03\/AF5FD8F8-0BBF-422C-8294-335543A03248.jpeg?fit=1200%2C1045&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/03\/AF5FD8F8-0BBF-422C-8294-335543A03248.jpeg?fit=1200%2C1045&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/03\/AF5FD8F8-0BBF-422C-8294-335543A03248.jpeg?fit=1200%2C1045&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/pixert.com\/blog\/wp-content\/uploads\/2021\/03\/AF5FD8F8-0BBF-422C-8294-335543A03248.jpeg?fit=1200%2C1045&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}]}}