Develop Reference

How to change the size of an image coming from an API call

Is it possible to resize an image coming from an API call? I am extracting an image from an API and trying to insert into a div on the page. The API is "NASA image of the day" and its a new image from nasa each day. Sometimes the image is vertical, and sometimes the image is horizontal depending on the day. What is the best way to handle this situation? I don't want the image to exceed the div it is inside of (40rem x 40rem), and right now the image posts really big on the screen and isn't contained inside of the div at all.
HTML:
<section class="section" id="section--1">
<div class="section__title">
<div class="title--info">
<h2 class="section__description">Image of the day <button>view</button></h2>
<h3 class="section__header">
View the "image of the day" taken by NASA satellites in space
</h3>
</div>
</div>
<div class="parent__el"></div>
<!-- <figure class="space__photo">
<img src="/img/space.jpg" alt=""/>
</figure> -->
CSS:
.parent__el {
height: 40rem;
width: 40rem;
margin: 0 auto;
}
JavaScript:
const imageContainer = document.querySelector('.parent__el')
const loadImage = async function() {
try {
// 1) loading recipe
const res = await fetch('https://api.nasa.gov/planetary/apod?api_key=BSw3P3LRHk0brFlI5xMlVkaTdwUZuA3arh0A5ziV');
const data = await res.json();
if(!res.ok) throw new Error(`${data.message} (${res.status})`);
console.log(data)
// 2) rendering recipe
const markup = `
<div class="space__photo">
<img src="${data.url}" alt="" />
</div>
`;
imageContainer.innerHTML = markup;
} catch(err) {
alert(err)
}
}
loadImage()

You could also try setting the image as the background image of your space_photo container:
const markup = `
<div class="space__photo" style="background-image: url('${data.url}'); background-size:cover;">
</div>
`;
You would then have to give the class "space__photo" an appropriate size though (height and width 100% for example, so it stretches the entire length of your parent_el)

give your image an id, "img".
in your div rendering part, do this:
let img = document.getElementById("img")
if(img.style.height >= img.style.width) {
img.style.height = '40px'
} else {
img.style.width = '40px'
}
This makes it so when the image is verticle, it renders it as 40px height. When it is horizontal, it is 40px width.

How to put an image a circle chart

I'm trying to put an image inside my circle chart, but what I'm trying is not working. I have tried to put an "img src" inside the div html5, but that doesn't work.
If someone can help me, that would be nice.
var htmlDoughnut = document.getElementById("html").getContext("2d");
var htmlData = [
{
value: 90,
color:"#74cfae"
},
{
value : 10,
color : "#f2f2f2"
}
];
var myHTMLdoughnut = new Chart(htmlDoughnut).Doughnut(htmlData, {
percentageInnerCutout : 80
});
<div id="skills">
<div class="container">
<div class="row center-block">
<h3 class="text-center">Dev Skills</h3>
<div class= html5>
<div class="col-xs-6 col-sm-3 col-sm-offset-1">
<canvas id="html" height="150" width="150" ></canvas>
<p>HTML5</p>
<br>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js'></script>

If you take a look at the Chart.js documentation for doughnut charts, you'll notice there's nothing in there about background images. Background color is the best you get. That's likely because drawing actual photos on a canvas can be a pretty complicated task that is often not especially performant, so they don't include it out of the box.
So that being the case, whether you can still pull this off depends on exactly what you had in mind.
If you want to have different images for each different value on the doughnut, that's not going to happen, at least not while using Chart.js. (You could probably do that if you did the whole chart is pure CSS, though.)
If you just want a single image in the middle of the doughnut, though, what you could do is add an img tag or use a CSS background-image for some element and position that image/element on top of your chart. Since the canvas has to be given a static size anyway, this may work out alright for you; you may just need to experiment a bit to get the position and size just right.
In the snippet below, I've added a wrapper around the canvas and put the background image on a pseudo element of that wrapper (since you can't have pseudo content on the canvas itself). I've positioned the pseudo element to go in the middle of the doughnut.
var htmlDoughnut = document.getElementById("html").getContext("2d");
var htmlData = [
{
value: 90,
color:"#74cfae"
},
{
value : 10,
color : "#f2f2f2"
}
];
var myHTMLdoughnut = new Chart(htmlDoughnut).Doughnut(htmlData, {
percentageInnerCutout : 80
});
#canvas-wrapper {
position: relative;
}
#canvas-wrapper::after {
content: '';
display: block;
position: absolute;
top: 19px;
left: 19px;
width: 112px;
height: 112px;
border-radius: 50%;
background-image: url('https://picsum.photos/id/1042/300/450');
background-size: 140px auto;
background-position: center center;
background-repeat: no-repeat;
}
<div id="skills">
<div class="container">
<div class="row center-block">
<h3 class="text-center">Dev Skills</h3>
<div class= html5>
<div class="col-xs-6 col-sm-3 col-sm-offset-1">
<div id="canvas-wrapper">
<canvas id="html" height="150" width="150" ></canvas>
</div>
<p>HTML5</p>
<br>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js'></script>

Image need to resize by half based upon first div image

I have two different type of image with various sizes inside the two div tags. I need to resize the 2nd div image size by half of first div image.
.first-div img {
width:500px; //this img size may be random
}
.second-div img {
width:250px;//need to resize the img half of first-div image
}
<div class="first-div">
<img src="https://i.pinimg.com/originals/99/68/8e/99688e0cebdb1f8bde066b9bbf969003.jpg" width="" />
</div>
<div class="second-div">
<img src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" width="" />
</div>
For example if the first div image size 200 and the second div image size 100. anyone help me to achieve this.

By using Jquery
$('.second-div img').width($('.first-div img').width()/2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-div">
<img src="https://i.pinimg.com/originals/99/68/8e/99688e0cebdb1f8bde066b9bbf969003.jpg" width="" />
</div>
<div class="second-div">
<img src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" width="" />
</div>
You can achieve this by using css variables
:root {
--main-width: 500px;
}
img {
vertical-align: middle;
border-style: none;
}
.first-div img {
width:var(--main-width);
}
.second-div img {
width:calc(var(--main-width)/2);
}
<div class="first-div">
<img src="https://i.pinimg.com/originals/99/68/8e/99688e0cebdb1f8bde066b9bbf969003.jpg" width="" />
</div>
<div class="second-div">
<img src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" width="" />
</div>

You can achieve this by using jQuery like this:
var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
var width = this.width;
$('.second-div img').css('width',width/2);
}
var url = $('.first-div').find('img').attr("src"); // get dynamically url image
img.src = url;
or
img.src = 'https://i.pinimg.com/originals/99/68/8e/99688e0cebdb1f8bde066b9bbf969003.jpg';//image_path_of_first_div_image;
Here you get width and height of image dynamically by passing image URL.

With jQuery you can do
$('.second-div img').width($('.first-div img').width()/2)

Display/Load Different Background Image Depending on Device

I'd like to use a large background image for desktop users and a different smaller background image for mobile users.
I found this answer
.img-responsive.mobile {
display: none;
}
#media only screen and (max-device-width: 480px) {
.img-responsive {
display: none;
}
.img-responsive.mobile {
display: block;
}
}
<div class="row">
<img src="image\bannerimages\Career.png" class="img-responsive careerpage">
<img src="image\bannerimages\Career-mobile.png" class="img-responsive careerpage mobile">
<h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
...
</div>
how-to-display-different-images-in-mobile-and-desktop-devices
Problem with this solution is it loads two images - I'd like to only load the image necessary. How can this be done?

Using pure Javascript
javascript:
<script>
var screenWidth = screen.width;
var imgElement = document.createElement("img");
var imgUrl;
if(screenWidth < 480) {
// for mobile devices
imgUrl = document.createTextNode("url of img 1");
} else {
// otherwise
imgUrl = document.createTextNode("url of img 2");
}
var row = document.getElementByClassName("row");
row.insertBefore(imgElement, row.childNodes[0]);
</script>
html:
<div class="row">
<h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
...
</div>
I think html code is crystal clear so I just describe javascript code. first of all gets width of screen then checks whether it is a mobile device or others. then inserts url of proper image in created element and finally inserts it as the first element of div.row element.
Also you can do this easier using jQuery.

<div class="row">
<img id="img1" src="image\bannerimages\Career.png" class="img-responsive careerpage">
<img id="img2" src="image\bannerimages\Career-mobile.png" class="img-responsive careerpage mobile">
<h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
...
</div>
var w = window;
var x = w.innerWidth;
if(x<568){
document.getElementsById('img2');
}
else{
document.getElementsById('img1');
}
Not sure without a full syntax, try this way Hope it works)

delete uploaded image

i would like to know how i can make red "X" appear each time an Image appears. The red "X" is for deleting the image that the user chooses their will be a red X on each image. right now the X is just sitting on top of the container and it only shows one time if i click on the X all the images disappear and i don't whant that i want to delete individual images. how can i make this possible? Here is what i have.
<div id="fotos" class="bananas"><img class="modal-content" id="imgdisplay" /></div>
<script>
$(".container5").on("dblclick", ".imgKLIK5", function () {
var self = $(this);
$(self).remove();
$('#file1').val("");
});
var $btn = $("#imgdisplay");
$btn.click(function () {
$("#fotos img:last-child").remove()
$btn.hide();
});
</script>

Assuming you have wrapped your div.bananas inside a parent div with class wrapper you can use .closest('.wrapper') instead of .parent().find().
$('.bananas').click(function(e) {
$(this).closest(".wrapper").remove();
});
img {
width: 200px;
height: 200px;
}
.wrapper {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="fotos" class="bananas">X
<img class="modal-content" src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg" id="imgdisplay" />
</div>
</div>
<div class="wrapper">
<div id="fotos1" class="bananas">X
<img class="modal-content" src="http://i.telegraph.co.uk/multimedia/archive/03598/lightning-10_3598416k.jpg" id="imgdisplay1" />
</div>
</div>