justcoded / just-responsive-images Goto Github PK

@aprokopenko In the new version of JRI, you don't register the image size until page load, right?

How do you anticipate supporting Gutenberg with client-side rendering?

It would be great to have a filter to override the default HTML element to output the image, so that themes can choose whether to use picture tag or img tag.

In the latest release, I do not see IE 10/11 support. Can you please confirm if it has been removed?

The plugin fails on SVG images. They doesn't have width to compare is the image should be inserted or not.
We need separate methods for SVG images.

• SVG images are not supported by default media gallery uploader. However this can be changed with hooks. So we should add this support too.

Hello,

Is it possible to configure rwd_attachment_image or $my_image_sizes array to display original image or the biggest one in src attribute?
It's important for correct lazyload setup and SEO. Placeholders should be in srcset and original image in max resolution should be in src tag.
More info you can get from this video https://youtu.be/F6KGcb6trXc?t=2428

Hey! Thanks for building such a great tool to actually make Wordpress way more responsive. This is exactly what we need to be more HTML5 compliant.

In using your plugin I am a bit confused with regards to the variables bg, srcset, sizes. Mainly, because no matter what I define them as I don't actually see them being used. I've included a snipit of my code below so you can take a look and maybe point out my errors.

So in my example here with visual-desktop the bg and srcset never are applied into the actual output. Are they needed? Should I not be defining a media in the picture tag at the start as you have in your example?

` $output = array(
'visual' => array(
'desktop' => array(
array( 1280, 9999, false ),
'picture' => '',
'bg' => '@media (min-width:1025px)',
'srcset' => '{w}w', // descriptor
'sizes' => '(min-width: 1025px) {w}px', // condition
),
'laptop' => array(
array( 1024, 9999, false ), //height:290
'picture' => '',
'bg' => '@media (min-width:769px)',
'srcset' => '{w}w',
'sizes' => '(min-width:769px) {w}px',
),
'tablet' => array(
array( 768, 9999, false ),
'picture' => '',
'bg' => '@media (min-width: 321px)',
'srcset' => '{w}w',
'sizes' => '(min-width: 321px) {w}px',
),
'mobile' => array(
array( 320, 9999, false ),
'picture' => '',
'bg' => '@media (max-width:320px)',
'srcset' => '320w',
'sizes' => '(max-width:320px) {w}px',
),
'default' => array(
array(9999,9999),
'picture' => '',
),

    ),

);
`

Hi, thanks for the great plugin!

I was wondering if it would be possible to automatically add webP and AVIF srcsets to the generated image.
It would be awesome to only do that, if the webP and AVIF image exists.

Thanks!

Hi,

I noticed that when you just use an array
global $glob_sce_settings;
/* Image sizes */
$glob_sce_settings['rwd_image_sizes']['s-team 2x'] = array(
array(275, 275, array('center', 'center'))
);

or one image size
global $glob_sce_settings;
/* Image sizes */
$glob_sce_settings['rwd_image_sizes']['s-team 2x'] = array(
'xs' => array(
275, 275, array('center', 'center'),
'picture' => '<img src="{single-src}" srcset="{src}" alt="{alt}">', // mobile-first strategy picture img.
'bg' => '', // mobile-first strategy bg.
'bg_retina' => '@media {dpr}, {min_res}',
'srcset' => '{w}w',
'sizes' => '{w}px',
),
);

the generated img tag on the page does not have 'src' attribute, which is required by Internet Explorer to show an image on the page.
<picture class="attachment-s-team size-s-team wp-post-picture">
<img srcset="//localhost:3000/wp-content/uploads/2019/11/photo-1500648767791-00dcc994a43e-e1574685299994-275x275.jpeg, //localhost:3000/wp-content/uploads/2019/11/photo-1500648767791-00dcc994a43e-e1574685299994-550x550.jpeg 2x" alt="">
</picture>

It would be wonderful if it could be improved in the next version. Thanks

Add a hook which will enable retina support.

The hook should set array of multipliers (like 2x, 2.75x, 3x, etc.)

With retina multipliers we automatically register 2x, 3x sizes and should print them as srcset/picture sources. And background with special media query for retina

Super easy feature to cleanup all resized images.

It doesn't regenerate anything, because there are a lot of other plugins which do this good.

It becomes available only if theme sets some custom image size using rwd_image_sizes hook.

I really love this plugin, but I am realizing that there might be some shortcomings in terms of added flexibility for art direction (and potentially compression?)

Would it be possible in the initial array size definition to instead of providing the actual array of dimensions array( 400, 410, array('left','bottom')) I could actually add something like array('banner-small-mobile) which would essentially used my predefined mobile size?

This helps in case of art direction whereby designers or publishers want to control how the images work. We tend to use Crop Thumbnails a lot for this purpose.

Thoughts?

Hi, firstly apologies if this is the incorrect way to get in touch, I am very interested in your plugin and keen to get this level of functionality on my website.

I have tried other image plugins on my site before and they were all limited to post or page content only.

Will his plugin also work with images outside the normal post environment i.e. I have another plugin I use very often which has the option to add images directly but also by using WP Content as the source and calling wp_get_attachment_image_src($thumbnail, 'full') for the image.

Would I be able to alter this command so it would populate to use RWD image sizes?

I also find the instructions slightly difficult to follow, would be happy to document instructions as I implement this plug to my site if that would help with your wiki?

When the picture is loaded (into pages and posts) and pictures sizes is less than standard thumbnail sizes, it causes a mistake at preservation.

( ! ) Notice: Undefined index: thumbnail in wp-content/plugins/just-responsive-images/components/PostAttachment.php on line 158

The function rwd_attachment_background takes more than 2s to load for some images and it's faster for some images.

We're using a timing function to calculate the performance, the setup looks like this:

function rwd_attachment_background( $selector, $attachment = null, $size = 'thumbnail' ) {
	$jri_time_start = microtime(true);
	$rwd_image = new RwdImage( $attachment );
	$jri_time_end = microtime(true);

	$class_exec_time = $jri_time_end - $jri_time_start;

	//execution time of the script
	$jri_time_start_2 = microtime(true);
	echo $rwd_image->background( $selector, $size );
	$jri_time_end_2 = microtime(true);
	$bg_exec_time = $jri_time_end_2 - $jri_time_start_2;
	echo '<b>'.$selector.' Class Time:</b> '.$class_exec_time.' Secs, <b>Bg Time:</b> '.$bg_exec_time.' Secs';
}

The responses are over 2s for some images.
Following are some examples:

• .hero-banner-7 Class Time: 0.00051212310791016 Secs, Bg Time: 2.0852770805359 Secs
• .hero-banner-9 Class Time: 0.00041794776916504 Secs, Bg Time: 2.2101640701294 Secs
• .hero-banner-11 Class Time: 1.0967254638672E-5 Secs, Bg Time: 0.39931702613831 Secs
• .services-388 Class Time: 0.00033903121948242 Secs, Bg Time: 0.31205105781555 Secs

Can you help us figure out why some images are taking a long time to load while some load faster even when using the same image size?

To understand why some image is not available it's important to see what available sizes image has in the database.

So we need to show this info. I think the best way is to print it in media section, when you check image details.

Sometimes instead of using a different size of the same image across different devices, I want to use a different image. I thought there was a capability for this using this plugin but I see nothing on it now.

Currently I have this requirement because I want to use landscape oriented images on larger screens, but a different image with portrait dimensions on smaller devices.

The process to register all image sets/sizes is time consuming, because it validates user settings array, parse retina options etc.

Would be great to save configured array of sizes inside cache and then load objects from cache.
Unfortunately final sizes are class objects, so it's not trivial to cache them.

@aprokopenko We're using JRI in many production websites. If we're using too many custom sizes, we're ending up creating many different sizes for each image uploaded to the site. In some cases, we're ending up with more than 20 sizes for a single image. This is causing a negative impact on the file size of the website.

Are there any recommendations in terms of how we can avoid this? Or if it's possible to ensure a size only gets generated if an image is going to be used in a particular page/widget?