So I want to use Lazysizes (lazy loading responsive images). Included in my Grunt stack is Responsive Images Extender, which outputs responsive image code (srcset) from simply including an "img" tag with a "src" attribute. Lazysizes requires the "data-srcset" attribute in replace of the "srcset" attribute, however. I added a script to my page that changes the "srcset" attributes to "data-srcset" attributes, but this isn't ideal as images are are already downloaded at runtime. It would be ideal if I could change the tags with Grunt, as there is no advantage in changing them live.
This seems like a very common thing, but I cannot find a good way to do it. String replace doesn't seem like an ideal solution, since it can cause problems if I ever use "srcset=" in my code.
I gave the grunt-responsive-images-extender a major makeover and added the possibility to change the attribute name of srcset to anything you want (data-srcset in your case) via the srcsetAttributeName option.
There is a grunt tans called dom_munger. With dom_munger you can change HTML attributes and do a lot of interesting stuff; however I cannot find a way to change an attribute name to another thing. Perhapse you can have a better luck checking it.
Related
We are using Quill for basic formatting (Bold, Italic, Link, BlockQuote). However Quill.min.js is the largest file that we've in our page.
We are looking to cut the size of the file by including the necessary modules only (for e.g. remove Syntax and Formula).
What is the way to get them removed? Do we need to setup the environment as described in Development page? Would it be possible to comment or remove the codes in quill.js? Appreciate any guidance
You can use quill.core.js and quill.core.css instead which will not have extra modules like Syntax and Formula. These files are not minified for you however. If you want to customize further then you will have to build Quill yourself.
So iv been reading about peoples problems with tiny MCE "messing up" code. I understand it isn't, but I have a very minor problem that is become a major problem.
Im trying to add a simple object tag to one of my CMS pages. I need the object type to be "text/html" but whenever I save the page it converts this to "application/x-shockwave-flash"
I don't want to turn off the tinyMCE cleanup option as by the sounds of things this is a really bad thing to do.
So is there a way to stop it changing just the type attribute?
I have tried adding the code to a CMS widget and adding the widget to the page but this get the same altered result.
This thread (Object tag is not working) seems similar, but simply changing the type isn't working for me as it is automatically changing back to flash upon save.
The url i am trying to load looks like this...
(http://www.domain.com/animations/embed/one/o-t-t-d?player_width=100%&player_height=100%) I have been told that this will return flash if it is available or html if not.
Im assuming that because i'm saving the page on a PC with flash available its recognising and changing the type.
Any help appreciated.
You can edit the file js/mage/adminhtml/wysiwyg/tiny_mce/setup.js to make this happen.
Look for the settings array (around line 100). Add 'extended_valid_elements' there, like this;
var settings = {
...
extended_valid_elements: 'object[type]',
...
};
This way, TinyMCE will know the type attribute is valid and won't change it.
Please tell me how to change the image source in magento dynamically.say I want that after every 10 seconds I want to change the source of image.
now I have define a static block which contain image src with id banner..
now my question is where should I define for changing the image source and how to change the source.
I would suggest looking into a jQuery based image rotator. There are some simple examples out there such as this one:
http://burnmind.com/tutorials/how-to-create-a-simple-automatic-image-rotator-using-jquery
Also be careful not to cause conflicts with jQuery and Prototype. You can use this method to avoid this from happening.
Refer to these links: They are free extensions which may serve your purpose.
http://expertmagentodevelopers.wordpress.com/2012/04/24/download-magento-banner-slider-extensions-free/
http://www.magentocommerce.com/magento-connect/banner-slider-3912.html
http://www.magentocommerce.com/magento-connect/Interakting.com/extension/2255/interakting-slider#overview
I am working on Joomla 1.5 right now and was wondering if there is a way to figure out, from the UI, on which module this is part of ? Eg, there is a picture viewer on the home page and I want to know which module is triggering it.
I do it the hard way no, where I goto all modules and check if each had anything to do with it. But was wondering if there is an easier, faster way.
Thank you :)
In Joomla 1.5 you can simply add ?tp=1 to the url to force the system to show you the template positions. You should just about be able to make out the name of the position in question. From there go to the module manager and filter the list by position.
It shouldn't be too difficult to figure out - the module will have rotator, slideshow or similar in its name/type.
It is probably set to show on the home menu item only too.
In my experience, this is an issue with most CMS - Drupal, Wordpress, and Joomla included. And it can be very frustrating. My approach is normally:
Search the module listing for something likely. So, in your example, I'd search for 'picture', 'viewer' 'gallery', etc. and, hopefully, a likely-looking modue would turn up in the listing. Usually, viewing its settings screen makes it obvious whether that module is the relevant one or not.
If that fails, I usually look at the source (easiest with firebug), and identify something that is likely to be fairly unique - e.g. a class name or a specific attribute in the markup. Once I have that, I resort to find/grep on the command line to identify the origin.
If you find yourself with a lot of extensions, and this becomes a regular problem, you could think about modifying templates to include a comment that identifies their module.
Is there any way to fetch the raw contents of a CSS file?
Lets imagine that I wanted to fetch any vendor-specific css properties from a CSS file. I would need to somehow grab the CSS contents and parse them accordingly. Or I could just use the DOM to access the rules of a CSS file.
The problem is that in while using the DOM, mostly all browsers (except for <= IE8) tend to strip out all of the custom properties that do not relate to their browser engine (webkit strips out -moz and -o and -ms). Therefore it wouldn't be possible to fetch the CSS contents.
If I were to use AJAX to fetch the contents of the CSS file, then if that CSS file hosted on another domain, then the same origin policy would break and the CSS contents could not be fetched.
If one were to use a cross-domain AJAX approach then there would only be a JSONP solution which wouldn't work since we're not parsing any javascript code (therefore there is no callback).
Is there any other way to fetch the contents?
If a CSS file is on the same domain as the page you're running the script on, you can just use AJAX to pull in the CSS file:
$.get("/path/to/the.css", function(data) {/* ... */});
If not, you could try using Yahoo! Pipes as a proxy and get the CSS with JSONp.
As for parsing, you can check out Sizzle to parse the selectors. You could also use the CSS grammar (posted in the CSS standards) to use a JS lex/yacc parser to parse out the document. I'll leave you to get creative with that.
Good luck!
No, you've pretty much covered it. Browsers other than IE strip out unknown rules from their object models both in the style/currentStyle objects and in the document.styleSheets interface. (It's usually IE6-7 whose CSS you want to patch up, of course.)
If you wanted to suck a stylesheet from an external domain you would need proxy-assisted-AJAX. And parsing CSS from would be a big nasty job, especially if you needed to replicate browser quirks. I would strenuously avoid any such thing!
JSONP is still a valid solution, though it would hurt the eyes somewhat. Basically, in addition to the callback padding, you would have to add one JSON property "padding" and pass the CSS as a value. For example, a call to a script, http://myserver.com/file2jsonp/?jsonp=myCallback&textwrapper=cssContents could return this:
myCallback("cssContents":"body{text-decoration:blink;}\nb{text-size:10em;}");
You'd have to text-encode all line breaks and wrap the contents of the CSS file in quotes (after encoding any existing quotes). I had to resort to doing this with a Twitter XML feed. It felt like such a horrible idea when I built it, but it did its job.