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)

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.

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 hello@justcoded.com 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

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.

@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?

@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.