Webp support for the 'Community Store'

Developing with Concrete
1

I’ve seemed to have managed to use ‘.webp’ images in a dev site using the ‘Community Store’ add-on!
I’ve set up using 8.5.6.
To use ‘.webp’ images in concrete5. First make you have added ‘webp’ to ‘Allowed File Types’.

NOTE: You will need to move and modify a few ‘Community Store’ files.

Move community store ‘cart.php’ to ‘application/single_pages’.

Move community store ‘cart_modal.php’ and ‘cart_list.php’ to ‘application/elements’.

In ‘application/single_pages’ create a folder ‘dashboard’ and inside that folder create a folder ’store’ and in that folder copy ‘products.php’ from ‘community/single_pages/dashboard/store’.

Then in the ‘application/single_pages/cart.php’ add style just above the ’store-cart-page’ div:

<style>
.store-cart-list-thumb img{width:80px}
</style>

In ‘application/elements/cart_modal.php’ and ‘cart_list.php’ add style:

<style>
.cart-list-thumb img{width:80px}
</style>

In ‘application/single_pages/dashboard/store/products.php’ add style to line 16:

<style>
.ccm-search-results-table .wid img{width:60px}
</style>

Then in the same file modify line 638 (approx) to accept webp file:

filters: [{field: 'file', type: '<?= \Concrete\Core\File\File::getByID($fID); ?>'}]

Then in same file add a class to the ’td’ on line 1946 (approx):

<td class="wid"><?= $product->getImageThumb(); ?></td>

NOTE: Small compromise, when adding webp files to a new product or editing an existing product page both ‘Primary’ and ‘Additional’ images do NOT show a thumbnail, just a page icon. But thumbs will show in the ‘Products’ list.

Hope that makes sense.

I have a C5 theme that’s under development, hope to put in the C5 marketplace soon, however I’ve set up a product using a webp image: Nile Sunset :: Nice Theme

2

This is interesting, I would have thought that webp would have just worked in place of a jpeg or png, but from what you’ve described it sounds like:

  • there needs to be some styling added so that the sizing of the images is restricted
  • that the image selector needs to be adjusted to allow webp files to be selected. (I’m not 100% sure of what you are doing in your code change though)

It might be worth actually adjusting Community Store itself via github, to handle this by default. The second point, I’m thinking this might be something that needs to be updated in Concrete itself, so that it sees webp as another format it consider an image.

3

Webp has been pending on github for a while now.

4

Concrete5 doesn’t understand webp image files yet (being looked at implementing for over 18 months). More people are asking for webp support, so I decided to look at adding it the ‘Community Store’. The code adjustments are only temporary within the ‘application’ folder. When C5 allows webp images by default the ‘application’ entries can removed.

BTW: Not receiving notifications again?