Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$15
Modifying a custom page template for wordpress

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(); ?>

This question has been answered.

rhys100 | 12/28/11 at 11:02pm Edit

Previous versions of this question: 12/28/11 at 11:47pm

The experts have suggested, on average, a prize of $25 for this question.

(2) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

Last edited:
12/28/11
11:09pm
Arnav Joy says:
so you want to calculate the size of the image or attachment??
- 12/28/11 11:12pm
  
  rhys100 says:
  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)
- 12/28/11 11:44pm
  
  Arnav Joy says:
  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 ) ); ?>
- 12/28/11 11:50pm
  
  rhys100 says:
  i need the code to actually display the download links for the pics first i think?
- 12/28/11 11:56pm
  
  Arnav Joy says:
  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"/>
- 12/29/11 12:00am
  
  rhys100 says:
  see the page now.
  
  http://www.evansphotography.com.au/?gallery=portraits
- 12/29/11 12:04am
  
  rhys100 says:
  so can we convert that size to mb and have the different formats?
- 12/29/11 12:08am
  
  Arnav Joy says:
  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 ) )); ?>
- 12/29/11 12:11am
  
  Arnav Joy says:
  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
- 12/29/11 12:15am
  
  rhys100 says:
  ok mb conversion worked.
- 12/29/11 12:17am
  
  rhys100 says:
  ok i have modded it. How do I now include the other sizes at lower sizes?
  
  http://www.evansphotography.com.au/?gallery=portraits
- 12/29/11 12:19am
  
  Arnav Joy says:
  ok i have modded it. How do I now include the other sizes at lower sizes?
  
  I did not get you , please explain.
- 12/29/11 12:20am
  
  rhys100 says:
  please have a look at the page now and you might see what i am trying to do.
- 12/29/11 12:23am
  
  Arnav Joy says:
  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.
- 12/29/11 12:26am
  
  rhys100 says:
  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
- 12/29/11 12:32am
  
  Arnav Joy says:
  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
- 12/29/11 12:36am
  
  rhys100 says:
  done.
- 12/29/11 12:52am
  
  rhys100 says:
  theres no links tho to download?
- 12/29/11 12:58am
  
  Arnav Joy says:
  
  // 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>
- 12/29/11 1:11am
  
  rhys100 says:
  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?
- 12/29/11 1:15am
  
  rhys100 says:
  nevermind, i worked it out
- 12/29/11 1:25am
  
  rhys100 says:
  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
- 12/29/11 1:29am
  
  rhys100 says:
  also how do i increase line indent for the <li> would like them over to the right a bit more.
- 12/29/11 1:34am
  
  Arnav Joy says:
  write following in your style.css
  
  .one_half ul{
  margin-left:50px; //change it to desired value.
  }
- 12/29/11 1:35am
  
  Arnav Joy says:
  the css will be at
  
  http://www.evansphotography.com.au/wp-content/themes/Anan/css/screen.css
- 12/29/11 1:41am
  
  rhys100 says:
  can the crop be done? or to hard?
- 12/29/11 1:43am
  
  Arnav Joy says:
  i am looking into it but not sure can do it or not.
- 12/29/11 1:46am
  
  rhys100 says:
  ok, let me know :) - if not all good :)

Last edited:
12/28/11
11:42pm

Kannan C says:

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

Previous versions of this answer: 12/28/11 at 11:42pm

12/28/11 11:50pm

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

12/29/11 12:16am

Kannan C says:

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);

	}

12/29/11 12:29am

Kannan C says:

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>';

?>

12/29/11 12:30am

rhys100 says:
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

12/29/11 12:35am

Kannan C says:

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>';

?>

12/29/11 12:53am

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

This question has expired.

Arnav Joy had additional discourse to offer.

rhys100 voted on this question.

Current status of this question: Completed

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

Ask your WordPress questions! Pay money and get answers fast! (more info)

$15 Modifying a custom page template for wordpress

(2) Possible Answers Submitted...

$15
Modifying a custom page template for wordpress