Simple PHP fix for WP website

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
FlorianWardell
Forum Newbie
Posts: 1
Joined: Thu Jan 20, 2011 11:15 pm

Simple PHP fix for WP website

Post by FlorianWardell »

Hey guys,

I need a simple PHP fix for a wordpress website I bought on Themeforest.
It's this one http://www.gallyapp.com/tf_themes/kin_wp/
Basically, all images have the same aspect ratio. That aspect ratio is defined by two settings (height and width) in the admin panel.
Category.php takes those values and outputs the gallery.

Here it is:

Code: Select all

<?php
/**
 * The main template file.
 *
 * @package WordPress
 * @subpackage Kin
 */

/**
*	Get all photos
**/

$kin_gallery_sort = get_option('kin_gallery_sort'); 
if(empty($kin_gallery_sort))
{
	$kin_gallery_sort = 'ASC';
}

$cat = get_category(get_query_var('cat'),false);
$all_photo_arr = get_posts('numberposts=-1&order='.$kin_gallery_sort.'&orderby=date&category='.$cat->cat_ID);

get_header(); ?>

		<?php
			if(!empty($all_photo_arr))
			{
		?>
		
		<!-- Begin content -->
		<div id="content_wrapper">
			
			<?php
					$kin_gallery_width = get_option('kin_gallery_width');
					if(empty($kin_gallery_width))
					{
					    $kin_gallery_width = 424;
					}
					$kin_gallery_height = get_option('kin_gallery_height');
					if(empty($kin_gallery_height))
					{
					    $kin_gallery_height = 640;
					}
			?>
			
			<div class="inner" style="height:<?php echo $kin_gallery_height; ?>px">
			
				<input type="hidden" id="gallery_width" name="gallery_width" value="<?php echo $kin_gallery_width; ?>"/>
		
				<?php
					foreach($all_photo_arr as $key => $photo)
					{
						$item_type = get_post_meta($photo->ID, 'gallery_type', true); 

   		 				if(empty($item_type))
   		 				{
   		 					$item_type = 'Image';
   		 				}
					
						$image_url = get_post_meta($photo->ID, 'gallery_image_url', true);
						$small_image_url = get_post_meta($photo->ID, 'gallery_preview_image_url', true);
						
						//if not have preview image then create from timthumb
						if(empty($small_image_url))
						{
							$small_image_url = get_bloginfo( 'stylesheet_directory' ).'/timthumb.php?src='.$image_url.'&h='.$kin_gallery_height.'&w='.$kin_gallery_width.'&zc=1';
						}
				?>
		
				<div class="card" style="width:<?php echo intval($kin_gallery_width); ?>px;height:<?php echo intval($kin_gallery_height); ?>px;">
					<?php 
    					switch($item_type)
    					{
    						case 'Image':
    				?>		
							<a href="<?=$image_url?>" rel="slide">
								<img src="<?=$small_image_url?>" alt="" style="width:<?php echo intval($kin_gallery_width); ?>px;height:<?php echo intval($kin_gallery_height); ?>px;"/>
							</a>
					<?php
    					break;
    					//End image type
    					
    						case 'Youtube Video':
    				?>			
    						
    						<a href="#youtube_video<?=$key?>" class="gallery_youtube">
    							<img src="<?php echo $small_image_url; ?>" alt="" style="width:<?php echo intval($kin_gallery_width); ?>px;height:<?php echo intval($kin_gallery_height); ?>px;"/>
    						</a>
    						
    				<?php		
    						break;
    						//End youtube video type
    						
    						case 'Vimeo Video':
    				?>			
    						
    						<a href="#vimeo_video<?=$key?>" class="gallery_vimeo" >
    							<img src="<?php echo $small_image_url; ?>" alt="" style="width:<?php echo intval($kin_gallery_width); ?>px;height:<?php echo intval($kin_gallery_height); ?>px;"/>
    						</a>
    						
    				<?php		
    						break;
    						//End vimeo video type
    					}		
    				?>			
					
					<?php
						if(!empty($photo->post_title) OR !empty($photo->post_content))
						{
					?>
					
					<div class="title">
					
						<?php
							if(!empty($photo->post_title))
							{
						?>
								<h2><?=$photo->post_title?></h2>
						<?php
							}
						?>
						
						<?=$photo->post_content?>
					</div>
					
					<?php
						}
					?>
					
				</div>
				
				<?php
					}	
				?>
			
			</div>
			
			<div id="move_prev"></div>
			<div id="move_next"></div>
			
		</div>
		<!-- End content -->
		
		<br class="clear"/>
		
		<div id="content_slider_wrapper"><div id="content_slider"></div></div>
		
		<?php
			}
		?>
		
			<?php
					foreach($all_photo_arr as $key => $gallery_item)
					{
													
						$gallery_type = get_post_meta($gallery_item->ID, 'gallery_type', true);
						$youtube_id = get_post_meta($gallery_item->ID, 'gallery_youtube_id', true);
						$vimeo_id = get_post_meta($gallery_item->ID, 'gallery_vimeo_id', true);
						
						if($gallery_type == 'Youtube Video')
						{
				?>
				
							<!-- Begin youtube video content -->
							<div style="display:none;">
							    <div id="youtube_video<?=$key?>" style="width:640px;height:385px">
							        
							        <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/<?=$youtube_id?>" style="width:640px;height:385px">
			        		    		<param name="movie" value="http://www.youtube.com/v/<?=$youtube_id?>" />
			    			    	</object>
							        
							    </div>	
							</div>
							<!-- End youtube video content -->
				
				<?php
				
						}
						elseif($gallery_type == 'Vimeo Video')
						{
				?>
				
							<!-- Begin vimeo video content -->
							<div style="display:none;">
							    <div id="vimeo_video<?=$key?>" style="width:601px;height:338px">
							    
							        <object width="601" height="338" data="http://vimeo.com/moogaloop.swf?clip_id=<?=$vimeo_id?>&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff&fullscreen=1" type="application/x-shockwave-flash">
			  				    		<param name="allowfullscreen" value="true" />
			  				    		<param name="allowscriptaccess" value="always" />
			  				    		<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=<?=$vimeo_id?>&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff&fullscreen=1" />
							    	</object>
							        
							    </div>	
							</div>
							<!-- End vimeo video content -->
				
				
				<?php 
				
						}
					}	
				
				?>

<?php get_footer(); ?>
This is where it takes the aspect ratio:

Code: Select all

$kin_gallery_width = get_option('kin_gallery_width');
                                        if(empty($kin_gallery_width))
                                        {
                                            $kin_gallery_width = 424;
                                        }
                                        $kin_gallery_height = get_option('kin_gallery_height');
                                        if(empty($kin_gallery_height))
                                        {
                                            $kin_gallery_height = 640;
                                        }
And this is where the gallery is created:

Code: Select all

<div class="inner" style="height:<?php echo $kin_gallery_height; ?>px">
			
				<input type="hidden" id="gallery_width" name="gallery_width" value="<?php echo $kin_gallery_width; ?>"/>
		
				<?php
					foreach($all_photo_arr as $key => $photo)
					{
						$item_type = get_post_meta($photo->ID, 'gallery_type', true); 

   		 				if(empty($item_type))
   		 				{
   		 					$item_type = 'Image';
   		 				}
					
						$image_url = get_post_meta($photo->ID, 'gallery_image_url', true);
						$small_image_url = get_post_meta($photo->ID, 'gallery_preview_image_url', true);
						
						//if not have preview image then create from timthumb
						if(empty($small_image_url))
						{
							$small_image_url = get_bloginfo( 'stylesheet_directory' ).'/timthumb.php?src='.$image_url.'&h='.$kin_gallery_height.'&w='.$kin_gallery_width.'&zc=1';
						}
				?>
		

Basically, I would love if someone could tell me how to enable multiple aspect ratios, fixed by height.
One guy at Themeforest wrote:
Copy and Remove line 49
<input name="gallery_width" id="gallery_width" value="<?php echo $kin_gallery_width; ?>" type="hidden" />

Find the following code and remove it
//if not have preview image then create from timthumb if(empty($small_image_url)) { $small_image_url = get_bloginfo( 'stylesheet_directory' ).'/timthumb.php?src='.$image_url.'&h='.$kin_gallery_height.'&w='.$kin_gallery_width.'&zc=1'; }

Find the following code
$image_url = get_post_meta($photo->ID, 'gallery_image_url', true); $small_image_url = get_post_meta($photo->ID,'gallery_preview_image_url', true);

And add the follow code to it
list($imageWidth) = getimagesize($small_image_url); $kin_gallery_width = $imageWidth; ?> <input name="gallery_width" id="gallery_width" value="<?php echo $kin_gallery_width; ?>" type="hidden" />

And the whole section should look like this
$image_url = get_post_meta($photo->ID, 'gallery_image_url', true); $small_image_url = get_post_meta($photo->ID, 'gallery_preview_image_url', true); list($imageWidth) = getimagesize($small_image_url); $kin_gallery_width = $imageWidth; ?> <input name="gallery_width" id="gallery_width" value="<?php echo $kin_gallery_width; ?>" type="hidden" /> <div class="card" style="width:<?php echo intval($kin_gallery_width); ?>px;height:<?php echo intval($kin_gallery_height); ?>px;"> </div>
What it does is keep the height of the image at what you set on your admin panel, but it will create the page and each image depending on it’s width.
But his fix didn't help. Any suggestions?
User avatar
greyhoundcode
Forum Regular
Posts: 613
Joined: Mon Feb 11, 2008 4:22 am

Re: Simple PHP fix for WP website

Post by greyhoundcode »

FlorianWardell wrote:

Code: Select all

<?php
switch($item_type)
{
    case 'Image':
    ?>		
        <a href="<?=$image_url?>" rel="slide">
            <img src="<?=$small_image_url?>" alt="" style="width:<?php echo intval($kin_gallery_width); ?>px;height:<?php echo intval($kin_gallery_height); ?>px;"/>
        </a>
    <?php
    break;
Within the image element's style attribute both the height and the width are being specified. If you specify only the height, then the height will be fixed and the aspect ratio maintained.

Of course, if that doesn't work then that would suggest that the image has been resized/cropped somewhere along the line, in which case you will need to hunt for the relevant bit of code containing GD functions like imagecopyresampled() or similar.
Post Reply