23 Comments
User's avatar
Romola Chrzanowski's avatar

I tried to use Google photos for a couple of pictures but can't seem to make them public. There is a way to share to an individual but not apparently to "public". Imagine a picture of a white cow named Shark. I may have to use a different photo sharing app or maybe codepen Pro.

https://codepen.io/romola/pen/dyWbEOy

Jen Kramer's avatar

Love it!!! Everything looks great in the HTML. As for the image, it looks like that URL produces a 404 error. It's possible it's the wrong URL, but maybe it has more to do with permissions? It's a private image to you but not public for me? Usually an absolute URL in the <img> tag works fine in CodePen. In any case, thanks for sharing - everything looks great!

Romola Chrzanowski's avatar

I may have just changed the folder permissions so the photo might show now. If not, I will keep at it. Thanks.

Jen Kramer's avatar

Another thought -- unless that is the URL for the actual image, it may not work correctly. I still get the 404 error with https://photos.google.com/photo/AF1QipOU3t4q9slZzy_YNmbiI_3-mBrHbZd1jCVMqR4k

See if you can get something that ends in .jpg maybe?...

Romola Chrzanowski's avatar

There is a way to do this that is surprising and someone wrote a codepen to convert the image URL to make it work. See my answer again for an example and explanation. Maybe there are other tricks to sharing Google Drive (and probably works for Google photos ,too).

Jen Kramer's avatar

Will do -- thank you for the pointer!

Jen Kramer's avatar

🌈🌈🌈🦄🦄🦄 Looks great! You might want to put the <cite> on the poem name rather than the author, but everything else looks awesome!

kajal's avatar

Done!👍😊

Jen Kramer's avatar

🌈🌈🌈🦄🦄🦄 Love the daffodil, love the poem! HTML looks great and YAY FOR CSS! Works great when people use <main> 🤣 (let's hope they do!) Thanks for sharing again!

Jade Chaffin's avatar

https://codepen.io/jarchaff/pen/gOgJjGz?editors=1100

I saw the Demon Slayer movie last week, so I was excited to incorporate that in this challenge. Also, I'm hosting my image using Lensdump, and it seems to work okay!

Jen Kramer's avatar

Jen KramerApr 26

🌈🌈🌈🦄🦄🦄 Hooray! Looks great!😁

maeyler's avatar

Today I have no time for the challenge. Instead, I have applied it in my work:

https://github.com/Okuyun/Kitap/commit/ce228b

Jen Kramer's avatar

💖💖💖🔥🔥🔥 YAY!!!! We are so happy you're able to use this at work!!! That's even better than a challenge. Thank you so much for sharing!

maeyler's avatar

Using <figure> had an unexpected side effect:

default margins are too large for small screens.

I had to correct this behavior.

Jen Kramer's avatar

Fair enough! No one ever accused HTML of having awesome default styling. Changing the margin isn't a big deal and shouldn't keep you from using the element. 😄

maeyler's avatar

The images looked smaller and it took me two days to find the cause!

Once you know the cause it's easy... but the discovery could a headache.

So I learned several lessons from this figure tag :)

Jen Kramer's avatar

🙌 🎉 🌈🌈🌈🦄🦄🦄

Marta's avatar

https://codepen.io/idlehands1969/pen/YPyajxj?editors=0100

I hope you enjoy my bad poem from my college days lol. ;-)

User's avatar
Comment deleted
Apr 26, 2021
Comment deleted
Jen Kramer's avatar

🌈🌈🌈🦄🦄🦄 William - fantastic painting! Love the quote that goes with it. HTML looks great, as does the CSS. Very nicely done! 😁