Array variables for defining image sizes unclear

[shaneonabike]

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' => '',
),

    ),

);
`

[aprokopenko]

Hi Shane,

Thanks for interesting in our plugin.

The configuration array should be filled based on final usage. For example if your image is printed as background - you don't need any keys except "bg". If you use image as "picture" tag - than you just need to set "picture". If you use same image size for background, picture and it can be inserted inside WordPress editor (for example - default image size "large) - then you should specify all 4 options.

Please don't forget that to print image inside the template with this configuration array you should use rwd_* functions, instead of usual the_post_thumbnail() function.

Hope I answered your question. Otherwise feel free to ask more detailed questions (in this case please specify the code you use to print image and few screenshots, how it should looks like)

[shaneonabike]

Okay that explains it a bit more. I was going to suggest that you allow me to have checkin status so that I can change your documentation (or open a wiki page) cause it's not clear.. at least for me that is. I am using the proper calls as you suggested in my template later.

It's weird though because no matter what I do with that setting it never seems to pick the right picture in mobile mode on Chrome. I don't have this issue on other sites I have built with picture and polyfill. Can you see any issues with my configuration. I should have this up on a live site today/tomorrow if you prefer to look at it then

[shaneonabike]

As an example, the mobile image (default img src) is never used on mobile devices. It always displays the largest image size?

[shaneonabike]

Never mind I got it! It was the first selector being set to max-width not min-width!!

Anyway, if you would like me to spruce up your documentation I would be happy to help with that since I think after having used your code there was some really confusing elements.

[aprokopenko]

I would be glad if you can suggest documentation updates. We use this plugin internally in our company and I'm the main developer of it. So for me some things looks pretty easy or self-explanatory.

I opened access to Wiki.

Regarding main readme file - I believe when you open it there are buttons to edit. And after edit I will receive a pull request for updates. (I did this thing long time ago on other repos, maybe it still works)

[ghost]

Since the first time I read about this repo I am trying to use and implement it into a theme and because I consider myself still a beginner I would very very much appreciate a documentation that leads one through how to use this step by step, possibly even by half steps. I have time and would like to help out, perhaps we can make an example page or use Atom Teletype to get a basic working example going. I am also happy to help out fellow people interested with this. I think WP is still missing a lot of work regarding responsive images and this might just be the best thing to use responsive images the right way.

[aprokopenko]

If you can help us with writing docs (because I don't have time at all :( ), than I can make a fast screenshare in Skype about how to use it.

[ghost]

I am happy to give it my best shot to write docs for this repo. However I don't really use Skype but happy to use TeamViewer if that is helpful. If you absolutely must use Skype I think I will make an exception in order to learn from you and pass on knowledge to other beginners. Mind you if you make it too fast I might not understand, however I understand you are very busy. We are about in the same time zone so I can accommodate for a time that suits you best, sure doing things after work is not nice, however the benefit might be that more people learn to use this repo and spread the good news once I have made the docs and possibly an example page/easy to follow tutorial. I have finished one project for a good client that scores 100 on GPSI and have written the theme myself, so I do know my way round WP a bit and think I am not a total amateur. We will see. If I write an email to [email protected] and mention this Issue alongside either my TeamViewer (or if must be Skype) ID would that suffice for you?

[aprokopenko]

btw, If you're interested in faster way to setup your project you can check out our wordpress starter: https://github.com/justcoded/wordpress-starter.
It has lack of documentation,we will update docs in a few weeks

[ghost]

Yes, TeamViewer has voice chat, normal chat for typing and video chat, also like this you can either see my screen or me yours, that is what I understood when you meant "screenshare", meaning you either show your screen and the process, I follow along here, make notes and write the docs or vice versa you work directly on my desktop and I make notes and I write the abbreviated docs as we proceed and then later the detailed docs/example page/tut, as you like. If this is something that could work for you and this process let me know. I am not sure if I will be able to follow along by just listening to you, we will see. Long story short, be sure to hear from me via email tomorrow or Wednesday and I am sure we will find a way to communicate. This Friday, 1st of Dec I am available the whole day and am super happy to work on this with you then.

Also thank you for the WP starter set. I will check it out. For now my process is to install WP via wp-cli and then just run "npm install --verbose" in the theme folder with all the stuff I need being in "package.json". Like I said I am just starting and am super to learn about other, possibly more advanced and streamlined methods. Thank you for your time and willingness to do this together, I sincerely hope I can be of help to you.

[ghost]

@shaneonabike What is your email? I tried to send you a message over the website https://beesonabike.com/contact/ but the loading indicator is just spinning once I hot "Send" and I think the message is not being sent.

[shaneonabike]

We can collaborate over this ticket or alternatively when you checkin things you can easily write comments and if I change anything I would do the same. This way we don't loose the history of discussions... Make sense?

[ghost]

@shaneonabike OK, sure, let's do it like that. Off topic, does your contact form work at all or is there a limit to the amount of characters or perhaps it is not allowed to include links? Though you can escape the input for sure. Anyhow, yes, please let's collaborate on this, thank you.

[anobjectn]

I will re-iterate that the docs need some updating. Actually I have never seen a theme with better documentation (so sincere kudos!) but (and I'm just starting to use this today) the plugin converted to a mobile first strategy from what I see and I believe this impacts the config directly but all the documentation on config looks to be from before this change. This is the most "urgent" need.

Additionally, I think it would be more clear if there were some complete simple examples. I get that the docs start with showing you just a little - like the outer array , then then inner arrays etc. Thats fine. There are good docs showing you how to output in a few different styles, but these should be extended to include configs! I can see how the plugin is meant to be flexible, but this would help folks get up to speed much faster.

I would recommend using the now preferred bracket notation for arrays.

Lastly, off topic but the theme demo is broken

[ksamojlenko]

Lastly, off topic but the theme demo is broken

Hello @anobjectn what do you mean with this

[anobjectn]

Sorry, the "demo content" comment is pertinent to a different project that I looked at the same day. Some complete examples with matching config and outputs is my suggestion.

[ksamojlenko]

@anobjectn Thank you for comment, we work on new documentation

[ksamojlenko]

Hi @anobjectn ,
Would be great if you can share your thoughts with us about unclear or confusing parts in plugin readme. In case you have time for that please share your contacts with us somehow and we will send you an email (or just write to us to “hello at justcoded.com”). Furthermore, we would be glad to share a draft of new documentation to know your meaning about it.

[shaneonabike]

Could you post it somewhere? I have a few examples that I think are useful and for sure I would be happy to contribute.

[jc-vgermanov]

Hello, @shaneonabike,
you can find our new docs in the wiki of this repo, we update it yesterday. All your examples you can send to us by email (hello at justcoded.com) or just post here in the comments. Thank you for your help and attention.

Best regards, Vitaly.

[anobjectn]

I still think your sample code should be real examples not contrived combinations of separate usages. I mean these specific settings, with this specific output directive creates this specific markup. Matching sets. There are numerous other things that seem unclear. Was there a change to be mobile first? I sent a bunch of code examples where I was outputing an inline picture but the generated image & markup wasnt useable:

<picture class="attachment-half-width-fit size-half-width-fit wp-post-picture">
<img srcset="http://mysite.com/wp-content/uploads/2020/04/image-fpo_rev-1x1.jpg" alt="fpo">
</picture>

What someone could have told me was that the base dimensions are not enough, one must add at least one more array element (named key).

Where I was using this

  'half-width-fit' => [
    [
      [ 960, 576, false],
      'picture' => '<img src="{single-src}" srcset="{src}" alt="{alt}">',
    ]
  ],

I needed to add a keyed array like this:

    'half-width-fit' => [
      [
        [ 960, 576, true],
        'picture' => '<img src="{single-src}" srcset="{src}" alt="{alt}">',
      ],
      'mobile' => [
        [480, 288, true]
      ],
    ],

And if I add a picture key like the default to the 'mobile', I get two images output.

Im still not completely satisfied with the result, (see below) but at least I see something.

<picture class="attachment-half-width-fit size-half-width-fit wp-post-picture">
<img src="http://mysite.com/wp-content/uploads/2020/04/image-fpo_rev-960x576.jpg" srcset="http://mysite.com/wp-content/uploads/2020/04/image-fpo_rev-960x576.jpg" alt="fpo">
</picture>

Note that there is no 480 output at all. It's my hope that you seeing my errors will suggest improvements in your documentation, and of course that one of you will see my issue and give me the missing bits that I clearly didnt see / find in the wiki.

[anobjectn]

I got a very helpful response from Kyrylo that I want to share:

    'half-width-fit' => [
      'desktop'    => [
        [ 960, 576, true ],
        'picture' => '<source srcset="{src}" media="(min-width: 414px)">',
        'srcset'  => '{w}w',
        'sizes'   => '(min-width: 414px) {w}px',
      ],
      'mobile'  => [
        [ 480, 288, true ],
        'picture' => '<img src="{single-src}" srcset="{src}" alt="{alt}">',
        'srcset'  => '{w}w',
        'sizes'   => '{w}px',
      ],
    ],

Fixes my remaining issue with the output and produces the following:

<picture class="attachment-half-width-fit size-half-width-fit wp-post-picture">
<source srcset="http://localhost:5757/wp-content/uploads/2020/04/image-fpo_rev-960x576.jpg" media="(min-width: 414px)">
<img src="http://localhost:5757/wp-content/uploads/2020/04/image-fpo_rev-480x288.jpg" srcset="http://localhost:5757/wp-content/uploads/2020/04/image-fpo_rev-480x288.jpg" alt="">
</picture>

What I take away from this in regards to the docs, I think the docs gave me the impression that the first array element in a size setting definition had to be a non-keyed array. I also don't remember seeing picture settings like the above (one sourceset and one img). Maybe this information is there but if it is, I didn't see it. This is why I was hoping you'd add complete example groups with matching settings and output. I hope this helps create better documentation. The WP size & cropping options are well documented, though thats WP stuff and I hope the actual plugin usage parts can improve.

Many thanks to Kyrylo and the JustCoded team for the awesome product!

[jc-vgermanov]

Hi, @shaneonabike and @anobjectn,
We have added a “live examples” page to our wiki at your request.
Link: https://github.com/justcoded/just-responsive-images/wiki/Live-examples

We hope, this helps you in development with our plugin.
Best regards, Vitaly.

[shaneonabike]

Great! I'll have a look at the examples you posted within the next couple of weeks. If I think that some of my own usages could be added I'll post them here