Ask your WordPress questions! Pay money and get answers fast!

Modifying a custom page template for wordpress WordPress

SOLVED

I Would like my visitors to be able to download the portfolio images at different sizes which are displayed under the image.

eg.

960 x 640 (iPhone)
1024 x 1024 (iPad)
1440 x 960
1920 x 1280
Full Size

Would be even better if next to the image it showed the size of it. (eg. 2.66mb)

The portfolio page is here: http://www.evansphotography.com.au/?gallery=portraits

Can email the template code for you to look at if need be.

CODE:

<?php
/**
* The main template file for display portfolio page.
*
* @package WordPress
*/

/**
* Get all photos
**/

$menu_sets_query = '';

$portfolio_items = -1;

$args = array(
'post_type' => 'attachment',
'numberposts' => $portfolio_items,
'post_status' => null,
'post_parent' => $post->ID,
'order' => 'ASC',
'orderby' => 'menu_order',
);
$all_photo_arr = get_posts( $args );

get_header(); ?>

<?php
$pp_portfolio_bg = get_option('pp_portfolio_bg');

if(empty($pp_portfolio_bg))
{
$pp_portfolio_bg = '/example/bg.jpg';
}
else
{
$pp_portfolio_bg = '/data/'.$pp_portfolio_bg;
}
?>
<script type="text/javascript">
jQuery.backstretch( "<?php echo get_stylesheet_directory_uri().$pp_portfolio_bg; ?>", {speed: 'slow'} );
</script>

<?php
if(!empty($all_photo_arr))
{
?>


<div id="page_content_wrapper">

<?php
$pp_gallery_width = 390;
$pp_gallery_height = 200;
?>

<div class="inner">

<div class="inner_wrapper">

<div class="sidebar_content full_width">
<h1 class="cufon"><?php echo $post->post_title; ?></h1>

<?php
if(!empty($post->post_content))
{
?>
<p><?php echo nl2br(stripslashes(html_entity_decode(do_shortcode($post->post_content)))); ?></p>
<br/><br/>
<?php
}
?>

<?php
foreach($all_photo_arr as $key => $photo)
{
$small_image_url = get_stylesheet_directory_uri().'/images/000_70.png';
$hyperlink_url = get_permalink($photo->ID);

if(!empty($photo->guid))
{
$image_url[0] = $photo->guid;

$small_image_url = get_stylesheet_directory_uri().'/timthumb.php?src='.$image_url[0].'&h='.$pp_gallery_height.'&w='.$pp_gallery_width.'&zc=1';
}

$last_class = '';
if(($key+1)%2==0)
{
$last_class = 'last';
}
?>

<div class="one_half <?php echo $last_class; ?>" style="margin-top:3%">
<?php
if(!empty($small_image_url))
{
$pp_enable_image_title = get_option('pp_enable_image_title');
?>
<a rel="gallery" href="<?php echo $image_url[0]; ?>" <?php if(!empty($pp_enable_image_title)) { ?> title="<?php echo $photo->post_title; ?>" <?php } ?>>
<img src="<?php echo $small_image_url; ?>" alt="" class="frame img_nofade"/>
</a>
<?php
}
?>

</div>

<?php
}
?>
</div>
</div>

</div>
<br class="clear"/>

</div>


<?php
}
?>

</div>

<?php get_footer(); ?>

2011-12-29 by rhys100

Answers (2)

2011-12-29

Arnav Joy answers:

so you want to calculate the size of the image or attachment??

rhys100 comments:

not sure I know what you mean. I want it just to show the size of the image next to each size.

eg. the iphone download oh the jpg is going to be alot smaller than the full sie of what i uploaded it as.

960 x 640 (iPhone) (0.3mb)
Full Size (3.5mb)

Arnav Joy comments:

try this

<?php
$image_attributes = wp_get_attachment_image_src( $attachment_id );
?>
<img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>">

size of the image is== <?php echo $image_attributes[1]; ?>*<?php echo $image_attributes[2]; ?>

<?php echo filesize( get_attached_file( $attachment_id ) ); ?>

rhys100 comments:

i need the code to actually display the download links for the pics first i think?

Arnav Joy comments:

try this code (full code)

<?php
/**
* The main template file for display portfolio page.
*
* @package WordPress
*/

/**
* Get all photos
**/

$menu_sets_query = '';

$portfolio_items = -1;

$args = array(
'post_type' => 'attachment',
'numberposts' => $portfolio_items,
'post_status' => null,
'post_parent' => $post->ID,
'order' => 'ASC',
'orderby' => 'menu_order',
);
$all_photo_arr = get_posts( $args );

get_header(); ?>

<?php
$pp_portfolio_bg = get_option('pp_portfolio_bg');

if(empty($pp_portfolio_bg))
{
$pp_portfolio_bg = '/example/bg.jpg';
}
else
{
$pp_portfolio_bg = '/data/'.$pp_portfolio_bg;
}
?>
<script type="text/javascript">
jQuery.backstretch( "<?php echo get_stylesheet_directory_uri().$pp_portfolio_bg; ?>", {speed: 'slow'} );
</script>

<?php
if(!empty($all_photo_arr))
{
?>


<div id="page_content_wrapper">

<?php
$pp_gallery_width = 390;
$pp_gallery_height = 200;
?>

<div class="inner">

<div class="inner_wrapper">

<div class="sidebar_content full_width">
<h1 class="cufon"><?php echo $post->post_title; ?></h1>

<?php
if(!empty($post->post_content))
{
?>
<p><?php echo nl2br(stripslashes(html_entity_decode(do_shortcode($post->post_content)))); ?></p>
<br/><br/>
<?php
}
?>

<?php
foreach($all_photo_arr as $key => $photo)
{
$small_image_url = get_stylesheet_directory_uri().'/images/000_70.png';
$hyperlink_url = get_permalink($photo->ID);

if(!empty($photo->guid))
{
$image_url[0] = $photo->guid;

$small_image_url = get_stylesheet_directory_uri().'/timthumb.php?src='.$image_url[0].'&h='.$pp_gallery_height.'&w='.$pp_gallery_width.'&zc=1';
}

$last_class = '';
if(($key+1)%2==0)
{
$last_class = 'last';
}
?>

<div class="one_half <?php echo $last_class; ?>" style="margin-top:3%">
<?php
if(!empty($small_image_url))
{
$pp_enable_image_title = get_option('pp_enable_image_title');
$image_attributes = wp_get_attachment_image_src( $photo->ID );

?>
<a rel="gallery" href="<?php echo $image_url[0]; ?>" <?php if(!empty($pp_enable_image_title)) { ?> title="<?php echo $photo->post_title; ?>" <?php } ?>>
<img src="<?php echo $small_image_url; ?>" alt="" class="frame img_nofade"/>
<a href="<?php echo $photo->guid; ?>">Download Image</a>
</a>
<ul>
<li><?php echo $image_attributes[1]; ?>*<?php echo $image_attributes[2]; ?></li>
<li><?php echo filesize( get_attached_file( $photo->ID ) ); ?></li>
</ul>
<?php
}
?>

</div>

<?php
}
?>
</div>
</div>

</div>
<br class="clear"/>

</div>


<?php
}
?>

</div>

<?php get_footer(); ?>

or for download only write

<a href="<?php echo $photo->guid ?>">Download Image</a>

below the line

<img src="<?php echo $small_image_url; ?>" alt="" class="frame img_nofade"/>

rhys100 comments:

see the page now.

http://www.evansphotography.com.au/?gallery=portraits

rhys100 comments:

so can we convert that size to mb and have the different formats?

Arnav Joy comments:

write this in your functions.php

function ByteSize($bytes)
{
$size = $bytes / 1024;
if($size < 1024)
{
$size = number_format($size, 2);
$size .= ' KB';
}else {
if($size / 1024 < 1024) {
$size = number_format($size / 1024, 2);
$size .= ' MB';
} else if($size / 1024 / 1024 < 1024) {
$size = number_format($size / 1024 / 1024, 2);
$size .= ' GB';
}
}
return $size;
}

and then use it as

<?php echo ByteSize(filesize( get_attached_file( $photo->ID ) )); ?>

Arnav Joy comments:

i think 150*150 is the size of the thubnails in your wp settings thats why it is returning 150*150 , you have modified all your images to 390*200

rhys100 comments:

ok mb conversion worked.

rhys100 comments:

ok i have modded it. How do I now include the other sizes at lower sizes?

http://www.evansphotography.com.au/?gallery=portraits

Arnav Joy comments:

ok i have modded it. How do I now include the other sizes at lower sizes?

I did not get you , please explain.

rhys100 comments:

please have a look at the page now and you might see what i am trying to do.

Arnav Joy comments:

find this line

$image_attributes = wp_get_attachment_image_src( $photo->ID );

replace it with the

$image_attributes = wp_get_attachment_image_src( $photo->ID , 'full' );

it will return you height and width of the full size image. try it.

rhys100 comments:

all that did was change the 150x150 dimentions text to the full size?

Do you understand that i also want those other sizes

960 x 640 (iPhone)
1024 x 1024 (iPad)
1440 x 960
1920 x 1280

to be downloadable at those sizes if you click them. Does that make sense? I think Kannan understands, but i tried his code and it didnt work

Arnav Joy comments:

write following in your functions.php

if ( function_exists( 'add_image_size' ) ) {

add_image_size( 'iphoneIMG', 960, 640);

add_image_size( 'ipadIMG', 1024, 1024);

add_image_size( 'mediumIMG', 1440, 960);

add_image_size( 'largeIMG', 1920, 1280);

}

now find the ul li which i have created for you

<ul>
<li><?php echo $image_attributes[1]; ?>*<?php echo $image_attributes[2]; ?></li>
<li><?php echo filesize( get_attached_file( $photo->ID ) ); ?></li>
</ul>

// for iphone
<?php $image_attributes = wp_get_attachment_image_src( $photo->ID , 'iphoneIMG'); ?>

<li><?php echo $image_attributes[1]; ?>*<?php echo $image_attributes[2]; ?></li>

// for ipad

<?php $image_attributes = wp_get_attachment_image_src( $photo->ID , 'ipadIMG'); ?>

<li><?php echo $image_attributes[1]; ?>*<?php echo $image_attributes[2]; ?></li>

// for medium

<?php $image_attributes = wp_get_attachment_image_src( $photo->ID , 'mediumIMG'); ?>

<li><?php echo $image_attributes[1]; ?>*<?php echo $image_attributes[2]; ?></li>

// for large

<?php $image_attributes = wp_get_attachment_image_src( $photo->ID , 'largeIMG'); ?>

<li><?php echo $image_attributes[1]; ?>*<?php echo $image_attributes[2]; ?></li>

try this

rhys100 comments:

done.

rhys100 comments:

theres no links tho to download?

Arnav Joy comments:

// for iphone
<?php $image_attributes = wp_get_attachment_image_src( $photo->ID , 'iphoneIMG'); ?>
<?php $image_download_url = get_stylesheet_directory_uri().'/timthumb.php?src='.$image_attributes[0].'&h='.$image_attributes[2].'&w='.$image_attributes[1].'&zc=1'; ?>
<li><a href="<?php echo $image_download_url; ?>"><?php echo $image_attributes[1]; ?>*<?php echo $image_attributes[2]; ?></a></li>

// for ipad

<?php $image_attributes = wp_get_attachment_image_src( $photo->ID , 'ipadIMG'); ?>

<?php $image_download_url = get_stylesheet_directory_uri().'/timthumb.php?src='.$image_attributes[0].'&h='.$image_attributes[2].'&w='.$image_attributes[1].'&zc=1'; ?>
<li><a href="<?php echo $image_download_url; ?>"><?php echo $image_attributes[1]; ?>*<?php echo $image_attributes[2]; ?></a></li>

// for medium

<?php $image_attributes = wp_get_attachment_image_src( $photo->ID , 'mediumIMG'); ?>

<?php $image_download_url = get_stylesheet_directory_uri().'/timthumb.php?src='.$image_attributes[0].'&h='.$image_attributes[2].'&w='.$image_attributes[1].'&zc=1'; ?>
<li><a href="<?php echo $image_download_url; ?>"><?php echo $image_attributes[1]; ?>*<?php echo $image_attributes[2]; ?></a></li>

// for large

<?php $image_attributes = wp_get_attachment_image_src( $photo->ID , 'largeIMG'); ?>

<?php $image_download_url = get_stylesheet_directory_uri().'/timthumb.php?src='.$image_attributes[0].'&h='.$image_attributes[2].'&w='.$image_attributes[1].'&zc=1'; ?>
<li><a href="<?php echo $image_download_url; ?>"><?php echo $image_attributes[1]; ?>*<?php echo $image_attributes[2]; ?></a></li>

rhys100 comments:

that works, but id rather the text say it like this and you can click the whole thing.

960 x 640 (iPhone)
1024 x 1024 (iPad)
1440 x 960
1920 x 1280

Anyway to modify it that way?

rhys100 comments:

nevermind, i worked it out

rhys100 comments:

one last thing. The as my images are mainly landscape, is there anyway to crop it 640x960 for iphone 4? 960x640 is only going to look good on iphone if they have their phone rotated all the time haha

rhys100 comments:

also how do i increase line indent for the <li> would like them over to the right a bit more.

Arnav Joy comments:

write following in your style.css

.one_half ul{
margin-left:50px; //change it to desired value.
}

Arnav Joy comments:

the css will be at

http://www.evansphotography.com.au/wp-content/themes/Anan/css/screen.css

rhys100 comments:

can the crop be done? or to hard?

Arnav Joy comments:

i am looking into it but not sure can do it or not.

rhys100 comments:

ok, let me know :) - if not all good :)

2011-12-29

Kannan C answers:

Are you attaching the thumbnails using "Set featured image" link? if so you can use this inside the loop of your gallery page
$iphone_img_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'iphone'); echo '<a href="'.$iphone_img_url[0].'"'>960 x 640</a>'; $ipad_img_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'ipad'); echo '<a href="'.$ipad_img_url[0].'"'>1024 x 1024</a>';

And in your functions.php, paste this
if ( function_exists( 'add_image_size' ) ) { add_image_size( 'iphone', 960, 640); add_image_size( 'ipad', 1024, 1024); }
you can add more image sizes that you want

rhys100 comments:

nope. See code that i put in the first page. ta

Kannan C comments:

Still you can use the same code by just the changing the id.
$iphone_img_url = wp_get_attachment_image_src( $photo->ID, 'iphone'); echo '<a href="'.$iphone_img_url[0].'"'>960 x 640</a>'; $ipad_img_url = wp_get_attachment_image_src( $photo->ID, 'ipad'); echo '<a href="'.$ipad_img_url[0].'"'>1024 x 1024</a>';
The above lines should come after the line <img src="<?php echo $small_image_url; ?>" alt="" class="frame img_nofade"/>

And in your functions.php, this will create the different sizes of images you need.
Note: this will not create different sized images for images already uploaded. You need to re-upload the images.
if ( function_exists( 'add_image_size' ) ) { add_image_size( 'iphone', 960, 640); add_image_size( 'ipad', 1024, 1024); }

Kannan C comments:

You should wrap the codes inside php tags
<?php $iphone_img_url = wp_get_attachment_image_src( $photo->ID, 'iphone'); echo '<a href="'.$iphone_img_url[0].'"'>960 x 640</a>'; $ipad_img_url = wp_get_attachment_image_src( $photo->ID, 'ipad'); echo '<a href="'.$ipad_img_url[0].'"'>1024 x 1024</a>'; ?>

rhys100 comments:

it gives me a error:

Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in /home2/designra/public_html/wp-content/themes/Anan/templates/template-portfolio-2.php on line 110

Kannan C comments:

oops, sorry. try this
<?php $iphone_img_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'iphone'); echo '<a href="'.$iphone_img_url[0].'">960 x 640</a>'; $ipad_img_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'ipad'); echo '<a href="'.$ipad_img_url[0].'">1024 x 1024</a>'; ?>

rhys100 comments:

it kinda works. but the links dont go anywhere. refresh the page.