I am using now Johny Demosite template. This theme using a cutter script which resizes all the image automatically in homepage. But the problem is it also increase the file size too. Like I upload a photo 15KB (500x400) then this script will convert it like s250-c (250x250) and make it like 25KB. Is there any way to remove this resizing script.
The code for the resizing script is -
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(e,d){var c=280;var a=true;var b="<data:post.thumbnailUrl/>";if(a==true&&e==""){e=b}image_tag='<img src="'+e.replace("/s72-c/","/s"+c+"-c/")+'" class="postthumb" alt="'+d+'"/>';if(e!=""){return image_tag}else{return""}};
//]]>
</script>
Change the above script as follows -
<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(e,d){var c=280;var a=true;var b="<data:post.firstImageUrl/>";if(a==true&&e==""){e=b}image_tag='<img src="'+e+'" class="postthumb" alt="'+d+'"/>';if(e!=""){return image_tag}else{return""}};
//]]>
</script>
The main difference in this script is that instead of using <data:post.thumbnailUrl/> we are using <data:post.firstImageUrl/> . This new layout tags gets the first image from the post with its original resolution which is set at the time of uploading. Also, the other change is removing .replace("/s72-c/","/s"+c+"-c/") as we don't want to resize the image anymore
Related
How can I access the text "All changes saved" in the dynamically created Ember script below? I use Protractor to create functional test.
<div class="is-muted">
<script id="metamorph-191-start" type="text/x-placeholder"></script>
<script id="metamorph-191-start" type="text/x-placeholder"></script>
All changes saved
<script id="metamorph-191-end" type="text/x-placeholder"></script>
</div>
Thank you in advance for your help!
I ran into a similar issue earlier and solved it in a rather unelegant manner but it does the job, try the following:
//$$('#metamorph-191-start') will select all the elements on your page with ID metamorph-191-start
//.get(1) will get the second element that passes this requirement aka the script with your text 'all changes saved' in it.
//the .getText().then(function(foo)... gets the text from the element and resolves the promise around it.
$$('#metamorph-191-start').get(1).getText().then(function(foo){
console.log(foo);
});
I said this was unelegant since it is quite the bad practice to use the same ID more than once on a single HTML page.
I have a Bootstrap theme from https://wrapbootstrap.com/ that I want to use in my MeteorJS application. The issue is it has script tags like:
<!--[if !lte IE 6]><!-->
<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery.min.js"><\/script>')</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="js/libs/jquery.ui.min.js"><\/script>')</script>
script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></scrip>
<!-- RECOMMENDED: For (IE6 - IE8) CSS3 pseudo-classes and attribute selectors -->
<!--[if lt IE 9]>
<script src="js/include/selectivizr.min.js"></script>
<![endif]-->
<script src="js/libs/jquery.ui.touch-punch.min.js"></script> <!-- REQUIRED: A small hack that enables the use of touch events on mobile -->
which don't work when added to MeteorJS. I know tags don't work, but how would you acoomodate this designed page to MeteorJS?
Later edit:
I added the script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> above. All the above scripts are added in the <body>. The google.maps library is used in lib/main.js and it doesn't work with MeteorJS because it raises ReferenceError. Outside of Meteor it works fine.
Any ideas on how to add that Google Maps script from the Bootstrap Template?
Later edit:
The Bootstrap template has a lib/main.js file which is the last javascript file imported. Nevertheless, when I add it to Meteor, it seems to be run, but its effects are not seen in UI. For example, it executes this line $(".chzn-select").select2(); but only when I execute it from the Console I can see the UI changes. This file is loaded last by Meteor. I also tried with
function load_scripts() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "lib/main.js";
document.body.appendChild(script);
}
if (Meteor.is_client) {
window.onload = load_scripts;
}
with no success.
These external themes might not be compatible with the default bootstrap included with meteor, so you should remove meteor's bootstrap package:
Remove default bootstrap:
meteor remove bootstrap
Add your theme:
Place your css files in your project's css directory, say /client/css
Place the themes javascript files in /client/lib
Don't worry about the script tags, or linking any of them or anything, meteor should take care of all of that.
Also
Meteor includes JQuery by default so you don't have to worry about including it in your project. To add jquery if for some odd reason you're meteor project might not have it use:
meteor add jquery
External Apis
e.g FB/Google Mapis API/Tracking scripts. Add them in the <head> section of your html file as normal.
Hopefully you find all of this cool!!
I am using the twitter style endless pagination for one of my projects. the problem is that my ajax logic works just fine for my first 10 posts (so the first page) but when I go down and Endless Pagination loads more posts, my ajax stops working for them. I am not sure my.
Thats how I've been stacking my js
<script src="/site_media/endless_pagination/endless.js" type="text/javascript" charset="utf-8"></script>
<script src="/site_media/endless_pagination/endless_on_scroll.js" type="text/javascript" charset="utf-8"></script>
<script src="/site_media/bootstrap/js/bootstrap.min.js"></script>
<script src="http:/site_media/bootstrap/js/bootstrap-collapse.js"></script>
<script src="site_media/bootstrap/js/bootstrap-tooltip.js"></script>
so for example tooltip works just fine for my first 10 posts, but then when pagination loads the next posts, tooltip doesn't seem to work for them.
I finally figured out what the problem was, I was suposed to use .live(). This Attaches an event handler for all elements which match the current selector, now and in the future. So when new posts load, my jQuery logic applies to them as well.
I'm running the developer's Django server while writing a simple view and it seems whenever I request a page, the console shows that there are 2 GETs for the same URL. What would cause this happen? I'm not using any redirects, so I don't see how a 2nd request would be made?
EDIT: It appears to be caused by the template. Changing to a blank html file for a template resolved the issue. The question is why? I have multiple {% if %} {% endif %} sections, with no elses. Could that be an issue?
It also could be Firefox following a WC3 directive under which it's supposed to dual load if certain tags come empty or broken, for example, a without a src="" etc. That being said, I saved off the rendered HTML on receipt and moved it into a static file, where I added the same headers as the real checkout and a small DB log of all accesses.
I just stumble upon this problem and fixed it removing my img wit src=""
Please confirm, if Django is redirecting after appending slash to your url. Its the property APPEND_SLASH in your settings.py controls that.
The second request is probably caused by a mis-configured asset link - a script, style or img tag which is empty or omits the initial / and is therefore re-requesting the page.
It could be your shortcut/favicon
Do you have link rel="shortcut icon" in your page template? Comment it out to see if it removes the second request
In my case : I have the same javascript code in 2 files : one in the base template and the same one in another template. As I use ajax to not reload all the page I got the call 2x, then 4x, and 8x, ...
The solution is the use the javascript code only in mybase.html
Hereafter my js code :
<script type="text/javascript">
// Code jQuery Ici
$(document).ready(function(){
// GET
$(".ajax_onglet_get").click(function(e){
var lien = $(this).attr('href');
$('#zone_travail').fadeOut('fast', function(){
$('#zone_travail').load(lien, function() {
$('#zone_travail').fadeIn('fast');
});
});
e.preventDefault()
});
});
I'm creating a set of ColdFusion custom tags designed to make reusing certain layout elements easy. I'll be using them in a manner similar to the following:
<cfimport prefix="layout" taglib="commonfunctions/layouttags">
<layout:fadingbox>
This text will fade in and out
</layout:fadingbox>
<layout:stockticker>
This text will scroll across the screen
</layout>
In order for the code these custom tags generates to work, a JavaScript file needs to be linked into the page like so:
<script src="commonfunctions/layouttags/enablingscript.js" type="text/javascript"></script>
I'd prefer to include the script from inside the custom tags, instead of making the user include it himself. The issue is that the JavaScript file should only be included once per page. After the first time one of these custom tags is used, I'd like subsequent calls to the same tag on the same page to avoid repeating the <script> tag. It's occurred to me that I could do something like this:
<cfif NOT isDefined("Caller.LayoutTagInitialized")>
<script src="commonfunctions/layouttags/enablingscript.js" type="text/javascript"></script>
</cfif>
<cfset Caller.LayoutTagInitialized = 1>
...but it seems inelegant.
I wonder, is there a better way?
How would you implement this?
Edit - Clarification:
In case what I wrote above didn't make sense, here's a more detailed example:
If I have a custom tag like this:
<cfif ThisTag.ExecutionMode EQ "start">
<script src="commonfunctions/layouttags/enablingscript.js" type="text/javascript"></script>
<div class="mytag">
<cfelse>
</div>
</cfif>
...and I have CFML markup calling the tag like like this:
<layout:mytag>
One
</layout:mytag>
<layout:mytag>
Two
</layout:mytag>
<layout:mytag>
Three
</layout:mytag>
...I want HTML like the following to be generated:
<!-- Script included only the first time the tag is called -->
<script src="commonfunctions/layouttags/enablingscript.js" type="text/javascript"></script>
<div class="mytag">
One
</div>
<!-- No <script> tag on the second call -->
<div class="mytag">
Two
</div>
<!-- No <script> tag on the third call -->
<div class="mytag">
Three
</div>
Use the Request scope.
Your solution isn't far off.
Sam's right that the executionmode is what you want to use when you're wanting something to come out in the start or end mode of the tag, which is part of what you want.
But then you say you want that script tag put out in the start mode of only the first tag used on the page.
That's where you would use Peter's suggestion of the request scope. Unlike the default (or "variables") scope, the request scope is shared among all custom tags on a given request. You proposed using the caller scope, and that could work, too, unless the caller was another custom tag, in which case the caller scope would only be the local scope in the custom tag. The request scope (which has been around since about CF 4.01) is your best choice.
In that case, your proposed solution was close: in the custom tag, in the start mode, programatically check if you have already created a tracking variable in the request scope when you put the script tag out the first time. If not, put out the script tag and create the tracking variable.
Other than changing your code from using caller to request, I'd also suggest you'd want to put the CFSET inside the IF. No need to execute it again for when the IF test fails.
Custom tags have a built in scope called thistag.
This code will work:
<cfif thisTag.ExecutionMode eq "start">