Better resizing for custom homepages

[Shocktrooper]

When creating a custom homepage in backstage the XKCD card/image/text should be automatically resized to what the user wants the size to be. This is currently not the case and the card cuts off part of the image if the sizing does not fully support the image

Cutoff image

[Vity01]

I don't think there is any good solution for sizing of the image. The comic comes in various sizes (both very wide and very long). Now the image uses this CSS configuration:

    xkcdImage: {
        width: '100%',
        height: '100%',
        objectFit: 'cover'
    }

any better suggestion?

[Vity01]

if the image should not be cut off, then use the style attribute as mentioned in README:

                            <Grid item md={3} xs={6} style={{height: "500px"}}>
                                <XkcdComicCard />
                            </Grid>

[Shocktrooper]

I don't know if this problem happens if you set a static bound for it but I am using the custom homepage extension that lets user size their own cards. In my homepage all I have to put in is the following and the user resizes it and places it to their own liking. I wonder if there is a way I can use what you have above with the custom home page grid

      <CustomHomepageGrid config={defaultConfig}>
        <HomePageRandomJoke />
        <HomePageStarredEntities />
        <HomePageXkcdComic />
        <HomePageToolkit tools={toolkitArray} />
        <QuestionTableCard />
      </CustomHomepageGrid>

[Vity01]

I see now. We have to find a way how to style the height for some inner div or something.

[Vity01]

Please give a try version 1.0.7

[Shocktrooper]

Please give a try version 1.0.7

Nope :/ still looks the same.

[Vity01]

Hmms. I don't think it can work. It's against the custom homepage logic. Every panel has user defined fixed width and height in pixels and the image is stretched by width. The inner component cannot enable it as sizable panel.

[Shocktrooper]

I wonder if we can make a homepage component exported by the plugin then that sets the minimum size needed to show the cards fully if someone were to use this with a customizable homepage. https://github.com/backstage/backstage/blob/master/plugins/home/README.md#creating-customizable-components

[Vity01]

The minimum size is already set. It's just default size for the component. I plan to ask @drodil the main contributor of the Home plugin.

[Vity01]

The problem is with the height:100% property on the parent container. If you disable this setting (in debugger), the panel behaves correctly. I also discovered another problem. From unknown reason the external link (a href, which is enclosing the whole image) is not working correctly on the custom homepage as well.

[drodil]

Problem might be that the card content does not scale when changing the size of the widget on home screen. This is actually same problem with some other widgets as well. Maybe you could add some CSS maximum width/height as percentage to the image? Or even CSS object-fit might come to rescue?

Don't know if this needs some tuning to the upstream to get widgets work better with different kinds of contents but at least this could be fixed in this plugin.

[drodil]

@Shocktrooper apparentl you are also using the Q&A table widget. It doesn't scale that well either and I am planning to take a look at that too.

[Vity01]

@drodil

I use these CSS: XkcdComicCard.tsx

    xkcdImage: {
        width: '100%',
        height: '100%',
        objectFit: 'contain'
    }

When I use the component on the classic homepage then it works properly (it resizes the card height, but I guess it's blocked for the cardExtension).

[drodil]

How about if you change it to cover? If that does not work, it might need some upstream changes to correct the calculation of dimensions; not sure what that would be though.

[Vity01]

It does not help. It's somehow related with this height property: CustomHomepageGrid.tsx When I remove it, the xkcd panel resizes properly...

[drodil]

Hm. That might need fixing, good find! It is used to make the overlay fill the widget when going to edit mode on the homepage. But that should be achievable also with class selector. Maybe you could try to fix this in upstream by adding class for the overlay div and changing the css selector?

[Vity01]

@drodil that's too difficult for the backend developer :-). There is also another problem with the external link I mentioned above. Although the whole image should be enclosed with the a tag, the link is just a small part below the picture. Something is blocking it.

[drodil]

I can take a look when I am back from holiday if nobody else comes up with a PR :)