Replies: 0
A few months ago I built a website for a client and one of the things they demanded was to replace the default html output of images inserted into editor. They specifically demanded from me to get rid of the default img tag with srcset that lists all image sizes and then lets the browser decide on the right image size served, and they wanted me to replace it with the responsive picture tag that would give them the full control of the picture sizes served based on both the bootstrap grid break-point and the pixel density of the device. It took me some time to come up with the solution but I eventually made it. However, when Gutenberg becomes part of the WordPress core, it will override my changes and force the default figure with img srcset html output, which is what the client specifically asked me to get rid of. Furthermore, they wanted me to make it so that they can control the html output based on the image size selected and the image size selection seems to be missing from the Gutenberg image block.
Is there a way to edit the default image block html output into something similar to what I made for the classic editor?
This is the function that I made in order to change the default html output of images inserted into editor:
`/* RESPONSIVE IMAGES
================================================== */
if ( !function_exists( ‘responsive_insert_image()’ ) ) {
function responsive_insert_image($html, $id, $caption, $title, $align, $url, $size) {
$alt_text = get_post_meta($id, ‘_wp_attachment_image_alt’, true);
if ( !$alt_text ) {
$alt_text = esc_html( get_the_title($post_id) );
}
$full = wp_get_attachment_image_src($id, ‘full’);
$xl = wp_get_attachment_image_src($id, ‘extra-large’);
$lg = wp_get_attachment_image_src($id, ‘large’);
$md = wp_get_attachment_image_src($id, ‘medium’);
$sm = wp_get_attachment_image_src($id, ‘small’);
$xs = wp_get_attachment_image_src($id, ‘thumbnail’);
$xl_2x = wp_get_attachment_image_src($id, ‘extra-large-2x’);
$lg_2x = wp_get_attachment_image_src($id, ‘large-2x’);
$md_2x = wp_get_attachment_image_src($id, ‘medium-2x’);
$sm_2x = wp_get_attachment_image_src($id, ‘small-2x’);
$xs_2x = wp_get_attachment_image_src($id, ‘thumbnail-2x’);
$attributes = (!empty($id) ? ‘ id=”attachment_’ . esc_attr($id) . ‘”‘ : ” );
$class = ‘ class=”‘ . ‘align’.esc_attr($align) . ‘”‘;
if($a_elem != “” || $caption != “”) {
$pic_atts = “”;
} else {
$pic_atts = $attributes . $class;
}
if($caption != “”) {
$link_atts = “img-link”;
} else {
$link_atts = $attributes . $class;
}
$linkptrn = “/<a[^>]*>/”;
$found = preg_match($linkptrn, $html, $a_elem);
if($found > 0) {
$a_elem = $a_elem[0];
if(strstr($a_elem, “class=\””) !== false){ // If link already has class defined inject it to attribute
$a_elem = str_replace(“class=\””, “target=\”_blank\” ” . $class . $link_atts . ” “, $a_elem);
} else { // If no class defined, just add class attribute
$a_elem = str_replace(“<a “, “<a ” . $class . $attributes . ” target=\”_blank\” “, $a_elem);
}
} else {
$a_elem = “”;
}
if ($size == ‘full’) {
if ($caption) {
$html = ‘<figure’ . $attributes .’>’;
} else {
$html = ”;
}
$html .= $a_elem;
$html .= ‘<picture’ . $pic_atts .’>’;
$html .= ‘<!–[if IE 9]><video style=”display: none;”><![endif]–>’;
$html .= ‘<source srcset=”‘ . $full[0] . ‘” media=”(min-width: 576px)”>’;
$html .= ‘<!–[if IE 9]></video><![endif]–>’;
$html .= ‘<img alt=”‘ . $alt_text . ‘” />’;
$html .= ‘</picture>’;
if($a_elem != “”) {
$html .= ‘</a>’;
}
if ($caption) {
$html .= ‘<figcaption class=”caption wp-caption-text”>’.$caption.'</figcaption>’;
$html .= ‘</figure>’;
}
} elseif ($size == ‘extra-large’) {
if ($caption) {
$html = ‘<figure’ . $attributes .’>’;
} else {
$html = ”;
}
$html .= $a_elem;
$html .= ‘<picture’ . $pic_atts .’>’;
$html .= ‘<!–[if IE 9]><video style=”display: none;”><![endif]–>’;
$html .= ‘<source srcset=”‘ . $xl[0] . ‘, ‘ . $xl_2x[0] . ‘ 2x” media=”(min-width: 1200px)”>’;
$html .= ‘<source srcset=”‘ . $lg[0] . ‘, ‘ . $lg_2x[0] . ‘ 2x” media=”(min-width: 992px)”>’;
$html .= ‘<source srcset=”‘ . $md[0] . ‘, ‘ . $md_2x[0] . ‘ 2x” media=”(min-width: 768px)”>’;
$html .= ‘<source srcset=”‘ . $sm[0] . ‘, ‘ . $sm_2x[0] . ‘ 2x” media=”(min-width: 576px)”>’;
$html .= ‘<!–[if IE 9]></video><![endif]–>’;
$html .= ‘<img alt=”‘ . $alt_text . ‘” />’;
$html .= ‘</picture>’;
if($a_elem != “”) {
$html .= ‘</a>’;
}
if ($caption) {
$html .= ‘<figcaption class=”caption wp-caption-text”>’.$caption.'</figcaption>’;
$html .= ‘</figure>’;
}
} elseif ($size == ‘large’) {
if ($caption) {
$html = ‘<figure’ . $attributes .’>’;
} else {
$html = ”;
}
$html .= $a_elem;
$html .= ‘<picture’ . $pic_atts .’>’;
$html .= ‘<!–[if IE 9]><video style=”display: none;”><![endif]–>’;
$html .= ‘<source srcset=”‘ . $lg[0] . ‘, ‘ . $lg_2x[0] . ‘ 2x” media=”(min-width: 992px)”>’;
$html .= ‘<source srcset=”‘ . $md[0] . ‘, ‘ . $md_2x[0] . ‘ 2x” media=”(min-width: 768px)”>’;
$html .= ‘<source srcset=”‘ . $sm[0] . ‘, ‘ . $sm_2x[0] . ‘ 2x” media=”(min-width: 576px)”>’;
$html .= ‘<!–[if IE 9]></video><![endif]–>’;
$html .= ‘<img alt=”‘ . $alt_text . ‘” />’;
$html .= ‘</picture>’;
if($a_elem != “”) {
$html .= ‘</a>’;
}
if ($caption) {
$html .= ‘<figcaption class=”caption wp-caption-text”>’.$caption.'</figcaption>’;
$html .= ‘</figure>’;
}
} elseif ($size == ‘medium’) {
if ($caption) {
$html = ‘<figure’ . $attributes .’>’;
} else {
$html = ”;
}
$html .= $a_elem;
$html .= ‘<picture’ . $pic_atts .’>’;
$html .= ‘<!–[if IE 9]><video style=”display: none;”><![endif]–>’;
$html .= ‘<source srcset=”‘ . $md[0] . ‘, ‘ . $md_2x[0] . ‘ 2x” media=”(min-width: 768px)”>’;
$html .= ‘<source srcset=”‘ . $sm[0] . ‘, ‘ . $sm_2x[0] . ‘ 2x” media=”(min-width: 576px)”>’;
$html .= ‘<!–[if IE 9]></video><![endif]–>’;
$html .= ‘<img alt=”‘ . $alt_text . ‘” />’;
$html .= ‘</picture>’;
if($a_elem != “”) {
$html .= ‘</a>’;
}
if ($caption) {
$html .= ‘<figcaption class=”caption wp-caption-text”>’.$caption.'</figcaption>’;
$html .= ‘</figure>’;
}
} elseif ($size == ‘small’) {
if ($caption) {
$html = ‘<figure’ . $attributes .’>’;
} else {
$html = ”;
}
$html .= $a_elem;
$html .= ‘<picture’ . $pic_atts .’>’;
$html .= ‘<!–[if IE 9]><video style=”display: none;”><![endif]–>’;
$html .= ‘<source srcset=”‘ . $sm[0] . ‘, ‘ . $sm_2x[0] . ‘ 2x” media=”(min-width: 576px)”>’;
$html .= ‘<!–[if IE 9]></video><![endif]–>’;
$html .= ‘<img alt=”‘ . $alt_text . ‘” />’;
$html .= ‘</picture>’;
if($a_elem != “”) {
$html .= ‘</a>’;
}
if ($caption) {
$html .= ‘<figcaption class=”caption wp-caption-text”>’.$caption.'</figcaption>’;
$html .= ‘</figure>’;
}
} elseif ($size == ‘thumbnail’) {
if ($caption) {
$html = ‘<figure’ . $attributes .’>’;
} else {
$html = ”;
}
$html .= $a_elem;
$html .= ‘<picture’ . $pic_atts .’>’;
$html .= ‘<!–[if IE 9]><video style=”display: none;”><![endif]–>’;
$html .= ‘<source srcset=”‘ . $sm[0] . ‘, ‘ . $sm_2x[0] . ‘ 2x” media=”(min-width: 576px)”>’;
$html .= ‘<!–[if IE 9]></video><![endif]–>’;
$html .= ‘<img alt=”‘ . $alt_text . ‘” />’;
$html .= ‘</picture>’;
if($a_elem != “”) {
$html .= ‘</a>’;
}
if ($caption) {
$html .= ‘<figcaption class=”caption wp-caption-text”>’.$caption.'</figcaption>’;
$html .= ‘</figure>’;
}
}
return $html;
}
add_filter( ‘image_send_to_editor’, ‘responsive_insert_image’, 10, 9 );
add_filter( ‘disable_captions’, create_function(‘$a’, ‘return true;’) );
}`
- This topic was modified 4 minutes ago by Goran Tesic.