I've tested "all" the answers i found in the internet on resizing the pictures within the blogger edit post. Some of them just resize the image dimension but not the actual resolution of the picture, while some of them are actually on that purpose I was looking for using javascript but...
It seems not to work.
so I was thinking maybe because the blogger updated something that it might not work anymore?
for example this solution > JavaScript for resizing photos in Blogger posts
and its posted in 2012.
so maybe I miss something out?
Please help me, thank you.
This code will replace your image src size /s72-c/ with newSize.
<script>
//<![CDATA[
var newSize = 500; // this is the new image size, you can change this
$("your img selector").each(function() {
$(this).attr("src", $(this).attr("src").replace("/s72-c/", "/s"+newSize+"/"));
});
//]]>
</script>
Related
When I check my blog in Gtmetrix it shows 0 value for "serve scaled images". I don't know how to show scaled images in blogger. I tried many codes from fellow bloggers but still, it shows 0 value in "serve scaled images".
My link is here.
Should I keep the same thumbnail size for homepage and post pages or anything else?
I don't know how to solve this matter.
The code used for resizing the images is as follows -
<script type='text/javascript'>
//<![CDATA[
function snippetimage(a,e){var g=416,i=312;return image_tag='<img src="'+a.replace("/s72-c/","/w"+g+"-h"+i+"-p/")+'" alt="'+e+'"/>',yimage_tag='<img src="'+a.replace("default","0")+'" alt="'+e+'"/>',-1!=a.indexOf("img.youtube.com")?yimage_tag:""!=a?image_tag:""}
//]]>
</script>
Please help!
This issue is happening because a larger than required image is being loaded by the template. You will have to change the resolution of the image (from the current 416x312 px to 183x200 px, as mentioned by the GTmetrix report shown in the screenshot below ). You will have to change the above code as follows -
<script type='text/javascript'>
//<![CDATA[
function snippetimage(a,e){var g=183,i=200;return image_tag='<img src="'+a.replace("/s72-c/","/w"+g+"-h"+i+"-p/")+'" alt="'+e+'"/>',yimage_tag='<img src="'+a.replace("default","0")+'" alt="'+e+'"/>',-1!=a.indexOf("img.youtube.com")?yimage_tag:""!=a?image_tag:""}
//]]>
</script>
I tried but couldn't get it done.
I want the background of a div to cover full page according to the device width and it should change each time when page is load or refresh on same system.
I have tried many codes but none of them works for me.
Now the script that i am using is:
<script type="text/javascript">
window.onload=function(){
var thediv=document.getElementById("image");
var imgarray = new Array("../bgimages/1.png", "../bgimages/2.png", "../bgimages/3.png");
var spot =Math.floor(Math.random()* imgarry.length);
thediv.style.background="url("+imgarray[spot]+")";
}
</script>
The HTML code is as follows
<html>
<body>
<div id="image">
<div class = "container">
</div> <!--container ends-->
</div>
I want #image div background to cover full page.
This is the CSS i am using:
#image
{
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
Here is the link of the page: http://sahibfreelancer.hostzi.com/
No background image loading.
Please if i miss anything you can let me know. I hope i gave enough details. I am trying this from last one day.
Will be looking forward to your responses.
I spotted a typo :
var spot =Math.floor(Math.random()* imgarry.length);
... should be ...
var spot =Math.floor(Math.random()* imgarray.length);
... shouldn't it ? Does it work if you edit that ?
Since you have jQuery in the tags, I'm going to assume you're using jQuery.
But that being said you're not using the $ syntax in your code examples.
Here's how you can set the background with jQuery:
$('#image').css('background-image', 'url(' + imageUrl + ')');
Edit:
Looks like Ashugeo got it. Next time check the console for the output of your script, it would have been throwing an exception.
Also, if you are using jQuery, there's nicer ways to do what you're doing.
To make the image occupy the entire screen you can specify the viewport height in css like this #image {height:100vh}
Now for the javascript code everything looks fine to me if the images are in the specified url it should load them randomly. You can see a example here.
the only thing i've done is load the images over the web since i cant access them locally on fiddle. A different Image is loading every time.
As for the page load i've used a immediately invoking function which will fire when the contents are loaded but you can use onload as well.
I think its the path of your images.
I pasteD your code and change the url and it works http://jsbin.com/pozadujeca/edit?js,console,output
I've been looking around the web for an answer for a couple of hours and cannot find anything so I'm hoping someone can help me.
I want to take the height of a wrapper div who's class is movie and apply it to an inner div who's class is movie-center. How can I do this using JS or jQuery?
I am a newbie when it comes to JS, so I would really appreciate if you could lay everything out for me (including any HTML needed).
Thank you!
EDIT 1: Maybe if I am explaining what I am doing people will have a better understanding. I am making a responsive WordPress theme. As the width of the browser is smaller, the movie widths are smaller. I want the overlay title and graphic to stay in the center. I tried doing this with CSS and it cannot be done fully unless I know the exact height (which I won't because of resizing).
EDIT 2: here is the browser's rendered html code:
<article id="movie-97" class="post-97 movie type-movie status-publish hentry"><a href="http://localhost:8888/movies/hard-truth-levity-hope">
<div class="movie-center">
<div class="movie-overlay">
<div class="movie-play"></div>
<h2 class="movie-title">Hard Truth, Levity and Hope</h2>
</div> <!-- end .movie-overlay -->
</div> <!-- end .movie-center -->
<div class="movie-thumb"><img width="480" height="270" src="http://localhost:8888/wp-content/uploads/2014/03/truth-levity-hope.jpg" class="attachment-movie-thumb wp-post-image" alt="Hard Truth, Levity and Hope" /></div>
EDIT 3: Here's a Pastebin for my website. Note: it has been stripped down to only show the essential parts of the site.
What you've done is the correct way. Make sure you've loaded jQuery properly and try to wrap your code inside DOM ready handler $(document).ready(function() {...}); or shorter form $(function() {...});
$(function() {
$('.movie').each(function() {
var h = $(this).height();
$(this).find('.movie-center').height(h);
});
});
Edit: Since you're using Wordpress, there's probably a conflict happen here, try to use:
jQuery(document).ready(function($) {
$('window').resize(function() {
$('.movie').each(function() {
var h = $(this).height();
$(this).find('.movie-center').height(h);
});
}).resize();
});
Please try this :
/* Get height of .movie thumb preview */
jQuery(document).ready(function($) {
$('.movie').each(function() {
var h = $(this).height();
console.log(h);
$(this).find('.movie-center').first().css('height',h);
console.log($(this).find('.movie-center').first().height())
});
});
Connor,
This will get you what you're looking for:
jQuery(document).ready(function($) {
$('.movie').each(function() {
var h = $(this).height();
$(this).find('.movie-center').height(h);
});
});
A quick explanation. You'll notice that jQuery's .height() function is called twice. First, without any params and then with h passed in.
Pull up your JS console (cmd+opt+j if you're using Chrome) to see how this actually works.
The question at the top of this page has an id of #question-header, so if you enter this in the console $('#question-header').height() you'll see that it returns 36. That's because that element is 36 pixels tall.
So, calling .height without any params will return the height of the selected element. But, we can set the height by passing in a number. Try this by pasting this in to the JS console:
$('#question-header').height(1000)
The header is now 1000px tall!
The third line of the code basically says, "Hey, within this particular instance of the .movie article, find the .movie-center element and set the height.
So, there you go. Some working code and hopefully an explanation as to exactly why/how to use it in the future.
I am new to javascript, but I am currently using javascript in my head tag that changes images randomly on page refresh. This has been working great. The javascript can be seen below.
<script type="text/javascript">
function changeImg(imgNumber) {
var myImages = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
var imgShown = document.body.style.backgroundImage;
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;
Now I want to take it one step further and make the images responsive. I've tried a number of different tags via media queries, but nothing seems to work 100%. This particular page has a top section with a height of 310px, which is also where the images are displayed - they also have a height of 310px. Is this something I can do with CSS or CSS3? Or will I need to add additional javascript?
Thanks for the help in advance... my brain hurts!
I tried to create a code showing a draggable div on a random position.
Page background picture is set to fit the size, this is the only thing almost quite working also with the fullscreen window function showing on clicking the links in the div.
I guess I'm wrong on something (some syntax probably..) but can't find where it fails.
I show the lines on shrib, please open it: SHRIB notepad, i'm sure this would be easy to spot the mistakes for some of your fresh eyes:
thanks for your help!
J.
Your each function needs to be inside your document ready function.
<script type="text/javascript">
$(document).ready(function() {
$(".draggable").draggable();
$('.draggable').each(function(i,el){
var tLeft = Math.floor(Math.random()*500),
tTop = Math.floor(Math.random()*500);
$(el).css({position:'absolute', left: tLeft, top: tTop});
});
});
</script>