How to reduce size of image in Gmail Addon Using Card Services

Question

I'm developing the Gmail addon through card services. My login screen contains below widgets :

1. Language Dropdown
2. Logo
3. Login Form

I had provided the code for that.

    // Create a language dropdown
    var languageDropdown = CardService.newSelectionInput()
        .setType(CardService.SelectionInputType.DROPDOWN)
        .setTitle('Language')
        .setFieldName('language')
        .addItem('English', 'en', true)
        .addItem('Hindi', 'hi', false);

    // Create a logo image
    let cardSection1Grid1Item1Image1CropStyle1 = CardService.newImageCropStyle()
        .setAspectRatio(1)
        .setImageCropType(CardService.ImageCropType.SQUARE);

    let cardSection1Grid1Item1Image1BorderStyle1 = CardService.newBorderStyle()
        .setType(CardService.BorderType.NO_BORDER)
        .setCornerRadius(4);

    let cardSection1Grid1Item1Image1 = CardService.newImageComponent()
        .setImageUrl('https://source.unsplash.com/featured/320x320?nature&sig=3')
        .setCropStyle(cardSection1Grid1Item1Image1CropStyle1)
        .setBorderStyle(cardSection1Grid1Item1Image1BorderStyle1);

    let cardSection1Grid1Item1 = CardService.newGridItem()
        .setTextAlignment(CardService.HorizontalAlignment.START)
        .setLayout(CardService.GridItemLayout.TEXT_BELOW)
        .setImage(cardSection1Grid1Item1Image1);

    let cardSection1Grid1 = CardService.newGrid()
        .setNumColumns(1)
        .addItem(cardSection1Grid1Item1);

    // Create a login form
    var loginForm = CardService.newCardSection()
        .setHeader('Login Form')
        .addWidget(CardService.newTextInput()
            .setFieldName('Text')
        )
        .addWidget(CardService.newTextInput()
            .setFieldName('email')
        )
        .addWidget(CardService.newTextInput()
            .setFieldName('password')
        );

    const card = CardService.newCardBuilder()
        .addSection(
            CardService.newCardSection()
                .addWidget(languageDropdown)
                .addWidget(cardSection1Grid1)
        )
        .addSection(loginForm).build()

    return card;

I just want to reduce the size of the image. like we do in HTML using height and weight. Here height and weight are not supported because it's a card service and we have a limitation of CSS.

So is there any other way to reduce the size of the logo?

can anyone guide me on this?

Answer 1

Try following code:

// create your logo image
let cardSection1Grid1Item1Image1CropStyle1 = CardService.newImageCropStyle()
    .setAspectRatio(1)
    .setImageCropType(CardService.ImageCropType.SQUARE);

let cardSection1Grid1Item1Image1BorderStyle1 = CardService.newBorderStyle()
    .setType(CardService.BorderType.NO_BORDER)
    .setCornerRadius(4);

let cardSection1Grid1Item1Image1 = CardService.newImageComponent()
    .setImageUrl('https://source.unsplash.com/featured/320x320?nature&sig=3')
    .setPixelSize(100, 100) // Set the width and height here
    .setCropStyle(cardSection1Grid1Item1Image1CropStyle1)
    .setBorderStyle(cardSection1Grid1Item1Image1BorderStyle1);

let cardSection1Grid1Item1 = CardService.newGridItem()
    .setTextAlignment(CardService.HorizontalAlignment.START)
    .setLayout(CardService.GridItemLayout.TEXT_BELOW)
    .setImage(cardSection1Grid1Item1Image1);

let cardSection1Grid1 = CardService.newGrid()
    .setNumColumns(1)
    .addItem(cardSection1Grid1Item1);

in the code above, I've added the setPixelSize method to the cardSection1Grid1Item1Image1 image component and you can specify the width and height in pixels to control the size of the image.