How to serve scaled images in blogger - javascript

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>

Related

get the meta data from an advert iframe

I want to put advertising in my site in a similar way as Google Display. I'm using iframe to insert the ads but I'm having problems with the size of it.
I don't know why the iframe are sized by default in 300 x 150 no matter the source size.
The adverts have a meta line with the size of it.
<meta name="ad.size" content="width=300,height=250">
I want to take this information and change the iframe size with javascript. I tryed:
$('#myiframe').load(function() {
var element = document.querySelector('meta[name="ad.size"]')['content‌​'];
});
and the result is empty.
Please your help.
B/R
ok, I finally got it:
var adif= document.getElementById('myiframe');
var x= adif.contentWindow.document.getElementsByName("ad.size")[0].content;
I hope it helps someone else.

auto resize the images within the edit area

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>

How to set full page background Image of a div that changes on page load

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

Resize EpicEditor based on the content put within it

I'm using epiceditor within my site, and I am populating it with markdown embedded on the page by the server. Currently when epiceditor displays, it has a very small default height, with scroll bars to handle viewing the entire content. I can manually set the height of the div, and for now that's the best I've been able to do (I've set it to something reasonably large: 800px). However I would like its height to always be enough to fit the entire content without scroll-bars. Essentially something like overflow:visible.
Here's the relevant portions so far
<html>
<head>
<script src="/assets/javascripts/epiceditor/js/epiceditor.min.js" type="text/javascript"></script>
<script id="postMarkdown" type="text/markdown" data-postId="1">
#Markdowns in here
...
</script>
<style>
#epiceditor{
height: 800px;
}
</style>
<script src="/assets/javascripts/thrown/posts/edit.js" type="text/javascript"></script>
</head>
<body>
<div id="epiceditor">
</div>
</body>
</html>
And heres the edit.js source (its compiled from coffescript)
$ ->
postMarkdown = $("#postMarkdown").first()
options =
basePath : '../../assets/javascripts/epiceditor'
editor = new EpicEditor(options).load()
postId = postMarkdown.data('postId')
markdown = postMarkdown.html()
editor.importFile('posts/'+postId,markdown);
editor.reflow();
I was hoping reflow might expand the height after the content was inserted, however no such luck. However If I resize the div and call reflow, It does resize properly.
I've inspected the markup it creates in hopes I could determine the height and resize its container and tell it to reflow. However it seems it contains multiple iframes, and at a glance I didn't expect that to be a quick change, or if it would even be possible. However I'd welcome any solution.
I also understand that if I size its container to the right height, epiceditor will fill the proper space. However I want its height to be the amount needed to render, such that the editor takes up the right space in the rest of the sites design. Therefore if there something I can set in EpicEditor to have it not overflow in the manner it is, or a way to determine the height after it loads, I'm set.
Thanks for any help.
I'm the guy who made EpicEditor, here's a solution for you:
var editor = new EpicEditor({
basePath: 'https://raw.github.com/OscarGodson/EpicEditor/develop/epiceditor'
});
var updateEditorHeight = function () {
editorHeight = $(editor.getElement('editor').body).height();
// +20 for padding
$('#epiceditor').height(editorHeight + 20);
editor.reflow();
}
editor.load(function (){
updateEditorHeight();
});
editor.on('update', function () {
// You should probably put a check here so it doesn't
// run for every update, but just on update, AND if the
// element's height is different then before.
updateEditorHeight();
});
Also, in the CSS I added a overflow: hidden to epiceditor's wrapper so the scrollbars don't appear as it grows.
DEMO: http://jsbin.com/eyidey/1/
DEMO CODE: http://jsbin.com/eyidey/1/edit
UPDATE
As of EpicEditor 0.2.2 autogrow is built in. Just turn on the autogrow option.

AdSense Ads not showing sometimes

It seems ads somehow conflict which each other. Normally I have 2 ads displaying at the same time with no issues, but on search pages I have 3 ads and most of the time only the first works.
http://chusmix.com/?s=Buenos+Aires
I simply copy pasted the code in the three places:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7097762525948790";
/* Chusmix 728x90 Grafico */
google_ad_slot = "9872841053";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
The other ads code is basically the same save with different width, height and name. Did I do something wrong? Any idea how to fix it?
Thanks
On one of those ads you're inserting some HTML in between the JavaScript, don't do that. Always wrap HTML around the complete ad code.
Also, realize that not all ad units may be filled if there aren't enough ads. That's why you need to use the alternate ad URL feature of AdSense to display something else in its place in those cases.

Categories

Resources