Emphasis on specific photo here.
I'm aware of all the Instagram plugins out there, and the Instagram API, however I'm trying to figure out a way to display a single specific photo from Instagram. Not by tag, or by username, but preferably from the Instagram URL, or even with a photo ID.
I want something similar to this: (where the Instagram photo covers the background of the div)
<div class="instagram-photo"
style="background-image:URL(*instagram_photo_url_here*);
background-size:cover">
</div>
I'm happy to link to the photo for photo credit and all that.
Is this possible? I've searched for hours and nothing comes up, I've got to be overlooking something.
Took me some time to come up with an answer, Instagram provides an easy to get the media directly using Media redirect, by adding /media/?size={size} to end of any photo permalink
Desired size of the resulting media. Supported values are t
(thumbnail), m (medium), l (large). Defaults to m.
Examples;
https://www.instagram.com/p/8l2vIrhQQ_/media/?size=l
https://www.instagram.com/p/7TDiYJBQdf/media/?size=m
https://www.instagram.com/p/cn5KZWmJp1/media/?size=t
And if you're lasy or want bulk changing at once, I wrote a jQuery snippet for this; Demo
Here's your final HTML for your attempt
body {
padding:10px;
}
.instagram-photo {
display:block;
margin-bottom:15px;
background:#ffffff;
height:500px;
border:2px solid #ddd;
}
<div class="instagram-photo" style="background-image: url(https://instagram.com/p/-FP1PjBQRd/media/?size=l); background-size: cover;"></div>
<div class="instagram-photo" style="background-image: url(https://instagram.com/p/8l2vIrhQQ_/media/?size=l); background-size: cover;"></div>
<div class="instagram-photo" style="background-image: url(https://instagram.com/p/-XNiICnxXO/media/?size=l); background-size: cover;"></div>
<div class="instagram-photo" style="background-image: url(https://instagram.com/p/cn5KZWmJp1/media/?size=l); background-size: cover;"></div>
<div class="instagram-photo" style="background-image: url(https://instagram.com/p/7TDiYJBQdf/media/?size=l); background-size: cover;"></div>
Related
I'm trying to make a website with Dreamweaver and Visual Studio.
The problem is when I use background or backgrouand-image in CSS, the image doesn't appear.
Here is the code:
CSS
/Showcase/
.showcase{
min-height: 400px;
background-image:url("../Take2/assets/bg.jpg") no-repeat -400px;
text-align: center;
color: aqua;
}
Html:
<section class="showcase">
<div class="container-fluid">
<h1>Rent a <span>Ring Roamer</span></h1>
<p>Tired of the same old photo booth?<br>
Let our Ring Roamer, Roamer attendant come to you on the Dance Floor or at their tables!<br>
Our Ring Roamer will capture photos of your guests, photos get shared via social media.<br>
The Ring Roamer is awesome because it is on the GO!<br>
The Ring Roamer Selfie Booth has many fun features including Boomerang videos, animated GIFs, and virtual filters.<br>
Your guests will be able to share their experience instantly.</p>
</div>
</section>
The reason behind this is because you are using no-repeat -400px
When you remove the no-repeat part, the image will successfully appear.
Like this: background-image: url("../Take2/assets/bg.jpg")
Hope it helps.
I'm implementing a second image on hover in a list. This is very common for example in list views of products. I have two ideas for how to do this:
Either put two images on top of each other like this
<div class="wrapper">
<img src="1.jpg" />
<img src="2.jpg" />
<div>
Then hide one image and when hovering the wrapper I will show it with css.
Or I would make one div:
<div class="container" />
and then use inline css to set the background images on .container.
I could also do something with javascript of course.
How, if at all, would these solutions affect performance on hover and page-loading time? Is there an even better solution? The site is built in react.
Since you are using react, you could simply manage the visibility of that second image via the state.
But if you only have two images and don't need any kind of cycling of images, using css should be the solution with the best performance.
Use your current setup like this:
<div class="wrapper">
<img src="1.jpg" />
<img src="2.jpg" />
<div>
And put the first image ontop of the second one. Then just hide the first element on hover.
The only impact this has on performance/loading time is, that you would fetch two images per item on page load.
Using react instead, the second image would not be loaded until you render it into the DOM (But if the image takes some time to load, it wont look that smooth).
However, native css transitions are much more efficient than solving this with react. At least for this small usecase.
If you however want to solve it with react, I would suggest trying your backgroundImage approach. Just keep track of the hover state in your component and switch the background image accordingly.
I think, the easiest way would be:
.sample {
background: url(http://placehold.it/200?text=First) center/cover no-repeat;
height: 200px;
width: 200px;
}
.sample:hover {
background-image: url(http://placehold.it/200?text=Second);
}
<div class="sample"></div>
And with image paths inlined:
.sample {
background: url() center/cover no-repeat;
height: 200px;
width: 200px;
}
.sample:hover img {
opacity: 0;
}
<div class="sample" style="background-image: url('http://placehold.it/200?text=Second')">
<img src="http://placehold.it/200?text=First" />
</div>
I have an application that is querying the Spotify API which returns some names and images.
I am listing all of these out on my page inside cards/panels like so:
<div class="col-md-4" v-if="type == 'tracks'" v-for="(track, index) in tracks">
<div class="card">
<div class="header bg-red">
<h2 class="nameHeading">
#{{ track.name }} <small>#{{ track.artists[0].name }}</small>
</h2>
<p class="header-dropdown m-r--5">#{{ index + 1 }}</p>
</div>
<div class="body">
<i :style="{ 'background-image': `url(${track.album.images[1].url})` }" :alt="track.name" class="bg-image"></i>
</div>
</div>
</div>
The images returned can be of varying sizes and dimensions and so my bg-image class helps render these consistently on the page:
.bg-image {
background-size: cover;
display: block;
width: 100%;
height: 325px;
background-position: center;
}
This works perfectly on desktops:
However the cards/panels get stretched when viewing on smaller screens:
Is there a way I can prevent this from happening and just scale the image down to keep it consistent with what you see on the desktop and to keep the panel in roughly the same shape?
My CSS skills are really quite basic, and so I have no clue where to start when it comes to something like this.
can you try this
.bg-image {
width:100%;
float:left;
background:url('http://media02.hongkiat.com/ww-flower-wallpapers/dandelion.jpg');
height:600px;
background-size:100% auto;
}
Setting background-size: 100% was definitely a step in the right direction. The only issue was that it then meant the image repeated above and below to fill in the rest of the height set by the .bg-image class.
Setting background-repeat: no-repeat solved this, but still left the blank space above and below.
Using some jquery $('.bg-image').css('height', $('.bg-image').width()); I was able to resize the height of the <i> tag appropriately - the issue I ran in to was that because I am using Vue, the cards weren't visible in the DOM straight after my API request.
To allow v-for to render these and then run the jQuery, I simply added this into my Vue method:
this.$nextTick(function()
{
$('.bg-image').css('height', $('.bg-image').width());
});
This now resizes appropriately on desktop and mobile devices.
sorry if my title is a bit misleading but didn't know how to word/phrase it.
Currently, I have href'd images that go to various social networks. For example, by clicking on the facebook icon, it goes to my facebook. It is layed out like this:
<div class="row">
<center>
<div class="span2">
<img src="assets/img/icons/fbwhitebig.png" width="64" height="64"></img>
</div>
Is there a way to make this a "class" if that makes sense? So I can get the same effect by doing something like
<div class="span2">
</div>
and then in the CSS have this:
.facebookbutton {
width:64px;
height64px;
background: url(assets/img/snicons/fbwhitebig.png) no-repeat;
}
Sorry if this is a ridiculous post, I'm still learning haha!
Thanks :)
If you fix the typos (the missing opening quote after href= and missing colon after height), and add display: block the code you wrote works fine.
http://jsfiddle.net/oudL3ovz/1/
.facebookbutton {
width:64px;
height:64px;
background: url("http://s10.postimg.org/l40wid7mt/facebook_logo_64px.png") no-repeat;
display:block;
}
HTML
<div class="span2">
</div>
You may want to use display: inline-block;.
I want an effect where when a user hovers over a certain book image (see below), a checkmark box will pop up to indicate that it will be selected upon clicking. Eventually, I want a person to be able to press alt (cmd on mac) to select multiple books.
Here is the HTML:
<div class="container">
<div class="wrapper">
<div class="upload_div">
<div class="upld_div1">
<ul>
<li>
<div class="book_div"></div>
<div class="book_shdw"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
Here is the current CSS:
.book_div {
background-image:url(../img/book_img.png);
background-size: 67.9px 105px;
border:1px solid #bfc1c4;
width:67.9px;
height:105px;
text-align:center;
margin: auto;
}
.book_div:hover{
cursor:pointer;
background-image: url(../img/book_img.png),
url(../img/check.png);
background-position: relative;
}
I can't for my life figure out how to get another image to go on top of the other upon hover. There are a lot of explanations on SO and other forums on how to get a HTML to combine with a CSS background-image as well as how to change one image into another, but not many explanations on how to get one on the other. Please also note that the check.png should be placed in the top right corner so that it's outside of the div. Please offer any insight! Thanks.
EDIT:
Thanks for the prompt reply Mathias, that was a little typo. I implemented multiple bg-images in the .book_div:hover css but was still unable. When I do that, the cursor changes upon hover, but the second image does not pop up at all. (I've edited the syntax now and will edit these notes in)
You should put the top image first when you declare multiple background images.
I find this article great for explaining the stacking order of background images: http://css-tricks.com/stacking-order-of-multiple-backgrounds/
Hope this helps!
DEMO
.book_div:hover{
cursor:pointer;
background-image: url(./top_image.png), url(./bottom_image.svg);
}