Retrieve and Display Images from a WordPress Post

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="en-US"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=5352","20101129080646","https://web.archive.org/","web","/_static/", "1291018006"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="googlebot" content="index,archive,follow,noodp"/> <meta name="robots" content="all,index,follow"/> <meta name="msnbot" content="all,index,follow"/> <meta name="description" content="I have already mentioned a few ways to do this but I have discovered a few problems with my old code. I have improved this one quite a bit so I felt that I..."/> <meta name="keywords" content="Array,count,custom,excerpt,file,Function,Images,link,loop,Lt,Php,piece,Place,post,side,tag,technique,"/> <title>Retrieve and Display Images from a WordPress Post | bavotasan.com</title> <link rel="stylesheet" href="https://web.archive.org/web/20101129080646cs_/http://bavotasan.com/wp-content/themes/bavotasan-2010/style.css?ver=1.0.8" type="text/css" media="screen"/> <link rel="shortcut icon" href="https://web.archive.org/web/20101129080646im_/http://bavotasan.com/favicon.ico"/> <link rel="pingback" href="http://bavotasan.com/xmlrpc.php"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Feed" href="https://web.archive.org/web/20101129080646/http://bavotasan.com/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Comments Feed" href="https://web.archive.org/web/20101129080646/http://bavotasan.com/comments/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Retrieve and Display Images from a WordPress Post Comments Feed" href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/feed/"/> <script type="text/javascript" src="https://web.archive.org/web/20101129080646js_/http://bavotasan.com/wp-includes/js/jquery/jquery.js?ver=1.4.2"></script> <link rel="index" title="bavotasan.com" href="http://bavotasan.com/"/> <link rel="start" title="Removing Images from a WordPress Post: Redux" href="http://bavotasan.com/tutorials/removing-images-from-a-wordpress-post/"/> <link rel="prev" title="How to Add Nested Comments to Your WordPress Theme" href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/how-to-add-nested-comments-to-your-wordpress-theme/"/> <link rel="next" title="Remove the Title Attribute from WordPress Category and Page Lists" href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/remove-the-title-attribute-from-wordpress-category-and-page-lists/"/> <link rel="canonical" href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/"/> <link rel="shortlink" href="https://web.archive.org/web/20101129080646/http://bit.ly/b3vAZK"/> <script type="text/javascript" src="https://web.archive.org/web/20101129080646js_/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <meta property="fb:page_id" content="137456822940271"/> <meta property="fb:admins" content="586505548"/> <meta property="og:site_name" content="bavotasan.com"/> <meta property="og:title" content="Retrieve and Display Images from a WordPress Post"/> <meta property="og:description" content="I have already mentioned a few ways to do this but I have discovered a few problems with my old code. I have improved this one quite a bit so I felt that I should just delete my old suggestions and offer you the best technique I have discovered. The whole point of this piece [...]"/> <meta property="og:type" content="article"/> <meta property="og:image" content="https://web.archive.org/web/20101129080646im_/http://bavotasan.com/wp-content/uploads/2009/03/2.png"/> </head> <body class="single single-post postid-46"> <div id="bodywrap">  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//web.archive.org/web/20101129080646/http://s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>   <div id="header"> <div id="topmenu" class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-2254" class="menu-item menu-item-type-custom menu-item-2254"><a href="https://web.archive.org/web/20101129080646/http://themes.bavotasan.com/">Themes by bavotasan.com</a></li> <li id="menu-item-2255" class="menu-item menu-item-type-custom menu-item-2255"><a href="https://web.archive.org/web/20101129080646/http://themes.bavotasan.com/support/">Support Forum</a></li> <li id="menu-item-2259" class="menu-item menu-item-type-custom menu-item-2259"><a href="https://web.archive.org/web/20101129080646/http://themes.bavotasan.com/affiliates">Affiliates</a></li> <li id="menu-item-2256" class="menu-item menu-item-type-post_type menu-item-2256"><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/about/">About</a></li> <li id="menu-item-2257" class="menu-item menu-item-type-post_type menu-item-2257"><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/services/">Services</a></li> <li id="menu-item-2258" class="menu-item menu-item-type-post_type menu-item-2258"><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/contact/">Contact</a></li> </ul></div> <div id="title"> <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/"> <img src="https://web.archive.org/web/20101129080646im_/http://bavotasan.com/wp-content/themes/bavotasan-2010/images/bavotasan.png" alt="bavotasan.com" width="400" height="70"/> <span id="desc"></span></a> </div> <div id="follow"> <span></span> <a href="https://web.archive.org/web/20101129080646/http://twitter.com/bavotasan" class="twitter"></a> <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/feed/" class="rss"></a> </div> <div id="navigation" class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2264"><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/"><span></span>Home</a></li> <li id="menu-item-2266"><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/category/articles/"><span></span>Articles</a></li> <li id="menu-item-2265" class="current-menu-item"><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/category/tutorials/"><span></span>Tutorials</a></li> <li id="menu-item-2267"><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/category/downloads/"><span></span>Downloads</a></li> </ul> </div> </div>  <div id="mainwrapper"> <div id="leftcontent"> <div class="posttop"> <div class="thedate"><div class="month">Mar</div><div class="day">10</div><div class="year">2009</div></div> <h1>Retrieve and Display Images from a WordPress Post</h1> <br class="clear"/> <p>I have already mentioned a few ways to do this but I have discovered a few problems with my old code. I have improved this one quite a bit so I felt that I should just delete my old suggestions and offer you the best technique I have discovered.<br/> <span id="more-46"></span><br/> The whole point of this piece of code is to make it easier for people to retrieve images from their posts. If you want to pull only the excerpt but also want to display an image along side it, this code is all you need. Forget using custom fields or plugins, just add this code to your theme’s functions.php and then call the function within the loop to pull the image you want.</p> <p>It functions by going through your post’s content and placing every image it encounters into an array. You can then use the function to call any image our of that array and display it.</p> <p>If you already have a functions.php file in your theme’s folder, just place the following code between the opening <code><?php</code> and closing <code>?></code> tags. If not, create one and make sure to add an opening <code><?php</code> and closing <code>?></code> tag.</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> getImage<span style="color: #009900;">(</span><span style="color: #000088;">$num</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$more</span><span style="color: #339933;">;</span> <span style="color: #000088;">$more</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> <span style="color: #000088;">$link</span> <span style="color: #339933;">=</span> get_permalink<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$content</span> <span style="color: #339933;">=</span> get_the_content<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$count</span> <span style="color: #339933;">=</span> <span style="color: #990000;">substr_count</span><span style="color: #009900;">(</span><span style="color: #000088;">$content</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'<img'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$start</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #b1b100;">for</span><span style="color: #009900;">(</span><span style="color: #000088;">$i</span><span style="color: #339933;">=</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span><span style="color: #000088;">$i</span><span style="color: #339933;"><=</span><span style="color: #000088;">$count</span><span style="color: #339933;">;</span><span style="color: #000088;">$i</span><span style="color: #339933;">++</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000088;">$imgBeg</span> <span style="color: #339933;">=</span> <span style="color: #990000;">strpos</span><span style="color: #009900;">(</span><span style="color: #000088;">$content</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'<img'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$start</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$post</span> <span style="color: #339933;">=</span> <span style="color: #990000;">substr</span><span style="color: #009900;">(</span><span style="color: #000088;">$content</span><span style="color: #339933;">,</span> <span style="color: #000088;">$imgBeg</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$imgEnd</span> <span style="color: #339933;">=</span> <span style="color: #990000;">strpos</span><span style="color: #009900;">(</span><span style="color: #000088;">$post</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'>'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$postOutput</span> <span style="color: #339933;">=</span> <span style="color: #990000;">substr</span><span style="color: #009900;">(</span><span style="color: #000088;">$post</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #000088;">$imgEnd</span><span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000088;">$postOutput</span> <span style="color: #339933;">=</span> <span style="color: #990000;">preg_replace</span><span style="color: #009900;">(</span><span style="color: #0000ff;">'/width="([0-9]*)" height="([0-9]*)"/'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span><span style="color: #000088;">$postOutput</span><span style="color: #009900;">)</span><span style="color: #339933;">;;</span> <span style="color: #000088;">$image</span><span style="color: #009900;">[</span><span style="color: #000088;">$i</span><span style="color: #009900;">]</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$postOutput</span><span style="color: #339933;">;</span> <span style="color: #000088;">$start</span><span style="color: #339933;">=</span><span style="color: #000088;">$imgEnd</span><span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #b1b100;">if</span><span style="color: #009900;">(</span><span style="color: #990000;">stristr</span><span style="color: #009900;">(</span><span style="color: #000088;">$image</span><span style="color: #009900;">[</span><span style="color: #000088;">$num</span><span style="color: #009900;">]</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'<img'</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'<a href="'</span><span style="color: #339933;">.</span><span style="color: #000088;">$link</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'">'</span><span style="color: #339933;">.</span><span style="color: #000088;">$image</span><span style="color: #009900;">[</span><span style="color: #000088;">$num</span><span style="color: #009900;">]</span><span style="color: #339933;">.</span><span style="color: #0000ff;">"</a>"</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> <span style="color: #000088;">$more</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span></pre></div></td></tr></table></div> <p>Now whenever you want to display an image from a post, just use <code><?php getImage('1'); ?></code>. The number ’1′ can be changed to any number. If you want to pull the second image from your post, change it to ’2′ and so on. Be sure to place this within the loop so that is works properly.</p> <p>NOTE: I just created a plugin for this called <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/wordpress/free-wordpress-plugins/get-images-from-posts-wordpress-plugin/">Simple Image Grabber</a>.</p> <div class="buttonbox"> </div> </div> <div class="post"> <div class="socialleft">If you liked this, please share it.</div> <ul class="addtoany_list"> <li><a href="https://web.archive.org/web/20101129080646/http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2Fb3vAZK&counturl=http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/" class="twitter-share-button" data-count="vertical" data-via="bavotasan">Tweet</a><script type="text/javascript" src="https://web.archive.org/web/20101129080646js_/http://platform.twitter.com/widgets.js"></script></li> <li><a href="https://web.archive.org/web/20101129080646/http://www.facebook.com/sharer.php?u=http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/&t=Retrieve and Display Images from a WordPress Post" title="Click to send this page to Facebook!" target="_blank" rel="nofollow" class="facebook-icon"></a></li> <li><a href="https://web.archive.org/web/20101129080646/http://digg.com/submit?phase=2&url=http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/&title=Retrieve and Display Images from a WordPress Post&bodytext=I have already mentioned a few ways to do this but I have discovered a few problems with my old code. I have improved this one quite a bit so I felt that I should just delete my old suggestions and offer you the best technique I have discovered. The whole point of this piece [...]" title="Digg" rel="nofollow" target="_blank" class="digg-icon"></a></li> <li><a href="https://web.archive.org/web/20101129080646/http://www.delicious.com/save" onclick="window.open('https://web.archive.org/web/20101129080646/http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/')+'&title='+encodeURIComponent('Retrieve and Display Images from a WordPress Post'),'delicious', 'toolbar=no,width=550,height=550'); return false;" class="delicious-icon"></a></li> <li><a href="https://web.archive.org/web/20101129080646/http://www.stumbleupon.com/submit?url=http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/&title=Retrieve and Display Images from a WordPress Post" title="StumbleUpon" rel="nofollow" target="_blank" class="stumbleupon-icon"></a></li> <li><iframe src="https://web.archive.org/web/20101129080646if_/http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbavotasan.com%2Ftutorials%2Fretrieve-the-first-image-from-a-wordpress-post%2F&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe></li> </ul> </div> <div class="post"> <p class="tags">Tags: <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/array/" rel="tag">Array</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/count/" rel="tag">count</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/custom/" rel="tag">custom</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/excerpt/" rel="tag">excerpt</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/file/" rel="tag">file</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/function/" rel="tag">Function</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/images/" rel="tag">Images</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/link/" rel="tag">link</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/loop/" rel="tag">loop</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/lt/" rel="tag">Lt</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/php/" rel="tag">Php</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/piece/" rel="tag">piece</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/place/" rel="tag">Place</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/post/" rel="tag">post</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/side/" rel="tag">side</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/tag/" rel="tag">tag</a>, <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tag/technique/" rel="tag">technique</a></p> <p class="tags">Short URL: <a href="https://web.archive.org/web/20101129080646/http://bit.ly/b3vAZK" title="Retrieve and Display Images from a WordPress Post">http://bit.ly/b3vAZK</a></p> </div> <div class="post"> <div id="crp_related"> <h3>Similar Posts</h3> <ul> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/turning-on-php-errors/" rel="bookmark" title="Permanent Link to Turning On PHP Errors">Turning On PHP Errors</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/a-basic-jquery-slideshow/" rel="bookmark" title="Permanent Link to A Basic jQuery Slideshow">A Basic jQuery Slideshow</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/jquery-replace-word-with-link/" rel="bookmark" title="Permanent Link to Use jQuery to Replace a Word with a Link">Use jQuery to Replace a Word with a Link</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/a-simple-css-trick-to-vertically-align-text/" rel="bookmark" title="Permanent Link to A Simple CSS Trick to Vertically Align Text">A Simple CSS Trick to Vertically Align Text</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/using-ajax-with-wordpress/" rel="bookmark" title="Permanent Link to Using Ajax with WordPress">Using Ajax with WordPress</a></li> </ul> </div> <a href="https://web.archive.org/web/20101129080646/http://www.netfirms.com/web-hosting/web-hosting-business/?a_aid=4c8bb52b19602&a_bid=8f049e07" target="_top" style="float:right;"><img src="https://web.archive.org/web/20101129080646im_/http://www.webhostrevenue.com/accounts/default1/banners/300x250-us.gif" alt="Netfirms Business Hosting Plan" title="Netfirms Business Hosting Plan" width="250" height="208"/></a><img style="border:0" src="https://web.archive.org/web/20101129080646im_/http://www.webhostrevenue.com/scripts/imp.php?a_aid=4c8bb52b19602&a_bid=8f049e07" width="1" height="1" alt=""/> </div> <div class="post"> <a href="#comment_list"></a> <div id="comments"> <h3 id="comments-title">Discussion <small> 88 Comments</small> </h3> <div class="navigation"> <div class="fl"></div> <div class="fr"><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/comment-page-2/#comments">Newer Comments →</a></div> </div> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-60"> <div id="comment-60"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/290898c64d7f007b90424d0d0a6cce7d?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Hubert</span> <span class="commentdate"> on November 29, 2008 at 2:50 am</span> </div> <div class="comment-text"> <p>Hi ! I just wanted to say THANK YOU, it works like a charm – and it’s such a so concise and clean code. I’ve been looking for something like this for ages !</p> <p>Cheers and keep the good work,</p> <p>H.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=60#respond" onclick="return addComment.moveForm("comment-60", "60", "respond", "46")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-64"> <div id="comment-64"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/0d66c8bf6b3b2ec9b0653b44f9858ce4?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://www.thisismyurl.com/" rel="external " class="url">Christopher Ross</a></span> <span class="commentdate"> on December 4, 2008 at 1:30 pm</span> </div> <div class="comment-text"> <p>Hey Chris, thanks for posting this! </p> <p>When it comes to <a href="https://web.archive.org/web/20101129080646/http://www.thisismyurl.com/wordpress/simple-tricks-to-speed-up-your-wordpress-web-site/">speeding up WordPress</a> it’s always better for people to install code like this over a plug-in.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=64#respond" onclick="return addComment.moveForm("comment-64", "64", "respond", "46")">Reply</a> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-2355"> <div id="comment-2355"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/475803d69548fd1d4b3d256ce121c6ba?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://tipsonhowtogrowtallernaturally.com/" rel="external " class="url">Jim</a></span> <span class="commentdate"> on May 19, 2009 at 2:53 am</span> </div> <div class="comment-text"> <p>That’s true only if you know what you’re doing. Or you’ll kill your blog in a second <img src="https://web.archive.org/web/20101129080646im_/http://bavotasan.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> </p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-280"> <div id="comment-280"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/49b38d04aaf131d18607d3230ed3c4b2?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://jagztalk.com/" rel="external " class="url">Jagz</a></span> <span class="commentdate"> on February 19, 2009 at 11:47 pm</span> </div> <div class="comment-text"> <p>I came across your site while searching for a solution to show up the image of the post. Though I found an alternate solution and would not be using the one given by you, still liked this code, bookmarking for future use.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=280#respond" onclick="return addComment.moveForm("comment-280", "280", "respond", "46")">Reply</a> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-545"> <div id="comment-545"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/0bfd0b8f03985fc44025d7904f3013a9?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://www.martynmoore.com/" rel="external " class="url">Martyn</a></span> <span class="commentdate"> on March 6, 2009 at 9:55 am</span> </div> <div class="comment-text"> <p>Hi, I’m building a new site using WP and Magazine Basic and I want to be able to display an image in the front page extract from the latest post. Is this the way to do it?</p> <p>Sorry for being quite ignorant, but would you be able to explain where the code is to be used? I’m learning fast and have edited within WP but I’m not clear about phrases like “within the loop”.</p> <p>Thanks.</p> <p>Martyn</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=545#respond" onclick="return addComment.moveForm("comment-545", "545", "respond", "46")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-602"> <div id="comment-602"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://tinkerpriestmedia.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on March 9, 2009 at 5:18 pm</span> </div> <div class="comment-text"> <p>Hey Martin,</p> <p>The first image from each post should already be displayed on the main page. I have been hearing that this might not be working properly with captions. Gonna take a look and see. The getImage() tag pulls the image. The function itself is in the functions.php file.</p> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-724"> <div id="comment-724"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/2ec7e3900232913cb4c9654151fc659d?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://wp-premiums.com/" rel="external " class="url">PJ</a></span> <span class="commentdate"> on March 14, 2009 at 9:43 pm</span> </div> <div class="comment-text"> <p>Thanks, this is really useful. Do you know if there’s a way to link to a default image in the event that there isn’t an uploaded image for a particular post?</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=724#respond" onclick="return addComment.moveForm("comment-724", "724", "respond", "46")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-742"> <div id="comment-742"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/ef637801ad995917428f47373537feb0?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">jaysen</span> <span class="commentdate"> on March 15, 2009 at 4:25 pm</span> </div> <div class="comment-text"> <p>Hi! Its brilliant! Thanks for sharing! </p> <p>I have a question though!</p> <p>Say i have a custom field called ‘url’ for the post! What should i add to the code so that when the user click on the picture it goes to the link provided in the custom field (url)?</p> <p>Hope you might help! Thanks</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=742#respond" onclick="return addComment.moveForm("comment-742", "742", "respond", "46")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor even depth-2" id="li-comment-771"> <div id="comment-771"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://tinkerpriestmedia.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on March 16, 2009 at 5:24 pm</span> </div> <div class="comment-text"> <p>That is pretty easy. Just open simple-image-grabber.php in the plugin’s folder and look for line #17:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">if</span><span style="color: #009900;">(</span><span style="color: #000088;">$displayLink</span> <span style="color: #339933;">!=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000088;">$link</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'<a href="'</span><span style="color: #339933;">.</span>get_permalink<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'" rel="nofollow">'</span><span style="color: #339933;">;</span> <span style="color: #000088;">$linkend</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'</a>'</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span></pre></div></td></tr></table></div> <p>Change it to:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$post</span><span style="color: #339933;">;</span> <span style="color: #000088;">$key</span><span style="color: #339933;">=</span><span style="color: #0000ff;">"mykey"</span><span style="color: #339933;">;</span> <span style="color: #000088;">$custom</span> <span style="color: #339933;">=</span> get_post_meta<span style="color: #009900;">(</span><span style="color: #000088;">$post</span><span style="color: #339933;">-></span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #000088;">$key</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?></span> <span style="color: #b1b100;">if</span><span style="color: #009900;">(</span><span style="color: #000088;">$displayLink</span> <span style="color: #339933;">!=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000088;">$link</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'<a href="'</span><span style="color: #339933;">.</span><span style="color: #000088;">$custom</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'" rel="nofollow">'</span><span style="color: #339933;">;</span> <span style="color: #000088;">$linkend</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'</a>'</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span></pre></div></td></tr></table></div> <p>And make sure to change “mykey” to the name of your custom field.</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-776"> <div id="comment-776"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/dc1d2b77f6816a9b8fb86d26dbaa1fe2?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://www.simoncreative.com/" rel="external " class="url">Simon Dabkowski</a></span> <span class="commentdate"> on March 16, 2009 at 5:43 pm</span> </div> <div class="comment-text"> <p>very nice plugin, gonna try it out.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=776#respond" onclick="return addComment.moveForm("comment-776", "776", "respond", "46")">Reply</a> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-912"> <div id="comment-912"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/dbda3edebf11e53546365843f67ffeec?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://takingouttheeurotrash.com/" rel="external " class="url">Ryan</a></span> <span class="commentdate"> on March 21, 2009 at 7:11 pm</span> </div> <div class="comment-text"> <p>Is there a way to have this code modify the width of the resulting image? So perhaps all images grabbed using this code have a width of 200px?</p> <p>This is great either way though, thanks so much!</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=912#respond" onclick="return addComment.moveForm("comment-912", "912", "respond", "46")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-960"> <div id="comment-960"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://tinkerpriestmedia.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on March 23, 2009 at 4:19 pm</span> </div> <div class="comment-text"> <p>You can download the plugin I created called <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/downloads/simple-image-grabber-wordpress-plugin/">Simple Image Grabber</a>. It uses this code and offers a width option.</p> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-932"> <div id="comment-932"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/813228f2170d064d48d9a4ac86993166?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Aaron</span> <span class="commentdate"> on March 23, 2009 at 1:40 am</span> </div> <div class="comment-text"> <p>Hi, for some reason I can’t get this, or the plugin to work. Is there something that might be conflicting? </p> <p>thanks,<br/> Aaron</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=932#respond" onclick="return addComment.moveForm("comment-932", "932", "respond", "46")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-1905"> <div id="comment-1905"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://tinkerpriestmedia.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on April 16, 2009 at 12:26 am</span> </div> <div class="comment-text"> <p>Maybe. The best way to figure out if you have a plugin that conflicts is to shut them all off and then one by one reactivate them.</p> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-1827"> <div id="comment-1827"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/22aa390f68c654068d70615ccf4f9ce1?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://leonpaternoster.com/" rel="external " class="url">Leon Paternoster</a></span> <span class="commentdate"> on April 14, 2009 at 10:54 am</span> </div> <div class="comment-text"> <p>Hi – I’m using the code in <code>functions.php</code> but it’s messing with my wp-admin: I get a blank screen when I try to login. I’m using 2.7.1</p> <p>It’s a shame, because it works a treat.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=1827#respond" onclick="return addComment.moveForm("comment-1827", "1827", "respond", "46")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-1906"> <div id="comment-1906"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://tinkerpriestmedia.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on April 16, 2009 at 12:27 am</span> </div> <div class="comment-text"> <p>A blank screen is caused by extra lines in your functions.php file. Check out my post <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tips/the-wordpress-admin-panel-and-the-blank-screen-of-death/">The WordPress Admin Panel and The Blank Screen of Death</a> for more info.</p> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-2039"> <div id="comment-2039"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/027be4286b93c5227ebd6509689a2611?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://deepstandard.com/" rel="external " class="url">Wise</a></span> <span class="commentdate"> on April 21, 2009 at 9:12 pm</span> </div> <div class="comment-text"> <p>What to do if you don’t have an image in the post? Is there a loop you can add?</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=2039#respond" onclick="return addComment.moveForm("comment-2039", "2039", "respond", "46")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-2096"> <div id="comment-2096"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://tinkerpriestmedia.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on April 23, 2009 at 11:25 am</span> </div> <div class="comment-text"> <p>I’m not too sure what you mean. Without an image in your post you have nothing to display.</p> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-2108"> <div id="comment-2108"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/1c2fd4a33ce8c8d6b84c16b5167b71a0?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://www.ehotdiscussion.com/" rel="external " class="url">vinoth</a></span> <span class="commentdate"> on April 24, 2009 at 12:09 am</span> </div> <div class="comment-text"> <p>If i want to resize the image dimension to display.. what is the parameter i have to add and where..</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=2108#respond" onclick="return addComment.moveForm("comment-2108", "2108", "respond", "46")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-2173"> <div id="comment-2173"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://tinkerpriestmedia.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on April 27, 2009 at 11:48 am</span> </div> <div class="comment-text"> <p>If you want to control more parameters I would suggest using my plugin <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/wordpress/free-wordpress-plugins/get-images-from-posts-wordpress-plugin/">Simple Image Grabber</a>.</p> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-2374"> <div id="comment-2374"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/c7e5d417f51010b0dc1c5e460142c946?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://ephotography.in/" rel="external " class="url">elton</a></span> <span class="commentdate"> on May 21, 2009 at 5:14 am</span> </div> <div class="comment-text"> <p>this seems to be exactly what i’m looking for. however, i’m a bit of a noob at wordpress. I figured the plugin / add code to functions.php part, but i’m confused regarding where does this code go: <code><?php getImage('1'); ?></code><br/> does it have to be entered in the post via the html view or does it have to be put in custom fields? will this code have to be inputted for each post? </p> <p>thanks in advance.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=2374#respond" onclick="return addComment.moveForm("comment-2374", "2374", "respond", "46")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-2742"> <div id="comment-2742"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/8b7a5ac5d0aacf71641065e6aec73c9a?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">FX</span> <span class="commentdate"> on June 10, 2009 at 9:59 pm</span> </div> <div class="comment-text"> <p>how about pulling only the text from a post .. to say put it in its own div on the single.php?</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=2742#respond" onclick="return addComment.moveForm("comment-2742", "2742", "respond", "46")">Reply</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-3136"> <div id="comment-3136"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/cacf7fb23af546dd0ada7e01dce70e4f?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://wormeyman.com/" rel="external " class="url">wormeyman</a></span> <span class="commentdate"> on June 27, 2009 at 4:33 pm</span> </div> <div class="comment-text"> <p>Thanks for this it works like a charm on my wife’s websites search results!</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=3136#respond" onclick="return addComment.moveForm("comment-3136", "3136", "respond", "46")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-3170"> <div id="comment-3170"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/04635e0e396e4905f9c036fdfb0c17d2?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://tekstyle.me/" rel="external " class="url">tekstyle</a></span> <span class="commentdate"> on June 30, 2009 at 5:19 pm</span> </div> <div class="comment-text"> <p>excelent!<br/> now how to hide first image from post?<br/> i’d like to display it at another div with this code</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=3170#respond" onclick="return addComment.moveForm("comment-3170", "3170", "respond", "46")">Reply</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-3509"> <div id="comment-3509"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/9f7ab87213fac07a16d866847e894e39?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://arch1k.freehostia.com/?cat=4" rel="external " class="url">Edward</a></span> <span class="commentdate"> on July 30, 2009 at 2:37 am</span> </div> <div class="comment-text"> <p>Thank you so much!!!<br/> This saved my ass. </p> <p>I’ll be moving this one to a .com domain soon after design is complete.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=3509#respond" onclick="return addComment.moveForm("comment-3509", "3509", "respond", "46")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-3809"> <div id="comment-3809"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/9496f44e547f613660a06fa9d07f6ca2?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://mv.davidcong.net/" rel="external " class="url">Dave</a></span> <span class="commentdate"> on August 14, 2009 at 3:25 pm</span> </div> <div class="comment-text"> <p>This is awesome! But if I wanted to add a resized youtube video, how can I also make it retrieve everything for the tags <code><object><param> and <embed></code></p> <p>For instance, I want this embed to show in the excerpt:</p> <p><code><object width="215" height="180"><param name="movie" value="http://www.youtube.com/v/HHK0CqBZyv8&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HHK0CqBZyv8&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="215" height="180"></embed></object><br/> </code></p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=3809#respond" onclick="return addComment.moveForm("comment-3809", "3809", "respond", "46")">Reply</a> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-5252"> <div id="comment-5252"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/0e80d007b2bcabbe9791ea2702cf834a?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">CHM</span> <span class="commentdate"> on October 4, 2009 at 5:19 pm</span> </div> <div class="comment-text"> <p>I would also like to know this.</p> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-16018"> <div id="comment-16018"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/2357040bedd11405384a42ccaa52aa5b?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">scott</span> <span class="commentdate"> on September 10, 2010 at 8:04 pm</span> </div> <div class="comment-text"> <p>was this ever sorted out? This is exactly what I’m looking for.</p> </div> </div> </li> <li class="comment even depth-2" id="li-comment-16100"> <div id="comment-16100"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/6f89ecf765e1f81c0b7c5009fef9ff8d?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">tarmijn</span> <span class="commentdate"> on September 17, 2010 at 10:39 am</span> </div> <div class="comment-text"> <p>Me too!</p> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-4384"> <div id="comment-4384"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/aa64f11a449aade828eb0f6e55c6fcbb?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Sougata</span> <span class="commentdate"> on September 12, 2009 at 3:51 am</span> </div> <div class="comment-text"> <p>Hi,</p> <p>thanks a lot, you made life easier.</p> <p>S</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=4384#respond" onclick="return addComment.moveForm("comment-4384", "4384", "respond", "46")">Reply</a> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-4633"> <div id="comment-4633"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/1e63d4ab065bcee7df1dba6cbd6303e0?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://www.movers-edge.com/Movers-s/2.htm" rel="external " class="url">Movers Clendaniel</a></span> <span class="commentdate"> on September 18, 2009 at 9:05 am</span> </div> <div class="comment-text"> <p>Thanks very much for this. I’m always amazed how much of a difference it makes to have photos included with a post. I guess we’re all visual creatures!</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=4633#respond" onclick="return addComment.moveForm("comment-4633", "4633", "respond", "46")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-5352"> <div id="comment-5352"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/106fecda919c56c32d70292a3f67b3fd?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://www.diziizlek.com/" rel="external " class="url">Dizi izle</a></span> <span class="commentdate"> on October 10, 2009 at 8:38 am</span> </div> <div class="comment-text"> <p>I came across your site while searching for a solution to show up the image of the post. Though I found an alternate solution and would not be using the one given by you, still liked this code, bookmarking for future use.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=5352#respond" onclick="return addComment.moveForm("comment-5352", "5352", "respond", "46")">Reply</a> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-5391"> <div id="comment-5391"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/365edf8eac4b5031b5ab48a4609668e2?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Andrea</span> <span class="commentdate"> on October 13, 2009 at 7:24 am</span> </div> <div class="comment-text"> <p>This is a great function. Thank you. I have one question. What can I do if I want that the output code specify the width and height of the image?</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"> <span style="color: #339933;"><</span>a href<span style="color: #339933;">=</span><span style="color: #0000ff;">"http://www.website.it/wp/?p=12"</span> rel<span style="color: #339933;">=</span><span style="color: #0000ff;">"nofollow"</span><span style="color: #339933;">></</span>a<span style="color: #339933;">></span></pre></div></td></tr></table></div> <p>I need this because I’m using a Javascript for the alignment of the posts, and without the definitions of width and height is not working correctly…</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=5391#respond" onclick="return addComment.moveForm("comment-5391", "5391", "respond", "46")">Reply</a> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-7850"> <div id="comment-7850"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/feb2bae4c679b750fbf23aa086314c8d?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://callumalden.com/" rel="external " class="url">callum</a></span> <span class="commentdate"> on February 22, 2010 at 4:25 pm</span> </div> <div class="comment-text"> <p>I think you’d remove the:</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$postOutput</span> <span style="color: #339933;">=</span> <span style="color: #990000;">preg_replace</span><span style="color: #009900;">(</span><span style="color: #0000ff;">'/width="([0-9]*)" height="([0-9]*)"/'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">,</span><span style="color: #000088;">$postOutput</span><span style="color: #009900;">)</span><span style="color: #339933;">;;</span></pre></div></td></tr></table></div> <p>code from functions.php</p> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-5424"> <div id="comment-5424"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/86e6cdf64e07438c25278df8775215df?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://bcdc.us/" rel="external " class="url">Bruno Correia</a></span> <span class="commentdate"> on October 14, 2009 at 2:14 pm</span> </div> <div class="comment-text"> <p>Pretty good, thanks a lot for sharing it!</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=5424#respond" onclick="return addComment.moveForm("comment-5424", "5424", "respond", "46")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-5465"> <div id="comment-5465"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://1.gravatar.com/avatar/1468efa9072c971362612e398764a5d2?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://www.webtha.com/" rel="external " class="url">webtha</a></span> <span class="commentdate"> on October 17, 2009 at 1:57 am</span> </div> <div class="comment-text"> <p>Thaks for shared nice info.<br/> I used it in my blog.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=5465#respond" onclick="return addComment.moveForm("comment-5465", "5465", "respond", "46")">Reply</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-6234"> <div id="comment-6234"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101129080646im_/http://0.gravatar.com/avatar/68d6a6bf0337db98561e7208f09c8383?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20101129080646/http://blog-themes.kalinawebdesigns.com/" rel="external " class="url">Colleen</a></span> <span class="commentdate"> on November 16, 2009 at 10:12 pm</span> </div> <div class="comment-text"> <p>Thanks so much, this is exactly what I was looking for!</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/?replytocom=6234#respond" onclick="return addComment.moveForm("comment-6234", "6234", "respond", "46")">Reply</a> </div> </div> </li> </ol> <div class="navigation"> <div class="fl"></div> <div class="fr"><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/comment-page-2/#comments">Newer Comments →</a></div> </div> <a name="respond"></a> <div id="respond"> <h3 id="reply-title">Leave a Reply to <a href="#comment-5352">Dizi izle</a> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/#respond">Cancel reply</a></small></h3> <form action="https://web.archive.org/web/20101129080646/http://bavotasan.com/wp-comments-post.php" method="post" id="commentform"> <p class="comment-notes">Your email address will not be published. Required fields are marked <span class="required">*</span></p> <p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><br/><input id="author" name="author" type="text" value="" size="30"/></p> <p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><br/><input id="email" name="email" type="text" value="" size="30"/></p> <p class="comment-form-url"><label for="url">Website</label><br/><input id="url" name="url" type="text" value="" size="30"/></p> <p>To enter code in the comment box, please place it between <strong><pre lang="php"> </pre></strong> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor.</p> <p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p> <p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment"/> <input type="hidden" name="comment_post_ID" value="46" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="5352"/> </p> </form> </div> </div> </div> </div>  <div id="sidebar"> <div id="search"> <form method="get" id="searchform" action="https://web.archive.org/web/20101129080646/http://bavotasan.com/"> <div> <input type="text" class="search_input" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"/> <input type="hidden" id="searchsubmit" value="Search"/> </div> </form> <div class="arrow"></div> </div> <div id="sideads">  <div id="bsap_1237633" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  <br class="clear"/>  <div id="bsap_1237624" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  </div> <br class="clear"/> <div class="line"></div> <div class="side-widget"> <h4>Most Popular Posts</h4> <ul class="wppp_list"> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" title="Creating a Mouseover Fade Effect with jQuery ">Creating a Mouseover Fade Effect with jQuery </a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/" title="A Simple Mouseover Hover Effect with jQuery">A Simple Mouseover Hover Effect with jQuery</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/" title="Full Size Background Image jQuery Plugin">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/" title="Magazine Basic v2.6 WordPress Theme">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/processing-multiple-forms-on-one-page-with-php/" title="Processing Multiple Forms on One Page with PHP">Processing Multiple Forms on One Page with PHP</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/turn-text-into-an-image-using-the-php-gd-library/" title="Turn Text into an Image using the PHP GD Library">Turn Text into an Image using the PHP GD Library</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/adding-extra-fields-to-the-wordpress-user-profile/" title="Adding Extra Fields to the WordPress User Profile">Adding Extra Fields to the WordPress User Profile</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/articles/magazine-flow-wordpress-theme/" title="Magazine Flow WordPress Theme">Magazine Flow WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/" title="Retrieve and Display Images from a WordPress Post">Retrieve and Display Images from a WordPress Post</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/how-to-create-a-twitter-feed-on-your-web-site/" title="How to Create a Twitter Feed on Your Web Site">How to Create a Twitter Feed on Your Web Site</a></li> </ul> </div> <div id="affiliates-ads"> <a href="https://web.archive.org/web/20101129080646/http://themes.bavotasan.com/" class="themes"></a> <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/" class="deletedupes"></a> <a href="https://web.archive.org/web/20101129080646/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest&page=7" class="inmotion"></a> </div> <div class="line"></div> <div class="side-widget redlink"> <h4>Get a Premium Theme for FREE</h4> <p><a href="https://web.archive.org/web/20101129080646/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest" class="wordpress-logo"></a>Don't have a Web site? How would you like to have WordPress and a <a href="https://web.archive.org/web/20101129080646/http://themes.bavotasan.com/category/premium-themes">Themes by bavotasan.com</a> Premium theme installed and configured for <em>FREE</em>? All you need to do is <a href="https://web.archive.org/web/20101129080646/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest">sign up with InMotion Hosting through this link</a>. <br/> <br/> <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/free-premium-theme/" class="fr"><em>Click here for more information »</em></a> </p> </div> <div class="side-widget"> <h4>Support c.bavota</h4> <p>If you would like to support <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/">c.bavota</a> and <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/">bavotasan.com</a>, please use the donate link below. Any amount, even $1.00, is appreciated (a man's gotta eat, ya know).</p> <a href="https://web.archive.org/web/20101129080646/https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5745952" id="donate" class="fr">Donate</a> </div> </div> </div> </div>  <div class="whiteline"></div> <div id="footer"> <div id="bottombar"> <a href="javascript:void(0)" class="backtotop">Back to Top<span></span></a> <div class="col col1"> <h4 class="one"><span></span>Stay in Touch</h4> <a href="https://web.archive.org/web/20101129080646/http://twitter.com/bavotasan" class="footer-twitter"><span></span>Follow me on Twitter</a><br/> <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/feed/" class="footer-rss"><span></span>Subscribe to my RSS Feed</a> <br class="clear"/> <h4 class="two"><span></span>Stay in Tune</h4> <div class="tweets"></div> </div> <div class="col col2"> <h4 class="three"><span></span>Downloads</h4> <ul> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/downloads/my-first-vanilla-plugin/">My First Vanilla Plugin</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugin</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/">Easy Overlay Modal Window jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/downloads/snowblind-free-wordpress-theme/">Snowblind Free WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/downloads/8-free-colorful-background-textures-for-designers/">8 Free Colorful Background Textures for Designers</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/downloads/stationery-premium-wordpress-theme/">Stationery Premium WordPress Theme</a></li> </ul> </div> <div class="col col3"> <h4 class="four"><span></span>Tutorials</h4> <ul> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/add-a-copyright-notice-to-copied-text/">Add a Copyright Notice to Copied Text</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/meta-descriptions-wordpress/">Meta Descriptions for WordPress</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/turning-on-php-errors/">Turning On PHP Errors</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/using-css-resets/">Using CSS Resets</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/">A Sleek Navigation Menu with CSS3</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/a-basic-jquery-slideshow/">A Basic jQuery Slideshow</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/text-rotation-css3/">Text Rotation with CSS3</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/adding-tweet-button-wordpress/">Adding a Tweet Button to WordPress</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/developing-themes-for-wordpress-make-money/">Developing Themes for WordPress: Part 5</a></li> <li><a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/tutorials/developing-themes-for-wordpress-options/">Developing Themes for WordPress: Part 4</a></li> </ul> </div> </div> </div> <div id="copyright"> <div id="copyright-wrapper"> Copyright © 2010 <a href="https://web.archive.org/web/20101129080646/http://bavotasan.com/">bavotasan.com</a>. All Rights Reserved. Powered by <a href="https://web.archive.org/web/20101129080646/http://www.wordpress.org/">WordPress</a>. </div> </div> <script src="https://web.archive.org/web/20101129080646js_/http://stats.wordpress.com/e-201048.js" type="text/javascript"></script> <script type="text/javascript"> st_go({blog:'5317602',v:'ext',post:'46'}); var load_cmc = function(){linktracker_init(5317602,46,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script> <script type="text/javascript" src="https://web.archive.org/web/20101129080646js_/http://bavotasan.com/wp-content/themes/bavotasan-2010/js/coolstuff.js"></script> <script type="text/javascript"> hs.graphicsDir = 'https://web.archive.org/web/20101129080646/http://bavotasan.com/images/graphics/'; hs.outlineType = 'rounded-white'; hs.outlineWhileAnimating = true; hs.showCredits = false; </script>  </body> </html>

CINXE.COM

Retrieve and Display Images from a WordPress Post | bavotasan.com