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(); ?>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;
}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:
But his fix didn't help. Any suggestions?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.