function afsp_ricg($var_name, $columns, $columnsOf)
{
$args = array('sizes' => array(array('size_value' => $columns / $columnsOf * 100 . vw, 'mq_value' => '768px', 'mq_name' => 'min-width'), array('size_value' => '100vw')));
$res_img = tevkori_get_srcset_string($var_name['id'], '2585x1600');
$res_size = tevkori_get_sizes_string($var_name['id'], '2585x1600', $args);
return $res_img . $res_size;
}
<img src="<?php
bloginfo('template_url');
?>
/img/north.svg" alt="quadra">
</div>
</div>
<div class="image">
<picture>
<img class="full_width_image"
src="<?php
echo $image['sizes']['larger'];
?>
"
<?php
echo tevkori_get_srcset_string($image['ID'], 'largest');
?>
alt="<?php
echo $image['alt'];
?>
" />
</picture>
</div>
</div>
<button class="next_btn" onclick="$.fancybox.next(true)"/><img src="<?php
bloginfo('template_url');
?>
/img/next.svg"></button>
</div>
</div>
</div><?php
/**
* Filter to add srcset attributes to post_thumbnails
*
* @see 'post_thumbnail_html'
* @return string HTML for image.
*/
function tevkori_filter_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr)
{
// if the HTML is empty, short circuit
if ('' === $html) {
return;
}
$srcset = tevkori_get_srcset_string($post_thumbnail_id, $size);
$html = preg_replace('/(src\\s*=\\s*"(.+?)")/', '$1' . ' ' . $srcset, $html);
return $html;
}
?>
<div class="section_bottom_margins"><?php
$images = get_field('cover-slider');
$imgCount = count($images);
if ($imgCount == 1) {
if ($images) {
foreach ($images as $image) {
?>
<picture>
<img class="full_width_image"
src="<?php
echo $image['sizes']['larger'];
?>
"
<?php
echo tevkori_get_srcset_string($image['ID'], 'huge');
?>
alt="<?php
echo $image['alt'];
?>
" />
</picture><?php
}
}
} else {
/* ?>
<div id="slider" class="flexslider">
<?php foreach( $images as $image ): ?>
<div class="slide">
<picture>
/**
* Filter for extending image tag to include srcset attribute.
*
* @see images_send_to_editor
* @return string HTML for image.
*/
function tevkori_extend_image_tag($html, $id, $caption, $title, $align, $url, $size, $alt)
{
add_filter('editor_max_image_size', 'tevkori_editor_image_size');
// Get the srcset attribute.
$srcset = tevkori_get_srcset_string($id, $size);
remove_filter('editor_max_image_size', 'tevkori_editor_image_size');
if ($srcset) {
// Build the data-sizes attribute if sizes were returned.
$sizes = tevkori_get_sizes($id, $size);
$sizes = $sizes ? 'data-sizes="' . $sizes . '"' : '';
$html = preg_replace('/(src\\s*=\\s*"(.+?)")/', '$1 ' . $sizes . ' ' . $srcset, $html);
}
return $html;
}
/**
* @expectedDeprecated tevkori_get_srcset_string
*/
function test_tevkori_get_srcset_string()
{
global $_wp_additional_image_sizes;
// Make an image.
$id = self::$large_id;
$srcset = tevkori_get_srcset_string($id, 'full');
$image_meta = wp_get_attachment_metadata($id);
$year_month = date('Y/m');
$intermediates = array('medium', 'medium_large', 'large', 'full');
// Add any soft crop intermediate sizes.
foreach ($_wp_additional_image_sizes as $name => $additional_size) {
if (!$_wp_additional_image_sizes[$name]['crop'] || 0 === $_wp_additional_image_sizes[$name]['height']) {
$intermediates[] = $name;
}
}
$expected = '';
foreach ($image_meta['sizes'] as $name => $size) {
// Whitelist the sizes that should be included so we pick up 'medium_large' in 4.4.
if (in_array($name, $intermediates)) {
$expected .= 'http://example.org/wp-content/uploads/' . ($year_month = date('Y/m') . '/' . $size['file'] . ' ' . $size['width'] . 'w, ');
}
}
// Add the full size width at the end.
$expected .= 'http://example.org/wp-content/uploads/' . $image_meta['file'] . ' ' . $image_meta['width'] . 'w';
$expected = sprintf('srcset="%s"', $expected);
$this->assertSame($expected, $srcset);
}
/**
* Filter to add srcset attributes to post_thumbnails
*
* @see 'post_thumbnail_html'
* @return string HTML for image.
*/
function tevkori_filter_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr)
{
// if the HTML is empty, short circuit
if ('' === $html) {
return;
}
$sizes = tevkori_get_sizes($post_thumbnail_id, $size);
// Build the data-sizes attribute if sizes were returned.
if ($sizes) {
$sizes = 'sizes="' . $sizes . '"';
}
$srcset = tevkori_get_srcset_string($post_thumbnail_id, $size);
$html = preg_replace('/(src\\s*=\\s*"(.+?)")/', '$1 ' . $sizes . ' ' . $srcset, $html);
return $html;
}
/**
* Private preg_replace callback used in tevkori_filter_content_images()
*
* @access private
* @since 2.5.0
*/
function _tevkori_filter_content_images_callback($image)
{
if (empty($image)) {
return false;
}
list($image_html, $atts) = $image;
// Bail early if a 'srcset' attribute already exists.
if (false !== strpos($atts, 'srcset=')) {
/*
* Backward compatibility.
*
* Prior to version 2.5 a 'srcset' and 'data-sizes' attribute
* were added to the image while inserting the image in the content.
* We replace the 'data-sizes' attribute by a 'sizes' attribute.
*/
$image_html = str_replace(' data-sizes="', ' sizes="', $image_html);
return $image_html;
}
// Grab ID and size info from core classes.
$id = preg_match('/wp-image-([0-9]+)/i', $atts, $class_id) ? (int) $class_id[1] : false;
$size = preg_match('/size-([^\\s|"]+)/i', $atts, $class_size) ? $class_size[1] : false;
$width = preg_match('/ width="([0-9]+)"/', $atts, $atts_width) ? (int) $atts_width[1] : false;
$height = preg_match('/ height="([0-9]+)"/', $atts, $atts_height) ? (int) $atts_height[1] : false;
if ($id && false === $size) {
$size = array($width, $height);
}
/*
* If attempts to parse the size value failed, attempt to use the image
* metadata to match the 'src' angainst the available sizes for an attachment.
*/
if (!$size && !empty($id) && ($meta = wp_get_attachment_metadata($id))) {
preg_match('/src="([^"]+)"/', $atts, $url);
// Sanity check the 'src' value and bail early it doesn't exist.
if (!$url[1]) {
return $image_html;
}
$image_filename = basename($url[1]);
/*
* First, see if the file is the full size image. If not, we loop through
* the intermediate sizes until we find a match.
*/
if ($image_filename === basename($meta['file'])) {
$size = 'full';
} else {
foreach ($meta['sizes'] as $image_size => $image_size_data) {
if ($image_filename === $image_size_data['file']) {
$size = $image_size;
break;
}
}
}
}
// If we have an ID and size, try for 'srcset' and 'sizes' and update the markup.
if ($id && $size && ($srcset = tevkori_get_srcset_string($id, $size))) {
// Pass height and width to `tevkori_get_sizes_string()`.
$args = array('width' => $width, 'height' => $height);
$sizes = tevkori_get_sizes_string($id, $size, $args);
// Strip trailing slashes and whitespaces from the `$atts` string.
$atts = trim(rtrim($atts, '/'));
$image_html = "<img " . $atts . " " . $srcset . " " . $sizes . " />";
}
return $image_html;
}
/**
* Filter for extending image tag to include srcset attribute.
*
* @see images_send_to_editor
* @return string HTML for image.
*/
function tevkori_extend_image_tag($html, $id, $caption, $title, $align, $url, $size, $alt)
{
add_filter('editor_max_image_size', 'tevkori_editor_image_size');
// Get the srcset attribute.
$srcset = tevkori_get_srcset_string($id, $size);
remove_filter('editor_max_image_size', 'tevkori_editor_image_size');
if ($srcset) {
// Build the data-sizes attribute if sizes were returned.
$sizes = tevkori_get_sizes($id, $size);
$sizes = $sizes ? 'data-sizes="' . $sizes . '"' : '';
/*** BEGIN ODDI Custom: we want to always use the 300 src ***/
$newImgSrc = "";
$tempSources = tevkori_get_srcset_array($id, 'medium');
foreach ($tempSources as $key => $tempSource) {
if (strpos($tempSource, '300w')) {
$newImgSrc = str_replace(' 300w', '', $tempSource);
}
}
if ($newImgSrc != "") {
$html = preg_replace('/(src\\s*=\\s*"(.+?)")/', 'src="' . $newImgSrc . '"', $html);
}
/*** END ODDI Custom ***/
$html = preg_replace('/(src\\s*=\\s*"(.+?)")/', '$1 ' . $sizes . ' ' . $srcset, $html);
}
return $html;
}
function test_tevkori_get_srcset_string()
{
// make an image
$id = $this->_test_img();
$sizes = tevkori_get_srcset_string($id, 'full-size');
$image = wp_get_attachment_metadata($id);
$year_month = date('Y/m');
$expected = 'srcset="';
$expected .= 'http://example.org/wp-content/uploads/' . ($year_month = date('Y/m') . '/' . $image['sizes']['medium']['file'] . ' ' . $image['sizes']['medium']['width'] . 'w, ');
$expected .= 'http://example.org/wp-content/uploads/' . ($year_month = date('Y/m') . '/' . $image['sizes']['large']['file'] . ' ' . $image['sizes']['large']['width'] . 'w, ');
$expected .= 'http://example.org/wp-content/uploads/' . $image['file'] . ' ' . $image['width'] . 'w"';
$this->assertSame($expected, $sizes);
}
/**
* @group 170
* @expectedDeprecated tevkori_get_srcset_string
* @expectedDeprecated tevkori_get_sizes_string
* @expectedDeprecated tevkori_filter_content_images
*/
function test_tevkori_filter_content_images()
{
// Make an image.
$id = self::$large_id;
$srcset = tevkori_get_srcset_string($id, 'medium');
$sizes = tevkori_get_sizes_string($id, 'medium');
// Function used to build HTML for the editor.
$img = get_image_tag($id, '', '', '', 'medium');
$img_no_size = str_replace('size-', '', $img);
$img_no_size_id = str_replace('wp-image-', 'id-', $img_no_size);
$img_with_sizes = str_replace('<img ', '<img sizes="99vw" ', $img);
// Manually add srcset and sizes to the markup from get_image_tag().
$respimg = preg_replace('|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img);
$respimg_no_size = preg_replace('|<img ([^>]+) />|', '<img $1 ' . $srcset . ' ' . $sizes . ' />', $img_no_size);
$respimg_with_sizes = preg_replace('|<img ([^>]+) />|', '<img $1 ' . $srcset . ' />', $img_with_sizes);
$content = '<p>Welcome to WordPress! This post contains important information. After you read it, you can make it private to hide it from visitors but still have the information handy for future reference.</p>
<p>First things first:</p>
%1$s
<ul>
<li><a href="http://wordpress.org" title="Subscribe to the WordPress mailing list for Release Notifications">Subscribe to the WordPress mailing list for release notifications</a></li>
</ul>
%2$s
<p>As a subscriber, you will receive an email every time an update is available (and only then). This will make it easier to keep your site up to date, and secure from evildoers.<br />
When a new version is released, <a href="http://wordpress.org" title="If you are already logged in, this will take you directly to the Dashboard">log in to the Dashboard</a> and follow the instructions.<br />
Upgrading is a couple of clicks!</p>
%3$s
<p>Then you can start enjoying the WordPress experience:</p>
<ul>
<li>Edit your personal information at <a href="http://wordpress.org" title="Edit settings like your password, your display name and your contact information">Users › Your Profile</a></li>
<li>Start publishing at <a href="http://wordpress.org" title="Create a new post">Posts › Add New</a> and at <a href="http://wordpress.org" title="Create a new page">Pages › Add New</a></li>
<li>Browse and install plugins at <a href="http://wordpress.org" title="Browse and install plugins at the official WordPress repository directly from your Dashboard">Plugins › Add New</a></li>
<li>Browse and install themes at <a href="http://wordpress.org" title="Browse and install themes at the official WordPress repository directly from your Dashboard">Appearance › Add New Themes</a></li>
<li>Modify and prettify your website’s links at <a href="http://wordpress.org" title="For example, select a link structure like: http://example.com/1999/12/post-name">Settings › Permalinks</a></li>
<li>Import content from another system or WordPress site at <a href="http://wordpress.org" title="WordPress comes with importers for the most common publishing systems">Tools › Import</a></li>
<li>Find answers to your questions at the <a href="http://wordpress.orgs" title="The official WordPress documentation, maintained by the WordPress community">WordPress Codex</a></li>
</ul>
%4$s';
$content_unfiltered = sprintf($content, $img, $img_no_size, $img_no_size_id, $img_with_sizes);
$content_filtered = sprintf($content, $respimg, $respimg_no_size, $img_no_size_id, $respimg_with_sizes);
$this->assertSame($content_filtered, tevkori_filter_content_images($content_unfiltered));
}
/**
* Private preg_replace callback used in tevkori_filter_content_images()
*
* @access private
* @since 2.5.0
*/
function _tevkori_filter_content_images_callback($image)
{
if (empty($image)) {
return false;
}
list($image_html, $atts) = $image;
$id = $size = false;
// Bail early if a 'srcset' attribute already exists.
if (false !== strpos($atts, 'srcset=')) {
/*
* Backward compatibility.
*
* Prior to version 2.5 a 'srcset' and 'data-sizes' attribute
* were added to the image while inserting the image in the content.
* We replace the 'data-sizes' attribute by a 'sizes' attribute.
*/
$image_html = str_replace(' data-sizes="', ' sizes="', $image_html);
return $image_html;
}
// Grab ID and size info from core classes.
if (preg_match('/wp-image-([0-9]+)/i', $atts, $class_id)) {
(int) ($id = $class_id[1]);
}
if (preg_match('/size-([^\\s|"]+)/i', $atts, $class_size)) {
$size = $class_size[1];
}
if ($id && false === $size) {
preg_match('/width="([0-9]+)"/', $atts, $width);
preg_match('/height="([0-9]+)"/', $atts, $height);
$size = array((int) $width[1], (int) $height[1]);
}
/*
* If attempts to get values for ID and size failed, use the
* src to query for matching values in '_wp_attachment_metadata'.
*/
if (false === $id || false === $size) {
preg_match('/src="([^"]+)"/', $atts, $url);
if (!$url[1]) {
return $image_html;
}
$image_filename = basename($url[1]);
/*
* If we already have an ID, we use it to get the attachment metadata
* using 'wp_get_attachment_metadata()'. Otherwise, we'll use the image
* 'src' url to query the postmeta table for both the attachement ID and
* metadata, which we'll use later to get the size.
*/
if (!empty($id)) {
$meta = wp_get_attachment_metadata($id);
} else {
global $wpdb;
$meta_object = $wpdb->get_row($wpdb->prepare("SELECT `post_id`, `meta_value` FROM {$wpdb->postmeta} WHERE `meta_key` = '_wp_attachment_metadata' AND `meta_value` LIKE %s", '%' . $image_filename . '%'));
// If the query is successful, we can determine the ID and size.
if (is_object($meta_object)) {
$id = $meta_object->post_id;
// Unserialize the meta_value returned in our query.
$meta = maybe_unserialize($meta_object->meta_value);
} else {
$meta = false;
}
}
/*
* Now that we have the attachment ID and metadata, we can retrieve the
* size by matching the original image's 'src' filename with the sizes
* included in the attachment metadata.
*/
if ($id && $meta) {
/*
* First, see if the file is the full size image. If not, we loop through
* the intermediate sizes until we find a match.
*/
if ($image_filename === basename($meta['file'])) {
$size = 'full';
} else {
foreach ($meta['sizes'] as $image_size => $image_size_data) {
if ($image_filename === $image_size_data['file']) {
$size = $image_size;
break;
}
}
}
}
}
// If we have an ID and size, try for 'srcset' and 'sizes' and update the markup.
if ($id && $size && ($srcset = tevkori_get_srcset_string($id, $size))) {
$sizes = tevkori_get_sizes_string($id, $size);
$image_html = "<img " . $atts . " " . $srcset . " " . $sizes . " />";
}
return $image_html;
}
