ElkArte Community

https://developers.google.com/speed/webp
I did a test by enabling webp extension in Attachment Settings, the attachment is uploaded, but is displayed as full width inside a post, not as a thumbnail. I attach a screenshot
(Link-7103)

What do you think about supporting this format in Elkarte? As far as I can see, it was recently added as in wordpress (https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/), and I start to see more and more websites using this format for images.

to avoid this, the webp extension should be disabled from default.
In ACP > Forum > Attachments settings > Allowed attachment extensions > ? :
(Link-7105)
we can change:
to something like:

I have a foggy memory of looking at this a one point.  I guess the short of it is, yeah it probably should be supported at some point.  I'll add a task on git so we remember.

Finally looking at this and here is what I'm thinking (and actually have) doing

1) Added a check in the ACP for if you have WebP capability either in GD or Imagick.  This will trigger if you add webp as one of the allowed file types. 
2) With a WebP enabled server, when you upload a WebP image and it will create the thumbnail just like any other image

I'm going to drop the ACP option of "Save thumbnails as PNG" and update the thumbnail functionality as follows:

1) If you have WebP enabled, all thumbnails will be saved as WebP images.  The WebP thumbnail images are smaller in size than JPG or PNG and retain alpha/transparency.  For the thumbs I am only using lossy compression, unlike the old "PNG only thumbs" which by definition were lossless.  The reality is they look just as good but it will saves some space/bandwidth, and its a thumbnail.
2) If you do not have WebP, and the uploaded image is a PNG with some alpha/transparency, then it will create the thumbnail as PNG
3) All others to JPG

Still to do:
1) Avatars
2) How I want integrate WebP options into Image Attachment Resizing (now built into 2.0)

And a test

This already looks very promising!  :)

I don't know why, but entering this thread made the menu icons go blank on an Android mobile.

Could you flush your cache and see if that helps, there were changes in the css

That finally worked after the third time. Emptying the Chrome cache doesn't empty the Chrome cache. Apparently you have to threaten it's family. ;D

I've notice that mobile devices hold the cache at all costs !! :cool: that you got it cleared :smile:

Let's brake this thing with some tests: :D

and some inline webp images:

Thumbnail:
(Link-9921)

300px width:
(Link-9921)

Full size:
(Link-9921)

Thumbnail center:
(Link-9921)

Full size right:
(Link-9921)


It seems that I wasn't able to do it

In the end I was able to break something, have a look at the latest image  ;D

Ah cool, breakage :smile:  I don't think that is specific to webp but an ILA float issue.  Should be an easy :head_bandage:

It's happening because the .quoteheader is a div, which is block level display by default. It would need a right margin to stop it overlapping the floated image.

Best solution is probably to rewrite the markup for quotes, so that the quoteheader stuffz goes inside the blockquote (cite tag, or whatever else works).

I wonder if a display: flex; on the quote header would do the trick since a float should not intrude into a flex area?   If not probably will have to change the way that markup is done, but can be more involved I fear.

I added this to the tracker so its not forgotten :D

Just tried flex in dev tools. Seems to work, at least with the example post. Might be worth trying a few other examples with different quoteheader content.

Although really the markup change would be sensible anyway, just from the point of markup and CSS. The dark side have gone with a cite tag inside the blockquote for 2.1, which is nice and simple. Offhand I can't recall how Subs (or whatever you use now) handles quote markup in Elk, but from memory it wasn't too gnarly.

If you want to change it I'd be happy to tackle that. If not, flex on the existing will probably be ok.

If you want to tackle it, that would be great!

I don't think you will find anything in Subs.php, its all going to be in the BBC parser which is its own thing now.  Doing a quick search it looks to be in the alternateQuoteStyle() method down in /sources/ElkArte/BBC/BBCParser.php 

When you go there you will note that is where I did some juggling to test out what would be required fort those CSS only expandable quotes, I needed PHP to set the markup due to the number of conditions.

ETA::

There is also some juggling in handleCollapsedQuotes() which if I recall was for the nested quote problems.

And lasty the intial BBC codes are set up in Codes.php found in sources/ElkArte/BBC/Codes.php ... This is the standard bbc to markup definition that will look somewhat familiar, its just that quotes being a PITA need lots of other processing, at least for the nested stuff, which is where I choose to intercept things for the collapsed quotes.

Hope that makes some sense at least when you go looking ... Codes -> basic markup -> alternateQuoteStyle() -> advanced markup based on conditions -> handleCollapsedQuotes() for additional issues due to nesting.