Archive for December, 2010

Image gallery(thumbnails) with WordPress image cropping

What about creating a small gallery of linked thumbnails, based on images inserted in a post, with cropping thumbnails?

First, create a post on WordPress and choose a category, for example, “tour”.
Then you can insert as many images as you want, defining links as you want.
You can use a custom field, to manage the title of the galery.

Publish you post, and call it on your PHP page, using the code bellow(where you can choose the number of images of your gallery and the cropping dimensions):

<? 		
if (have_posts()) : 
 global $post;
 $myposts = get_posts('numberposts=1&category_name=tour');
 foreach($myposts as $post) :
	// # here you call a custom field on wordpress
	$tourdes = get_post_meta($post->ID, 'Descrip', true);
   setup_postdata($post);
 ?>
  <h4><?=$tourdes;?></h4>
	<div id="thumbs">            	
		<? 
		$args = array(
			'post_type' => 'attachment',
			'numberposts' => -1,
			'post_status' => null,
			'post_parent' => $post->ID
			); 
		$attachments = get_posts($args);
		if ($attachments) {
			// - $tot_img : the total number of thumbnails on the gallery
			$tot_img=8;
			// - $brk_lin : number of image on each line
			$brk_lin=4;
			foreach ($attachments as $attachment) {						
			  // # here we define the max number of images
			  if(intval($cnt_img) < $tot_img){							
				echo "<span style='padding-left:3px'>";
				$imgref = wp_get_attachment_url($attachment->ID);
				$imgsrc = wp_get_attachment_image($attachment->ID, array(40,40), $icon = false);
				echo "<a href=".$imgref.">". $imgsrc ."<a>";
				echo "</span>"."\n";							
				// # here we define the line break
				$cnt_lin=$cnt_lin+1;
				  if(intval($cnt_lin)==$brk_lin){
				 echo "<br>";	
				 $cnt_lin=0;							
				  }
			   }
			   $cnt_img=$cnt_img+1;						
			}
		}
	
		
		?>
	</div>
<? endforeach;
endif; ?>

,

7 Comments

Get the first image from wordpress posts(content)

There’s a lot of ways to get the first image from wordpress posts.

I’ve found a workaround, using the function bellow. Just Put it on your “functions.php” file.

function get_first_image($content,$wdt,$hgt) {
	$first_img = '';
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches);
	$pref_img = $matches [1] [0];

	if(empty($pref_img)){ //Defines a default image
		$pref_img = "";
	}
	else{
		$posgif = strrpos($pref_img , ".gif", 0);
		if($posgif > 0){
			$iext = "gif";
			$posimg = $posgif;
		}
		$posjpg = strrpos($pref_img , ".jpg", 0);
		if($posjpg > 0){
			$iext = "jpg";
			$posimg = $posjpg;
		}
		$posjpeg = strrpos($pref_img , ".jpeg", 0);
		if($posjpeg > 0){
			$iext = "jpeg";
			$posimg = $posjpeg;
		}
		$pospng = strrpos($pref_img , ".png", 0);
		if($pospng > 0){
			$iext = "png";
			$posimg = $pospng;
		}
		$first_img = substr($pref_img, 0, $posimg).".".$iext."?w=".$wdt."&h=".$hgt;
	}	
	return $first_img;
}

Call it in your code, like this:

<img src="<?php echo get_first_image_mat(get_the_content(),230,138);?>" border="0" style="width:230px;height:138px">

,

Leave a comment

Display YouTube Thumbnail with wordpress custom field

Note:

Before using the code bellow, I strongly recommend you to take a look on my YouTubeNails plugin, wich is a evolution of the function bellow and you can easily configure as a widget.

Why saving a video thumbnail for a video hosted on YouTube, when you can use the YouTube API plus WordPress Custom Fields to display the thumb, without working around crops, size and other stuff like this.

All you need:

  1. Create a custom field called(slug) “link_video”, which contains the standard “share” url from YouTube, something like this http://www.youtube.com/watch?v=kBN9_deleBg&#8221;;
  2. Use the code bellow, to retrieve data, inside a WordPress Loop;
<?
if (have_posts()) : 				
  global $post;
  $strquery = "category_name=videos";
  $myposts = get_posts($strquery);
  if($myposts):
	foreach($myposts as $post) :
             setup_postdata($post);
            // get meta from the custom field, using its slug
            $videolnk = get_post_meta($post->ID, 'link_video', true);
            // pure php string replace
           // add the standard YouTube API call for video thumbnails
           $videolnk = str_replace('http://www.youtube.com/watch?v=','http://img.youtube.com/vi/',$videolnk);
           $videolnk .= "/2.jpg";
        endforeach;
  endif;
endif;
?>

Then you can call the code bellow on your page(inside the loop):

<a href="<?=get_permalink()?>">
<img src="<?=$videolnk?>" width="214" height="129" >
</a>

Go to the source, if you need further info about YouTube API.

, ,

9 Comments

Remove first image from a wordpress post(the_content)

So tired… soul searching… I was looking for a solution to remove the first image from wordpress posts. I’ve found some, but they didn’t work. So, I decided to make my own code:

Just put it on your “functions.php” file.

function clear_first_image($content) {
	/*
		Warning:
		# I know light sabers are better...
			...but maybe I'm not good enough, so I use laser guns :)
		# It is not an elegant solution, but it works
		# Maybe someday I'll change it to use more regular expressions than logic
		# It's not recommended use this solution when you are
		processing large amount of data, like when you are on a loop
		# To call it on your code, under a loop(like "while" or "for"), use:
			echo clear_first_image(get_the_content())

		# Good luck! May the force be with you!
		alvaron8@gmail.com
	*/
	// checks if there is a first image
	$postst = strpos($content, '<img');
	if($postst !== false):
		// #letz check if the image has a link and remove it
		$output = preg_match_all('/<a.+href=[\'"]([^\'"]+)[\'"].*><img.+src/i', $content, $matches);
		$link_img = $matches [1] [0];
		if($link_img!=""):
			// we get the first link 'begin' tag
			$lnkini = strpos($content , '<a href', 0);
			// then we get the first link 'close' tag
			$lnkend = strpos($content, '<img', $lnkini);
			// letz get the hole first link tag now
			$replnk = substr($content, $lnkini, ($lnkend-$lnkini));
			// now we replace the first link tag in the content
			$tmpctd = preg_replace("'".$replnk."'",'',$content);
			// letz clear the link tag close
			$lnkcld = strpos($content , '</a>', 0);
			$content = substr($tmpctd, 0, $lnkcld).substr($tmpctd, $lnkcld, strlen($tmpctd));
		endif;
		// #removing the first image
			// we get the first image 'open' tag
			$posini = strpos($content , '<img', 0);
			// then we get the first image 'close' tag
			$posend = strpos($content, '>', $posini);
			// letz get the hole first image tag now
			$repimg = substr($content, $posini, ($posend-$posini)+1);
			// now we replace the first image tag in the content
			$postOutput = preg_replace("'".$repimg."'",'',$content);
	else:
		$postOutput=$content;
	endif;
	return $postOutput;
}

And call it on your code, like this:

echo clear_first_image(get_the_content());

,

14 Comments

%d bloggers like this: