3v4l.org

run code in 200+ php & hhvm versions
Bugs & Features
<?php $content = ' <div id="content-15628" class="postcontent"> <h2>Responsive Images in WordPress 4.4</h2><p>WordPress 4.4 will add native responsive image support by including <code>srcset</code> and <code>sizes</code> attributes to the image markup it generates. For background on this feature, read the <a href="https://make.wordpress.org/core/2015/09/30/responsive-images-merge-proposal/">merge proposal</a>.</p> <h2>How it works</h2> <p>WordPress automatically creates several sizes of each image uploaded to the media library. By including the available sizes of an image into a <code>srcset</code> attribute, browsers can now choose to download the most appropriate size and ignore the others—potentially saving bandwidth and speeding up page load times in the process.</p> <p>To help browsers select the best image from the source set list, we also include a default <code>sizes</code> attribute that is equivalent to <code>(max-width: {{image-width}}px) 100vw, {{image-width}}px</code>. While this default will work out of the box for a majority of sites, themes should customize the default <code>sizes</code> attribute as needed using the <code>wp_calculate_image_sizes</code> filter.</p> <p>Note that for compatibility with existing markup, neither <code>srcset</code> nor <code>sizes</code> are added or modified if they already exist in content HTML.</p> <p>For a full overview of how <code>srcset</code> and <code>sizes</code> works, I suggest reading <em><a href="http://alistapart.com/article/responsive-images-in-practice">Responsive Images in Practice</a></em>, by Eric Portis over at A List Apart.</p> <h2>New functions and hooks</h2> <p>To implement this feature, we&#8217;ve added the following new functions to WordPress:</p> <ul> <li><code>wp_get_attachment_image_srcset()</code> – Retrieves the value for an image attachment&#8217;s <code>srcset</code> attribute.</li> <li><code>wp_calculate_image_srcset()</code> – A helper function to calculate the image sources to include in a <code>srcset</code> attribute.</li> <li><code>wp_get_attachment_image_sizes()</code> – Creates a <code>sizes</code> attribute value for an image.</li> <li><code>wp_calculate_image_sizes()</code> – A helper function to create the <code>sizes</code> attribute for an image.</li> <li><code>wp_make_content_images_responsive()</code> – Filters <code>img</code> elements in post content to add <code>srcset</code> and <code>sizes</code> attributes. For more information about the use of a display filter, read <a href="https://make.wordpress.org/core/2015/09/26/responsive-images-feature-plugin-update-2/">this post</a>.</li> <li><code>wp_image_add_srcset_and_sizes()</code> – Adds <code>srcset</code> and <code>sizes</code> attributes to an existing <code>img</code> element. Used by <code>wp_make_content_images_responsive()</code>.</li> </ul> <img src="http://blah.none/wp-content/2014/06/1.jpg" width="500" height="1000" alt="" class="wp-image-123" /> <p>As a safeguard against adding very large images to <code>srcset</code> attributes, we&#8217;ve included a <code>max_srcset_image_width</code> filter, which allows themes to set a maximum image width for images include in source set lists. The default value is 1600px.</p> <h2>A new default image size</h2> <p>A new default intermediate size, <code>medium_large</code>, has been added to better take advantage of responsive image support. The new size is 768px wide by default, with no height limit, and can be used like any other size available in WordPress. As it is a standard size, it will only be generated when new images are uploaded or sizes are regenerated with third party plugins.</p> <p>The <code>medium_large</code> size is not included in the UI when selecting an image to insert in posts, nor are we including UI to change the image size from the media settings page. However, developers can modify the width of this new size using the <code>update_option()</code> function, similar to any other default image size.</p> <h2>Customizing responsive image markup</h2> <img src="http://blah.none/wp-content/2014/06/1.jpg" width="300" height="400" alt="" class="wp-image-456" /> <p>To modify the default <code>srcset</code> and <code>sizes</code> attributes, you should use the <code>wp_calculate_image_srcset</code> and <code>wp_calculate_image_sizes</code> filters, respectively.</p> <p>Overriding the <code>srcset</code> or <code>sizes</code> attributes for images not embedded in post content (e.g. post thumbnails, galleries, etc.), can be accomplished using the <code>wp_get_attachment_image_attributes</code> filter, similar to how other image attributes are modified.</p> <p>Additionally, you can create your own custom markup patterns by using <code>wp_get_attachment_image_srcset()</code> directly in your templates. Here is an example of how you could use this function to build an <code>&lt;img&gt;</code> element with a custom <code>sizes</code> attribute:</p> <pre>&lt;?php $img_src = wp_get_attachment_image_url( $attachment_id, \'medium\' ); $img_srcset = wp_get_attachment_image_srcset( $attachment_id, \'medium\' ); ?&gt; &lt;img src="&lt;?php echo esc_url( $img_src ); ?&gt;" srcset="&lt;?php echo esc_attr( $img_srcset ); ?&gt;" sizes="(max-width: 50em) 87vw, 680px" alt="A rad wolf"&gt;</pre> <h2>Final notes</h2> <p>Users of the RICG Responsive Images Plugin should upgrade to <a href="https://wordpress.org/plugins/ricg-responsive-images/">version 3.0.0</a> now in order to be compatible with the functionality that included in WordPress 4.4.</p> '; $t = _microtime_float(); for ( $i = 0; $i < 1000; $i++ ) { $dom = new DOMDocument( '1.0' ); $dom->loadHTML( $content ); // \DOMNodesList $nodes = $dom->getElementsByTagName( 'img' ); if ( $nodes->length ) { $img = $nodes->item(0); $src = $img->getAttribute( 'src' ); $width = $img->getAttribute( 'width' ); $height = $img->getAttribute( 'height' ); $class = $img->getAttribute( 'class' ); } }
Output for 7.0.0 - 7.2.0
Fatal error: Uncaught Error: Call to undefined function _microtime_float() in /in/hB89d:46 Stack trace: #0 {main} thrown in /in/hB89d on line 46
Process exited with code 255.
Output for 5.3.19 - 5.6.28
Fatal error: Call to undefined function _microtime_float() in /in/hB89d on line 46
Process exited with code 255.