Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Angela Montgomery
2,759 PointsHow do you resize image in atom?
So I was able to get my image into Atom but I can't find anywhere on how to resize it or view the image details in the editor? I have the resize image package but when I click on it nothing happens. Can someone give me a breakdown on how to resize images in atom. I am so confused. I searched everywhere on the internet and nothing and spent 30 mins trying to figure this out. Please help! Thank you.
2 Answers
Amber Fuller
4,598 PointsYou can do it one of 2 ways: either put your images into your project file(I typically put them in their own folder in the project just to keep things organized. with the <img> tag, you can do 1 of 2 things, either put in the link to the image from the website, or you put the name of the image file into the quotes for the src. For example, if I make an "img" folder in my project, I would write it like this: <img src="img/picture1.jpg" alt="cat picture">
Just remember, Atom is simple a text editor, and there's lots of other ones like Sublime Text, Notepad++(I'm sure I'm missing out on a lot of them). So think of the code as giving instructions to your HTML as to what you want it to do. So if you want it to display images, the <img> tag is like saying "hey, I want you to display this picture, and here's where you can find it. And if you can't find it, display this message"(or for screen readers, tell the user what the picture is of).
Angela Montgomery
2,759 PointsAmber- thank you, I'll have to try that but let me ask you how to do add your own personal photos to Atom. I uploaded mine to Google photos so I would have a link but it doesn't end in jpg? It worked somehow but is the only way of getting my own photos into Atom?
Amber Fuller
4,598 PointsAmber Fuller
4,598 PointsI don't use a package, typically I just code the CSS myself. For example, if I want to have an image that is the full width of the page, I would use max-width: 100%. However, if I'm trying to put in multiple images (like a gallery of images) I might use a different size, or just do something like width: 50%, height: 50%;. I'll give you a good example: here's some code I put in for some social media icons on something I've been building: .picture { min-height: 50%; min-width: 50%; max-width: 75%; max-height: 75%; margin-left: auto; margin-right: auto; border-radius: 10px;
} Hope this helps!