refactored two img elements to one #39
Conversation
| @@ -4,7 +4,9 @@ export default class EventDetails extends HTMLElement { | |||
| this.innerHTML = ` | |||
| <div class="inline-block event-details"> | |||
|
|
|||
| <img src="/assets/images/ri-map.webp" class="hidden sm:block max-w-sm md:max-w-sm lg:max-w-md xl:max-w-md" style="position:absolute; z-index:-1"> | |||
|
|
|||
| <img src="/assets/images/ri-map.webp" class="block pt-2 w-350 sm:pt-0 sm-max-w-sm md:max-w-sm lg:max-w-md xl:max-w-md sm:absolute sm:z-(-1)"> | |||
There was a problem hiding this comment.
| <img src="/assets/images/ri-map.webp" class="block pt-2 w-350 sm:pt-0 sm-max-w-sm md:max-w-sm lg:max-w-md xl:max-w-md sm:absolute sm:z-(-1)"> | |
| <img src="/assets/images/ri-map.webp" class="block pt-2 w-[350px] sm:pt-0 sm-max-w-sm md:max-w-sm lg:max-w-md xl:max-w-md sm:absolute sm:z-(-1)"> |
There was a problem hiding this comment.
Hey @Udassi-Pawan , I think w-350 will not work. Instead, you can use w-[350px]
| @@ -4,7 +4,9 @@ export default class EventDetails extends HTMLElement { | |||
| this.innerHTML = ` | |||
| <div class="inline-block event-details"> | |||
|
|
|||
| <img src="/assets/images/ri-map.webp" class="hidden sm:block max-w-sm md:max-w-sm lg:max-w-md xl:max-w-md" style="position:absolute; z-index:-1"> | |||
|
|
|||
| <img src="/assets/images/ri-map.webp" class="block pt-2 w-350 sm:pt-0 sm-max-w-sm md:max-w-sm lg:max-w-md xl:max-w-md sm:absolute sm:z-(-1)"> | |||
There was a problem hiding this comment.
| <img src="/assets/images/ri-map.webp" class="block pt-2 w-350 sm:pt-0 sm-max-w-sm md:max-w-sm lg:max-w-md xl:max-w-md sm:absolute sm:z-(-1)"> | |
| <img src="/assets/images/ri-map.webp" class="block pt-2 w-350 sm:pt-0 sm-max-w-sm md:max-w-sm lg:max-w-md xl:max-w-md sm:absolute sm:z-[-1]"> |
There was a problem hiding this comment.
Thanks @Udassi-Pawan for this!
I realize I forgot to leave out an important detail in the issue 🤦♂️
So for mobile, we needed to use a second image where the dots keep going down to the logo just because we wanted to keep everything stacked and narrow for these kind of screen sizes. I have a PR up for this now that I got the latest image from the designer - #40
This means that we would still need to manage two different src attributes based on breakpoint. I'm thinking we could use srcset to select which image to load, while still keeping the styles all in Tailwind? Hopefully that allows us to still use one <img> tag. 🤞
Let me know your thoughts, and apologies for the missing details.
|
Just wanted to share an example that I just implemented for the header banner image that you can reference <img
src="/assets/images/blissfest-logo-sm.webp"
srcset="/assets/images/blissfest-logo-sm.webp 500w,
/assets/images/blissfest-logo-md.webp 1000w,
/assets/images/blissfest-logo-lg.webp 1500w"
/>In this case I did the following:
So to apply that to this instance, I think something like this should probably work <img
src="/assets/images/ri-map-mobile.webp"
srcset="/assets/images/ri-map-mobile.webp 350w,
/assets/images/ri-map.webp
/>
|
Resolves #34
Summary of Changes
I refactored the two img elements to just one conserving the styles.
I am relatively newer to open source contributions. Do let me know if any changes are required.