V.9 Pagetheme: ThemeResponsiveImagemap

Developing with Concrete
1

In my Pagetheme.php I’m trying to setup ThemeResponsiveImagemap for a v.9, theme.

public function getThemeResponsiveImageMap()
   {
       return [
           'xxl' => '1400px',
           'xl' => '1200px',
           'lg' => '992px',
           'md' => '768px',
           'sm' => '576px',
           'xs' => '0',
       ];
   }

Then in controller I install thumbnails accordingly: width xxl = 1340px, xl = 1140px, lg = 940px, md = 740px, sm = 540px, (no thumbnail for xs)

looking at @afixia’s controller at:

I see that sm and xs have the same widths 540px, also two thumbnails with the same widths are created.

Is that correct so? Or can I set xs thumnail to 340px?

I couldn’t find anything in documentation, neither in Bootstrap5.

Is there a proper way to do it?

Thanks for clarification.

2

a few of us are just getting back from holiday, response times might be a little slower than usual!

4

Hello, I am not sure that array means what you think it means.
What it means is:
when my viewer screen has a size of 1200px or more use the thumbnail with size xl
when my viewer screen has a size of 1400px or more use the thumbnail with size xxl

And also:
When my screen has a size of 0 or more use thumbnails of size xs.

So when you say “no thumbnail for xs” that is not a correct interpretation of what this array means.

5

To be more clear, using Aflixia’s size array


return [
            'xl' => '1200px',
            'lg' => '992px',
            'md' => '768px',
            'sm' => '576px',
            'xs' => '0',
        ];
  • For screens of size 0 to 575px use thumbnail size xs
  • For screens of size 576px to 767px use thumbnail size sm
  • For screens of size 768px to 991px use thumbnail size md
  • For screens of size 992px to 1199px use thumbnail size lg
  • And for screen sizes of 1200px and above use thumbnail of size xl
6

mnakalay, thank you for clarification.

Afixia’s size array in Pagetheme is not in question, rather the thumbnails, automatically created from the install controller. (Github link in first post)

I have installed the @afixia basic bedrock theme. When I look at the thumnails automatically created I have both, handle-xs and handle-sm with 540px, also two thumbnails with identical images sizes. That was my confusion.

According to your array, the created thumbnail image for sm should have 720px not 540px as in afixia’s install controller

Correct?

Reason:

We create presentations with lots of images, using container-fluid and scrset beyond 1200px. Smallest is on a iPhone 5 with 320px wide and the largest for a screen of 2400px. So we need to have the images available without rescanning.

Thanks

Bernie

7

Well… yes an no.

Yes he doesn’t need both xs and sm thumbnail types since they are the same size, that just creates more files on the server for no reason.

But no the created thumbnail image for sm doesn’t have to be 720px

He might simply have decided he wants to keep the same size of 540px from 0 to 577px and also from 578 to 767px. So if that’s the case, he doesn’t need the line 'sm' => '576px',

What I’m trying to say is that your assessment is logical from a usability standpoint, it’s what makes sense.

But from a coding perspective, the code in Aflixia’s is not wrong.

1 Like
8

Thanks, we have a way to go.
For others who might be unsure how to deal with thumbnails, imagemap and container sizes: Containers · Bootstrap v5.0

1 Like