Browse: Home / Theme Handbook / Theme Functionality / Media / Images

Images

Topics

Images Images

Note: This section describes the handling of images in the Media Library. If you want to display the image file located within your theme directory, just specify the location with the img tag, and style it with CSS.

<img alt="<?php echo get_post_meta( $attachment_id, '_wp_attachment_image_alt', true )' ?>" src="<?php echo get_template_directory_uri() . '/images/logo.png'; ?>" />

Getting img code Getting img code

To display the image in the Media Library, use wp_get_attachment_image() function.

echo wp_get_attachment_image( $attachment-&amp;gt;ID, 'thumbnail' );



You will get the following HTML output with the selected thumbnail size


&amp;lt;img width="150" height="150" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample-150x150.jpg" class="attachment-thumbnail size-thumbnail" ... /&amp;gt;



You can specify other size such as ‘full’ for original image or ‘medium’ and ‘large’ for the sizes set at Settings > Media in the Administration Screen, or any pair of width and height as array. You’re also free to set custom size strings with add_image_size();


echo wp_get_attachment_image( $attachment-&amp;gt;ID, Array(640, 480) );



Top ↑
Getting URL of image Getting URL of image


If you want to get the URL of the image, use wp_get_attachment_image_src(). It returns an array (URL, width, height, is_intermediate), or false, if no image is available.


$image_attributes = wp_get_attachment_image_src( $attachment-&amp;gt;ID );
if ( $image_attributes ) : ?&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp; &amp;lt;img src="&amp;lt;?php echo $image_attributes[0]; ?&amp;gt;" width="&amp;lt;?php echo $image_attributes[1]; ?&amp;gt;" height="&amp;lt;?php echo $image_attributes[2]; ?&amp;gt;" /&amp;gt;
&amp;lt;?php endif; ?&amp;gt;



Top ↑
Alignments Alignments


When adding the image in your site, you can specify the image alignment as right, left, center or none. WordPress core automatically adds CSS classes to align the image:


    

  • alignright
    • 

  • alignleft
    • 

  • aligncenter
    • 

  • alignnone
    • 



This is the sample output when center align si chosen


&amp;lt;img class="aligncenter size-full wp-image-131" src= ... /&amp;gt;



In order to take advantage of these CSS classes for alignment and text wrapping, your theme must include the styles in a stylesheet such as the main stylesheet file. You can use the style.css bundled with official themes such as Twenty Seventeen for reference.


Top ↑
Caption Caption


If a Caption was specified to image in the Media Library, HTML img element was enclosed by the shortcode [

 and 

].


&amp;lt;div class="mceTemp"&amp;gt;&amp;lt;dl id="attachment_133" class="wp-caption aligncenter" style="width: 1210px"&amp;gt;&amp;lt;dt class="wp-caption-dt"&amp;gt;&amp;lt;img class="size-full wp-image-133" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample.jpg" alt="sun set" width="1200" height="400" /&amp;gt;&amp;lt;/dt&amp;gt;&amp;lt;dd class="wp-caption-dd"&amp;gt;Sun set over the sea&amp;lt;/dd&amp;gt;&amp;lt;/dl&amp;gt;&amp;lt;/div&amp;gt;



And, it will be rendered as in HTML as the figure tag:



&amp;lt;figure id="attachment_133" style="width: 1200px" class="wp-caption aligncenter"&amp;gt;
	&amp;lt;img class="size-full wp-image-133" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample.jpg" alt="sun set" width="1200" height="400" srcset= ... /&amp;gt;

&amp;lt;figcaption class="wp-caption-text"&amp;gt;Sun set over the sea&amp;lt;/figcaption&amp;gt;

&amp;lt;/figure&amp;gt;




Similar to alignments, your theme must include following styles.


    

  • wp-caption
    • 

  • wp-caption-text
    • 



References References