[Community] Select carousel image size

[pascalthivierge]

Is there a way to specify the size of the selected image in a carousel? It currently loads a resized version of the uploaded file (ex. filename.fill-2000x1000.jpg)

Thanks in advance!

[vsalvino]

To change the way the image is rendered, override the template in your app:

example: website/templates/coderedcms/blocks/carousel_block.html

See the built-in template: https://github.com/coderedcorp/coderedcms/blob/master/coderedcms/templates/coderedcms/blocks/carousel_block.html

To easily override just the image and inherit the rest from coderedcms:

File: website/templates/coderedcms/blocks/carousel_block.html

{% extends "coderedcms/blocks/carousel_block.html" %}
{% load wagtailcore_tags wagtailimages_tags %}

{% block carousel_slide_image %}
    {% if item.image %}
    {% image item.image fill-2000x1000 as carouselimage %}
    <img class="d-block w-100" src="{{carouselimage.url}}" alt="{{carouselimage.image.title}}" />
    {% endif %}
{% endblock %}

See the wagtail image rendition docs for rendering the images how you need: https://docs.wagtail.io/en/v2.6.1/topics/images.html

[thenewguy]

It would be nice if there was an option with the widget to select fill or fit.

Some images would be better if they were shown without cropping.

If the images all need to be the same size for the slider to work properly then the background color option can be used for padding the image

Ideally the background color would be transparent and only use a set color if output to a format that cannot handle transparency