Hello, is there any way to retrive and insert the alt text info dynamically from the image to the generated html code?
The alt tag is completely missing as general behaviour or if it is set in a php function as ‘$attributes’ is not dynamic but a fixed string, as in this example:
(php code)’alt’ => ‘alt_text_by_hand’ –> (html result) “…alt=”alt_text_by_hand” srcset=”https://…”
Thanks.

Hi,

I’m using Enfold (4.6.3.1) theme with Lazy Load by WP Rocket (v2.3.2) and Responsify WP (v1.9.11) in WordPress 5.2.4

I can see Responsify works in some places:

<div class='avia-image-container  av-styling-    avia-builder-el-17  el_before_av_textblock  avia-builder-el-first   avia-align-center '  itemprop="ImageObject" itemscope="itemscope" itemtype="https://schema.org/ImageObject"  ><div class='avia-image-container-inner'><div class='avia-image-overlay-wrap'><!--
<img srcset="https://www.example.com/wp-content/uploads/2019/11/example-300x213.jpg 300w, https://www.example.com/wp-content/uploads/2019/11/example.jpg 345w" sizes="(min-width: 300px) 345px, 300px" class="avia_image " alt="" title="" height="245" width="345" itemprop="thumbnailUrl"></div></div></div>

but not in other cases…
<div style=”display: flex; align-items: center; width: 95%; padding: 5px 0px; margin-left: 20px;”><div style=”flex-basis: auto; width: 50px; height:50px; padding-right:10px;padding-top:4px;”>

there are a couple of things to notice here

* the JPGs seem to work with Responsify srcset but the CDN url is being converted to the main site domain url and the lazyload is not applied

* the PNGs are lazyloaded with the CDN URL, but Responsify srcset is not applied

thanks for any advice
regards
J.

i dont know why, but ive spent few good days setting proper media queries for different image types and finally got it working how i want but i lost all settings few days after. AND i didnt lose settings of other plugins,only this one.

i didnt touch database. so this plugin doesnt keep settings in database? where it keeps them?

meh i dont know what to do, first of all implementing these media queries settings again is lot of work, and secondly, i dont know why they dissapeared so i cant prevent that in the futur

I responsified my blog logo using this code

add_theme_support( ‘custom-logo’ );
add_filter( ‘get_custom_logo’, ‘get_my_custom_logo’ );

function get_my_custom_logo( $blog_id = 0 ) {
$html = ”;
$custom_logo_id = get_theme_mod( ‘custom_logo’ );

// We have a logo. Logo is go.
if ( $custom_logo_id ) {
$custom_logo = wp_get_attachment_image_src( $custom_logo_id, ‘full’, false );
$custom_logo_url = $custom_logo[0];
//$html = sprintf( ‘‘, $custom_logo_url, get_bloginfo( ‘name’ ) );
$html = rwp_img( $custom_logo_id );
}

// If no logo is set but we’re in the Customizer, leave a placeholder (needed for the live preview).
elseif ( is_customize_preview() ) {
$html = sprintf( ‘‘ );
}

return $html;
}

But even after this chrome’s still complaining that the browser isn’t picking the right image: https://d.pr/i/FtnoTE

What am I doing wrong here?

Url in the main link.

I have allowed uploading svg files in the Media library, then in gutenberg I added an image block and selected the svg file; when trying to save the page there is a fatal PHP error:

[05-Apr-2019 15:39:36 UTC] PHP Fatal error:  Uncaught Error: Cannot use string offset as an array in /srv/bindings/24c42e041aa647e9e16d08b58ca2654/code/wp-content/plug
ins/responsify-wp/includes/create_responsive_image.php:66
Stack trace:
#0 /srv/bindings/24c42e041aa647e9e16d08b58ca2654/code/wp-content/plugins/responsify-wp/includes/create_responsive_image.php(30): Create_Responsive_image->get_images(Ar
ray)
#1 /srv/bindings/24c42e041aa647e9e16d08b58ca2654/code/wp-content/plugins/responsify-wp/includes/img.php(9): Create_Responsive_image->__construct('10725', Array)
#2 /srv/bindings/24c42e041aa647e9e16d08b58ca2654/code/wp-content/plugins/responsify-wp/includes/picture.php(34): Img->__construct('10725', Array)
#3 /srv/bindings/24c42e041aa647e9e16d08b58ca2654/code/wp-content/plugins/responsify-wp/includes/content_filter.php(119): Picture::create('img', '10725', Array)
#4 [internal function]: Content_Filter->{closure}(Array)
#5 /srv/bindings/24c42e041aa647e9e16d08b58ca2654/code/wp-content/plugins/responsify-wp/includes/content_filter.php(122): preg_rep in /srv/bindings/24c42e041aa647e9e16
d08b58ca2654/code/wp-content/plugins/responsify-wp/includes/create_responsive_image.php on line 66

Given your note of this being mostly unsupported, I realize this may not be fixed, but reporting it in hopes. ?? (workaround is to use a png rather than svg)

This is on latest wp 5.1.1 and responsify wp 1.9.11.

Thanks!

Hi there,

I’m getting the following in the error_log. Of course, the frontend is blank screen after activating your plugin. Dashboard is working fine.
I’m using WordPress 4.9.9
PHP 7.2

PHP Fatal error:  Uncaught Error: Call to undefined function mb_convert_encoding() in xxxxxx/plugins/responsify-wp/includes/content_filter.php:37
Stack trace:
#0 xxxxxx/plugins/responsify-wp/includes/content_filter.php(134): Content_Filter->get_attributes('<img width="300...')
#1 xxxxxx/plugins/responsify-wp/includes/content_filter.php(95): Content_Filter->get_img_attributes('<img width="300...')
#2 [internal function]: Content_Filter->{closure}(Array)
#3 xxxxxx/plugins/responsify-wp/includes/content_filter.php(122): preg_replace_callback('/<img[^>]*>/', Object(Closure), '\t\t<div data-ele...')
#4 xxxxxx/wp-includes/class-wp-hook.php(286): Content_Filter->filter_images('\t\t<div data-ele...')
#5 xxxxxx/wp-includes/plugin.php(203): WP_Hook->apply_filters('\t\t<div data-ele...', Array)
#6 xxxxxx/wp-includes in xxxxxx/plugins/responsify-wp/includes/content_filter.php on line 37

Is there something I can do to fix this? Or do you need to update the plugin?
Thanks

• This topic was modified 5 years, 8 months ago by EllsWeb. Reason: Correct error in paste

While Responsify WP appears to be working fine with WordPress 5.1, it does cause a warning in the plugin list, as it hasn’t got an update the last 8 months or so.

@stefanledin – are you still here to help us create faster websites?

Kind regards
Bjarne

I thought this plugin wasn’t working (turns out it was) and so was searching for another responsive image plugin and this plugin appeared on the 3rd page.

You might want to add “responsive images” to the plugin title as the current title “Responsify WP” makes it harder to find this plugin in the search results.

This is a really great plugin and the best of its kind. Extremely useful when your theme doesn’t yet support responsive images (e.g., Divi theme) and allows you to have fine control over images displayed.

Hello guys, and thank you for this plugin!
this plugin work in my post conten but does not work on the feautured image.
I give you an example of the html structure of the page:
<article>
<div class=”post-thumbnail header>

</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</article>

In the first block it does not work. In the second yes.

Hi,

I’m starting to use your awesome plugin with a Page Builder (Divi). As most often, Headers and sliders (at least) use the background-image url to set those pics. But it seem that RWP doesn’t support this by default.

Since those “modules” are especially interesting in term of UX but also resource intensive, what would you suggest to solve this. Is it possible to include this by default or optional in the plugin ? Or does it need custom code by theme as I read it elsewhere ?

For inspiration I’ve also found this php script made for the Divi theme :

https://gist.github.com/fldtrace/b75fe97c9a60270dd672566b796be936
from
https://www.fldtrace.com/better-faster-responsive-images-divi

Hoping you’ll be able to give us that last mile Boost for our responsive websites.

Hi,

First of all, I really happy and appreciate using this plugin on our website. It’s amazing and big thank you for providing this! Also I’m still seeing error message on my error_log and I want to be fixed as soon as possible.

[Mon Dec 24 15:29:07.313078 2018] [fcgid:warn] [pid 24462] [client 46.229.168.133:13196] mod_fcgid: stderr: PHP Warning: Illegal string offset ‘width’ in /home/xxxxxxxxx/public_html/wp-content/plugins/responsify-wp/includes/create_responsive_image.php on line 67

I checked the archive and saw this issue waiting for almost 6 months.

May I ask when you guys will be fixed?

Thank you again for this amazing plugin!

Best,
AOB

My debug.log is full of PHP Notices stating:

[25-Sep-2018 18:45:43 UTC] PHP Notice: Undefined index: media_query in \wp-content\plugins\responsify-wp\includes\style.php on line 32

[25-Sep-2018 18:45:43 UTC] PHP Notice: Undefined index: media_query in \wp-content\plugins\responsify-wp\includes\style.php on line 35

I believe you have the wrong examples set for rwp_style() function:
https://github.com/stefanledin/responsify-wp

In short: there is no ‘media_query’ but ‘media_queries’ in:

echo rwp_style( $dynamic_header_image_ID, array(
	'selector' => '#hero',
	'sizes' => array('medium', 'large', 'full'),
	'media_queries' => array(
		'large' => 'min-width: 500px',
		'full' => 'min-width: 1024px'
	)
) );

At the same time the code in style.php media_query() looks for:
if ( gettype($image[‘media_query’]) == ‘array’ ) {…

This results in a CSS code that looks like this:
#selector {background-image: url(“image-480×360.jpg”);}
@media screen and () {#selector{background-image: url(“image-768×480.jpg”);}}
…

Anyone using this successfully with the Divi Theme?
thanks

Hi,

Is your plugin compatible with CDN?

I activated your plugin and all my images went extremely blurry on desktop.

Thanks

I am using Astra theme, and really have a lot going on, on my site to tweak the speed score higher.

I also am using WP Retina 2x Pro and WPBakery Page Builder.

I’ve had issues with trying to get lazy loading working too, it seems to break the Revolution Slider also in the same way.

I really would like to get this to work (more). This seems to work well with elements created in WPBakery Page Builder which also tends to break.

Could those with more experience tell me if it is a better route that I should possibly tweak my minifying elsewhere to exclude this plugin somehow, or if I should just figure out how to exclude revolution slider from Responsify?

It would be a benefit to use this with larger images and serve scaled images to different sized screens from Revolution slider, but maybe there are too many potential conflicts with Revolution Slider and I should separate it?

If so, how should I do this? It could be a minifying issue, and I tried keeping CSS in order and some other options but it doesn’t seem to fix it.

There is an issue with the

// Fix E_WARNING: Illegal string offset 'width'
if(!is_array($image_meta_data['sizes']['full'])) {
 $image_meta_data['sizes']['full'] = array();

code at the website without the ‘full’ image-size.

Our WordPress website started to show a Notice – https://i.imgur.com/a7UcRAU.png – in the header of every page of the website:
Notice: Undefined index: full in /wp-content/plugins/responsify-wp/includes/create_responsive_image.php 67

• This topic was modified 6 years, 6 months ago by Ivan Privalov.
• This topic was modified 6 years, 6 months ago by Ivan Privalov.
• This topic was modified 6 years, 6 months ago by Ivan Privalov.
• This topic was modified 6 years, 6 months ago by Ivan Privalov.

Hello, I was wonder if there is a way to use webp images with this plugin. Right now, when I add a webp image the plugin throws an error.

Warning: Illegal string offset 'width' in /var/www/html/wp-content/plugins/responsify-wp/includes/create_responsive_image.php on line 65
Warning: Illegal string offset 'sizes' in /var/www/html/wp-content/plugins/responsify-wp/includes/create_responsive_image.php on line 65

I think it is related with the wp_get_attachment_metadata function, for webp images it returns an empty result.

Thank you!.

Dear Stefan,

Does Responsify WP comply to GDPR?

Does the plugin collect any user information or any other information from the website it is active on?

Many thanks,
Sandra

Hi Stefan,

Doesn’t work in my site with divi theme. There aren’t any srcset in the html. I set debug mode on in the plugin settings and there aren’t any html comments.

Thanks for your time.

Hello Stefan!

I’m currently trying to implement size-responsive images on my Avada theme via your plugin, but it appears that it won’t work. I searched the forum for your plugin and found this:

“I had contacted you a while ago, and I was really sad that my theme was making it impossible to use your awesome plugin because it did not use Img tags”

The thing is, I have a website with an enormous amount of content, and rebuilding the site with another theme will involve many hours to complete. Is it possible to customise your plugin and/or the Avada theme to make responsive images work?

I contacted Avada and got this response:

Actually this won’t work when you resize the browser window as the size is generated through a srcset and srcset is generated through PHP so it won’t change when you resize the window. Also the main SRC of the image will remain the same in all devices, its the srcset which will be different and served according to the mobile devices.

I don’t really understand the above response as I’m not an expert with code. I have a developer who may be able to assist, but I was hoping to ask you for advice first?

Any thoughts appreciated.

Many thanks,
Stephen

I understand that srcset tells the browser which version of the image to load based on the viewport. But do I have to generate those images first? Or does this Plugin + srcset do that for me? If not, do you have a recommended solution?

Thank you!

I have a staging and production environment, and the plugin has a hard time generating a srcset on some post images in my prod environment. There seem to be no interfering plugins, it just fails sometimes and just leaves the regular old markup there.

My host strips out comments, so I can’t get debug mode going. Do you have any idea why it sometimes skips images?

Hello guys, and thank you for this plugin! IT’s a great idea to actually make use of the different resized images WordPress generates by default ??

I use featured images in my posts, and I have checked the box “Use on Thumbnails” but there is no srcset attribute in the featured images, whether it’s the single post page or the main posts page.
Is this a bug or does WordPress works differently than I think?

• The page I am referring to has a featured image width of 772 and I have medium_large and large settings of 616 and 750 respectively, and the resized thumbnails do exist.
• I have set up breakpoints at 992px and 1200px for medium_large and large.
• The theme I use is based on bootstrap and sets up the_post_thumbnail(‘large’) for single posts.
• Thus, on a desktop, this featured image is set to large only and overflows the window even when I resize and refresh.

Whether I have to tweak the theme or it’s WordPress that doesn’t detect the viewport, I should at least see a srcset attribute in the image, am I wrong?

thanks for any explanation ??

Hi. I’m designing a web page and I can’t seem to make the logo change size at all based on the screen width. I am using Responsify and WP Retina Pro. No matter what I do, the logo on the page remains at 600px and I want it to shrink to reflect smaller mobile screen sizes. Can someone offer some advice on how this can be done, please?

Is this plugin necessary if using WP >= 4.4 ?

Given that WP since version 4.4 has (some measure of?) responsive image support I’m wondering what this plugin brings to the table not already provided.

I’m asking because I have a site that is using WP 4.8.3 and I can see “srcset” attributes in my some of my content at least in my blog posts.

But if I look in some output generated by my theme (H-Code) shortcodes e.g. a kind of stylised 4 column image gallery. Those images are missing srcset attributes.

I’m looking around for ways to make those images also be responsive. I could bug the theme developers but thought I’d check out any responsive image related plugins to see if they might do it.

Hi Stefan,
after the last update of RWP I noticed a lot of php errors being thrown:

Warning: realpath() expects parameter 1 to be a valid path, array given in /home/www/4str.in/beta/wp-includes/functions.php on line 1658
Warning: strlen() expects parameter 1 to be string, array given in /home/www/4str.in/beta/wp-includes/functions.php on line 1661
Warning: ltrim() expects parameter 1 to be string, array given in /home/www/4str.in/beta/wp-includes/functions.php on line 1688
Warning: realpath() expects parameter 1 to be a valid path, array given in /home/www/4str.in/beta/wp-includes/functions.php on line 1658
Warning: strlen() expects parameter 1 to be string, array given in /home/www/4str.in/beta/wp-includes/functions.php on line 1661
Warning: ltrim() expects parameter 1 to be string, array given in /home/www/4str.in/beta/wp-includes/functions.php on line 1688

These errors occur with content and thumbnails as well as when using rwp_style in my child function.php; at least rwp_style still generates the correct code after throwing the error messages.

Code in functions.php:

$style = rwp_style($responsive_image_id, array(
	'selector' => '#section',
	'sizes' => array('blog-thumbnail', 'bg720', 'bg1024', 'bg1280', 'bg1440', 'bg1680', 'full'),
	'media_queries' => array(
		'bg720'  => 'min-width:  720px',
		'bg1024' => 'min-width: 1024px',
		'bg1280' => 'min-width: 1280px',
		'bg1440' => 'min-width: 1440px',
		'bg1680' => 'min-width: 1680px',
		'full'   => 'min-width: 1920px',
	) ) );
$child_css .= substr( $style, 7, -8); //eliminate the style tags

I am a bit lost in finding the root cause now, for the time being the only fix seems to be switching off RWP completely – which is kind of contraproductive….

• This topic was modified 7 years ago by the.mnbvcx.

Hey Stefan,

In the plugin settings there is an option to specify custom media queries and you can set the full sized image to display at a given breakpoint. Is it possible to do this with custom code for manual insertion?

I would have thought I add “full” with my image size names, but i’m not sure what i put for the “sizes” attributes as normally you specify the image size for the breakpoint but different images will have different full sized dimensions.

Not sure if i’ve explain that well, but here’s what i want to do in the code:

<?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
echo rwp_img( $thumbnail_id, array(
‘sizes’ => array(‘FULLSIZE IMAGE‘, ‘featured-desktop’, ‘featured-tablet-p’, ‘featured-phone-l’, ‘featured-phone-p’ ),
‘attributes’ => array(
‘sizes’ => ‘(min-width: 1024px) THEN SHOW FULLSIZE IMG, (min-width: 768px) 1036px, (min-width: 568px) 900px, 507px’,
‘alt’ => get_post_meta( $thumbnail_id, ‘_wp_attachment_image_alt’, true)
)
));
?>

Hi,

I have an image that is currently being resized from 2048×1263 to 690×425 in CSS but the plugin doesn’t touch it, whereas it does the others. Can you help with how I can make it account for this image?

Many thanks,

Glyn

Hello Stefan! I had contacted you a while ago, and I was really sad that my theme was making it impossible to use your awesome plugin because it did not use Img tags

I have since switched to a theme that does use image tags, so I have reinstalled responsify and am looking forward to implementing it.

In regards to this, when using retina with Responsify you explain that @2x images must be added. I use a plugin called Retina 2x to generate @2x images automatically. Will this work with Responsify? And how do I know if the theme and these plugins are working in harmony?

Is there something to look for in the devtools or Responsify Debug mode that will confirm the realationship?

Thanks for your help!

After activated your plugin I got 310 queries count while only 50 before using the plugin on my intensive images site.
It seems like plugin counted every image as a database query.

I use cloudflare for static content CDN, w3totalcache for caching, and above the fold for pagespeed.

RWP plugin setting:
retina yes
picturefill no
exclude png

I also add attribute sizes filter based on 4 template page for displaying images size correctly.

Images resize works fine as expected and supported retina display, but it totally slow down the site because of the heavy queries.

Do you have solution for this problem?

Thanks in advance!