calendar Display Images in Event Calendar on mobile

I'm trying to figure out how to get event images to display on mobile. I've tried code from other posts in the forum with a similar problem and only works while editing within the mobile adaptive emulator. Has anyone been able to figure out how to get images to appear when accessing the site on a mobile device (iOs or android)? I use my android phone to test.

I have screenshots of the results so far. Before trying code, no images show up. After applying code, images show up but only in the preview. When I try to refresh, access the site on my phone or navigate to the next month, enlarged titles of each event shows up instead. Just an fyi this calendar is not linked to Scheduling. 

If this isn't a coding problem but an image formatting problem please direct me to someone who can walk me through it.

 

Here's the code I've tried so far:

*CODE #1*

 

.yui3-squarespacecalendar .compact-layout .background {

 

  display : unset;

  

  }

 

.yui3-squarespacecalendar .compact-layout .background + .marker .marker-daynum {

 

  color : unset;

  

  }

 

*CODE #2*

 

@media screen and (max-width:767px) {

.yui3-squarespacecalendar .compact-layout .background {

    display: block !important;

}

}

 

*CODE #3*

 

@media screen and (max-width:767px) {

.yui3-squarespacecalendar .compact-layout .background {

    display: block !important;

}

.yui3-squarespacecalendar .compact-layout .marker {

    position: absolute !important;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

}

}

 

Based on the info you provided and digging into the issue I've discovered that SS is removing the src attribute of the image tag when the calendar is in compact mode. This effectively removes the image on mobile.

CSS aline can not be used to restore the image on mobile.

It would take JavaScript to add the src attribute back into the image tag when in compact. I know of no code that currently does this.

I see, and there's no way currently to access or inject arc attribute to SS javascript? Or is it access is not permitted because SS doesn't want the overall site to be affected if I were to add my own code?

Quote

I see, and there's no way currently to access or inject arc attribute to SS javascript?

It may be possible to rebuild the needed structures with JavaScript. There is a data-src attribute which is there all the time and I think SS is using to restructure things if the window gets bigger on the fly.

But here is the tricky part. SS is building those calendar blocks on the fly with JavaScript already, they are dynamic. You can't just run JavaScript once and call it good. You need a MutationObserver to watch the elements and then rebuild things as needed.

I spent some time earlier looking at this and although I was able to add the src attribute back in, that alone didn't do it. Images needed to be sized appropriately to their parent containers. CSS needed to be fiddled with, classes needed to be removed, and etc. It became apparent to me that this wasn't just a few minutes of coding. This one was going to be some amount of work to get right, if possible at all. I just didn't see how I was going to fit an image and have a date over it in half-inch square for one date on a cell phone screen. I can see why SS decided not to have images at small screen sizes. I'm not saying it can't be done just that it appears to be a fair amount of work to get there.

I figured it'd be difficult and likely not worth the trouble. Final question, as an alternative to images can I alter the titles of the events that appear enlarged to fit within the the day of each event instead? Or would the same process as you explained be necessary?

 

As you can see in this screenshot, all the show titles of the month appears like this on my phone. This appeared using any one of the code I showed in the beginning post. I know there's a way to create color blocks to highlight particular days with just CSS, so can I just take this text and resize it to the box of the day?

What is the URL for the page with the calendar?

https://velvetwhipphilly.com/events?view=calendar&month=06-2023

Quote

can I just take this text and resize it to the box of the day?

I don't see a clean way to use text when the calendar is small.

Look at the highlighted day there so little room. When I forced the text to show I could see it was going to be a challenge just to get the text look good. It was a mess.