Bug in default image grid mode: vertical list (verbose)

[SamC]

I like to use the vertical list for images at full size on the slider. I forget to fill in a description if I can't see that field and not found a way to make just this part required so at least I'd get a reminder. Anyway, I like the image nice and big:

...but every time I save the page, it reverts to a smaller image:

Can anyone reproduce this? It happens to me with Reno theme and the default classic theme.

[szabesz]

6 hours ago, SamC said:

Can anyone reproduce this?

Yep, it's been working like this ever since it was released as far as I can remember. Even worse, it does tend to shrink into 60 by 60 pixels (in the case of a square image) when it is set to smallest.

[Karl_T]

There is another related bug. If you have more than one image fields, you will see the image all in the same size even you have adjust the size bar individually after you save and refresh.

[SamC]

I'll look into it further. This is a bit of an issue for me.

[SamC]

So I looked into this a bit but I'm way over my head staring at the /wire/modules/Inputfield/InputfieldImage js file. What I did notice was that after I dragged the slider fully to the right, the left column is 39% and the right column is 61% (at the bottom). These change depending on the slider value, but both together equal 100% width.

When the page is saved, the width of the left column always reverts to 260px wide.

I'm having no luck tracking down where this 260px comes from in the first place, so would need someone more experienced to look at this.

[gmclelland]

Don't know the fix, but here is the issue for this https://github.com/processwire/processwire-issues/issues/331

[Robin S]

13 hours ago, gmclelland said:

Don't know the fix, but here is the issue for this https://github.com/processwire/processwire-issues/issues/331

That's actually a different issue with a different cause.

But I think I've found fixes for both issues. 

The new issue is here: https://github.com/processwire/processwire-issues/issues/419

[SamC]

Hmmm, I tried it and it didn't seem to fix

What I noticed is that when I save the page, the image starts at the correct previous size, then resizes a fraction of a second later to a smaller version, so I:

setGridSize($inputfield, size, ragged);

if($inputfield.hasClass('InputfieldImageEditAll') || mode == 'list') {
  var listSize = getCookieData($inputfield, 'listSize');
  setListSize($inputfield, listSize);
  console.log("setListSize ran");
}
else {
  setGridSize($inputfield, size, ragged);
  console.log("setGridSize ran");
}

...and the output showed that this runs twice (I never noticed it runs before the if block).

[SamC]

Removing the first run of 'setGridSize' function above this block seems to work:

//console.log('initInputfield');
//console.log($inputfield);
//setGridSize($inputfield, size, ragged); << THIS

if($inputfield.hasClass('InputfieldImageEditAll') || mode == 'list') {
  var listSize = getCookieData($inputfield, 'listSize');
  setListSize($inputfield, listSize); // runs when 'verbose list'
  console.log("setListSize ran"); 
}
else {
  setGridSize($inputfield, size, ragged); // runs when 'square grid images' and 'proportional'
  console.log("setGridSize ran");
}

Work for all views now at my end.

[Robin S]

7 minutes ago, SamC said:

Removing the first run of 'setGridSize' function above this block seems to work

Yes, the suggested fix in the GitHub issue is to replace the all the code in the "problem" block with the code in the "fix" block.

[SamC]

8 minutes ago, Robin S said:

Yes, the suggested fix in the GitHub issue is to replace the all the code in the "problem" block with the code in the "fix" block.

Ha, yep. Guilty of not reading the issue properly until after posting...

Thanks @Robin S this issue was really offputting for me.