Page 1 of 1

Simple PHP fix for WP website

Posted: Thu Jan 20, 2011 11:42 pm
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?

Re: Simple PHP fix for WP website

Posted: Fri Jan 21, 2011 4:44 pm
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.