Images won't display in Wordpress template - javascript

At the moment i got an issue where i have images in my asset folder but when i am converting my HTML/CSS/JS template to wordpress some images won't display and some do. The biggest issue i have is that i have to display the image where you land on the website. This is the CSS code:
#hero {
background: url('wp-content/themes/brandingyou/assets/img/iceland.jpg') center center / cover no-repeat;
padding: 40px 0;
color: white;
position: relative;
width: 100%;
height: 100%;
And here is the HTML code:
<section id="hero" class="demo">
<h1><?php bloginfo('name'); ?></h1>
<div class="container">
<h2><?php bloginfo('description'); ?></h2>
</div>
<span></span>Scroll
</section><!-- Hero -->
And this is the current result:
And it should look like this:
There are several more images that have the same problem. Anyone has a clue why it does this?
NOTE: Not all images have this issue
Note 2: I have tried different file formats, didn't help

The problem is you are including the img via CSS, so height 100%, won´t work, use better 100vh (viewport height), and get sure you are indicating the correct source for the image, if you are working in a theme yo don´t have to search the img in wht folder wp content, just use a relative path like ../img/your-image.jpg or something like that

Related

when resize window, how to make image bigger without any stretching horizontally & vertically?

Whenever I resize the window, some spaces are not filled with image I coded to insert. Actually, I tried to handle this many times with several approaches.
Here are some parts of my code.
(I use jquery, jquery-ui, and bootstrap)
HTML
<div id="carouselSection" class="carousel slide" data-ride="carousel">
<!-- Indicators are skipped -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carouselImage">
<div id="black">
<img src="img/carousel_img_opt/slide_001.png">
</div>
</div>
</div>
</div>
CSS
.carouselSection {
height: 100%;
width: 100%;
}
#black {
width:100%;
height:auto;
background: rgba(0, 0, 0, 0.7); /* for darkening */
position:absolute;
top:0;
left:0;
background-image: url('bg_dim.png'); /* for checkered */
background-repeat: repeat;
z-index:10;
}
.carousel-inner .carouselImage img {
/*position:absolute;*/
width: 100%;
height: auto;
top:0;
opacity: 0.5;
background-size: cover;
background-position: center center;
}
I made this function for adjusting carousel part (of course including images) to the window's size.
function resizeCarousel(){
$('#carouselSection').css('height', $(window).height());
$('.carouselImage, #black').css('height', $(window).height());
// $('.carouselImage img').css({'top': 'auto', 'left': 'auto', 'min-width': '100%'});
}
The comment part is problem.
If I change the .carouselImage img's css "min-width' make '100%', and then making window longer (vertically), just #black part is showing without image.
Or I change that img's "min-height" make "100%", and then making window widely (horizontally), #black part is showing without image.
So, I made both height & width 100% when resizing, then image go stretching. (But I don't want that stretching because it's ugly ㅠㅠ)
Does anybody know how to handle this problem?
Actually, I want this kind of effect (main images within carousel slide) in https://www.linefriends.com/.
I tried to copy the html(including js file), css code from that website. But I didn't get any idea from it.
(Actually, it seems like there's a little bit of zooming in/out effect on linefriends' website. But I could not find that effect on the code. I think the effect that I want might not the problem of height or width. But, if you catch how to build linefriends' effect, please let me know.)
Thanks for reading!
If you give your slide container a static height (you can use height: calc(100%);, you can use background-image and background-size: cover; to display an image which does NOT stretch when resized. See code below:
<div class="item active">
<div class="carouselImage" style="background-image: url('img/carousel_img_opt/slide_001.png');>
<div id="black">
</div>
</div>
</div>

HTML Coding not Centering Widget Properly - Please save my sanity

I am working to get an object I retrieved from 100 Widgets centered on a webpage. It's a clock. I am working in TeamSite. The object will not center properly. When I type the HTML coding to center the object the preview mode changes it to being centered, however when I publish the item, the website will not reflect the adjustment "live". It remains left aligned; except in Preview mode where it will remain centered properly.
Here's what I have (it's very simple, so it's making me crazy!):
<div style="width: 50%; margin: 0 auto;">
<script type="text/javascript" src="http://100widgets.com/js_data.php?id=38">
</script>
</div>
Spaces were added to allow text viewing. I've also tried to be very basic including just <center> and </center>. I get the same result. This clock is located: http://100widgets.com/clocks/page/2/ and is called Clock Blue and White.
Can someone please tell me what's wrong with this thing before I go completely insane?! Lol...but for real.
Thanks!
That should center the div element on the page, though it may not center the content inside of it. Here are a few examples of how to center something horizontally.
<style>body {margin:0;} </style>
<div style="width: 50%; margin: 0 auto;">1</div> <!-- centers the element based on the width -->
<div style="text-align:center">2</div> <!-- centers the inline content in the element -->
<div style="position: absolute; left: 50%; transform: translateX(-50%)">3</div> <!-- centers the element and the element is only as wide as the content inside -->
This is a good reference for centering stuff. https://www.w3.org/Style/Examples/007/center.en.html

Text Overlay on Image Hover - Responsive

I am using this tutorial to create an overlay on my images with text:
http://codepen.io/pdelsignore/pen/uqenH
It works great, however I have a responsive website and if I try to enter a % as the width / height of the '.box' the image disappears. It appears it can only be a fixed with (i.e. px) which obviously doesn't scale.
.box {
cursor: pointer;
height: 250px;
position: relative;
overflow: hidden;
width: 400px;
font-family: 'Open Sans', sans-serif;
}
Does anyone have any ideas? Thanks in advance!
Try giving min-width and min-height a try.
min-width: 100%;
min-height: 100%;
In live project usually we use any responsive framework. Like bootstrap or foundation. So I think you could ignore as framework will handle this properly. No need to use any % to make it responsive. For Bootstrap we use
<div class="row">
<div class="col-md-4">
<div class="box">
<img src="http://files.room1design.com/oldcity.jpg"/>
<div class="overbox">
<div class="title overtext">
Walk This Way
</div>
<div class="tagline overtext">
Follow the path of stone, a road towards an ancient past
</div>
</div>
</div> <!-- End box -->
</div> <!-- End Col-4 -->
</div> <!-- End row -->
I believe the dimensions of .box as a percentage would be based on the height of the parent. since no height is specified on the body it has no frame of reference. try adding the following to get percentages working on .box.
html, body {
height:100%;
}
here is an updated codepen with a few other changes to illustrate the use of percentages after giving your body dimension.
http://codepen.io/anon/pen/dPREBE

retina.js not working - Don't know why

I don't have much code to put in, but looking for help in order to save what hair is left on my head...
I'm using retina.js, and it isn't working for any of the images. The #2x images are in the same folder as the smaller ones. One if them isn't exactly twice the size - designer sent me an image that was a pixel or two of - so I won't worry about that one as I assume that once the other images are loaded, this one will work when sized correctly.
I've tried shorthand background:url(foo.jpg).... and background-image:url(foo.jpg), with and without the images in "". I've resigned myself to thinking I'm missing something stupid, and am just not seeing it. Any help would be appreciated!
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/index.js"></script>
<script type="text/javascript" src="../js/retina.js"></script>
HTML:
<ul class="grid" id="movie-grid">
<li class="movie">
<div class="poster"></div>
<h2 class="title">Title</h2>
<p class="desc">TV Movie</p>
</li>
</ul>
and the CSS:
.poster {
/*background:url(../images/comingsoon.jpg) no-repeat left top;*/
background-image:url(../images/comingsoon.jpg);
background-repeat:no-repeat;
background-position:left top;
display:block;
width:204px;
height:137px;
background-size:100%;
}
The problem is that you are trying to use retina.js to change an image within your CSS. I believe that the standard retina.js functionality allows you to change/swap out images within your html code like this:
<header>
<img src="/images/logo.png">
</header>
would change to
<header>
<img src="/images/logo#2x.png">
</header>
In order to get retina.js to swap out images within your stylesheet you will need to download the LESS CSS Mixin provided by the retina.js website. Then follow the steps they outline:
Syntax: .at2x(#path, [optional] #width: auto, [optional] #height: auto);
Steps:
Add the .at2x() mixin from retina.less to your LESS stylesheet
In your stylesheet, call the .at2x() mixin anywhere instead of using background-image
#logo {
.at2x('/images/my_image.png', 200px, 100px);
}
Will compile to:
#logo {
background-image: url('/images/my_image.png');
}
#media all and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url('/images/my_image#2x.png');
background-size: 200px 100px;
}
}
sources:
http://imulus.github.io/retinajs/
http://www.awwwards.com/coding-for-retina-displays-with-retinajs-tutorial.html

Phototagging like in Facebook and Orkut album photos?

Is there a jQuery library or any leads on implementing that photo tagging like in Facebook and Orkut Photo albums?
Thanks
Hmmm, I found that the new version of Img Notes seems to do exactly what you want.
Checkout the Demo. It allows you to easily add tag notes and show them using JQuery. He also depends on the imgAreaSelect jquery plugin for adding notes.
you could try Jcrop or imgAreaSelect.
Not 100% the same behaviour as in Facebook, but with some tweaks, this should e possible.
I didn't find any suitable plugins for this purpose. So I ended up writing myself a small plug-in to mark areas over an image based on the coordinates loaded through an XML file.
The basic code is required is:
<div id="imageholder">
<!-- The main image -->
<img src="<link to image file>" alt="Image">
<!-- The grid tags -->
<div class="gridtag" style="bottom: 100px; left: 106px; height: 41px; width: 41px;"/>
<div class="gridtag" style="bottom: 300px; left: 56px; height: 100px; width: 56px;"/>
<div class="gridtag" ...
</div>
And the basic CSS styling required:
#imageholder{
height:500px;
width:497px;
position:relative;
}
div.gridtag {
border:1px solid #F0F0F0;
display:block;
position:absolute;
z-index:3;
}
In the above the divs with class "gridtags" are added using jQuery through XML or JSON and by binding events on this divs, we can make phototagging similar in Orkut.
PS: This only one side of the phototagging, ie. if we already have the coordinates we can mark on an image and add click events, which is the part actually i wanted. :) You guys has to write code for doing the marking part of the phototagging.
A good and complex example of tag like functionality in facebook is
Talking Pictures, Which is a facebook application.

Categories

Resources