Usage
|
1 |
<?php echo am2_image( $args ); ?> |
Parameters
dummy_width
(number) (required) Dummy image width in pixels.
dummy_height
(number) (required) Dummy image height in pixels.
image_id
(number) (required) Real image ID.
image_size
(string) (optional) Real image WordPress size.
Default: medium
return
(string) (optional) Whether to return CSS class or HTML image tags.
Default: class
- class – CSS class “wider” or “taller”
- html – HTML image tags for dummy image and real image
How to
- Put PHP function
am2_image();in functions.php file - Put CSS code in your theme stylesheet style.css
- Put dummy-300×200.png image in your theme folder named images
PHP
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php function am2_image( $args ) { //Default values if(empty($args['dummy_width'])) return false; if(empty($args['dummy_height'])) return false; if(empty($args['image_size'])) $args['image_size'] = 'medium'; if(empty($args['return'])) $args['return'] = 'class'; $image_class = "wider"; $html = ""; $article_image = ""; $article_image = wp_get_attachment_image_src( $args['image_id'], $args['image_size'] ); if( empty( $article_image ) ) { $article_image[0] = get_stylesheet_directory_uri() . '/images/dummy-300x200.png'; $article_image[1] = 300; $article_image[2] = 200; } $dummy_ratio = $args['dummy_width'] / $args['dummy_height']; $article_image_ratio = $article_image[1] / $article_image[2]; //css class if( $article_image_ratio > $dummy_ratio ): $image_class = "taller"; else: $image_class = "wider"; endif; //Return if( $args['return'] == "class" ) { return $image_class; } elseif( $args['return'] == "html" ) { $html .= '<img src="' . get_stylesheet_directory_uri() . '/images/dummy-' . $args['dummy_width'] . 'x' . $args['dummy_height'] . '.png" class="dummy" alt="" /> <img src="' . $article_image[0] . '" class="real_img ' . $image_class . '" alt="" />'; return $html; } } ?> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/* Images ------------------------------------------------------------ */ img.dummy { display: block; height: auto; margin: 0; padding: 0; position: relative; width: 100%; } img.real_img { bottom: 0; display: block; height: auto; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 100%; } img.wider { height: auto !important; width: 100% !important; } img.taller { width: auto !important; height: 100% !important; } |
Image
https://drive.google.com/open?id=0BxXwIKGva886Umcxd0p2MFl1aDA&authuser=0
Examples
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php $args = array( 'dummy_width' => 1400, 'dummy_height' => 400, 'image_id' => get_post_thumbnail_id(), 'image_size' => 'large', 'return' => 'html' ); ?> <figure> <a href="<?php the_permalink(); ?>"> <?php echo am2_image( $args ); ?> </a> </figure> |
Returns
|
1 2 3 |
<img src="http://example.com/content/themes/stranica/images/dummy-1400x400.png" class="dummy" alt="" /> <img src="http://example.com/content/uploads/2015/05/slide.jpg" class="real_img wider" alt="" /> |
CSS class
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php $args = array( 'dummy_width' => 1400, 'dummy_height' => 400, 'image_id' => get_post_thumbnail_id(), 'image_size' => 'large', 'return' => 'css' ); ?> <figure> <a href="<?php the_permalink(); ?>"> <img src="http://example.com/content/themes/stranica/images/dummy-1400x400.png" class="dummy" alt="" /> <img src="http://example.com/content/uploads/2015/05/slide.jpg" class="real_img <?php echo am2_image( $args ); ?>" alt="" /> </a> </figure> |
Returns
|
1 |
wider |
test comment
test reply
this is dope!