default userpic

How to inject links for custom JavaScript/CSS into generated HTML

Vote 0 Votes

Hi!

I'm currently porting Wordpress plug-in to Movable Type 4 and I need
a way to inject links to JavaScript/CSS files into published HTML
<head> from plug-in without user's assistance. Within Wordpress this
is done with call to 'wp_enqueue_script()' and 'wp_register_style()'
functions.

I've tried two approaches to this problem and both from within
'build_page' callback. First method is simple regex substitution:

${$args{'Content'}} = s/(.*)<\/head>(.*)/$1$javascript<\/head>$2/i;

This works but this methods seems crude and unreliable for me - we
can't be sure that matching </head> tag is real one (it can be
within comments) or if $args{'Content'} is HTML at all.

Second approach is modifying $args{'Template'} by adding necessary
JavaScript/CSS into <mt:SetVarBlock name="html_head" append="1">
through DOM modification and rebuilding HTML from template
afterwards.

${$args{'Content'}} = $args{'Template'}->build( $args{'Context'} );

While this method seems working too, but I'm getting other headers
duplicated - looks like appending "html_head" blocks from other templates
getting executed twice. I have tried dropping args{'Context'} from
above call but this gets me entirely empty Entry page.

So I have following questions:

- First with regards second approach - Is there way to rebuild page
inside 'build_page' callback properly without side-effects from
previous build? Is this approach is worth pursuing at all?

- Is there any better approach to this task? I've tried to find
similar examples in other plug-ins but almost without luck. Some
plug-ins use similar method for injecting JavaScript into
"html_head" but only from template_param hooks which is
appropriate (if I'm not mistaken) only for dynamic pages like
mt-comment.cgi or CMS backend and for published pages they just
ask user to insert necessary JavaScript/CSS links into Header by
hand - for example, see READMEs from plug-ins by Byrne Reese [1]
and Beau Smith [2]. Is asking user to manipulate complex templates
really most reliable and convenient way to inject necessary links
into generated HTML?

[1] - http://github.com/byrnereese/mt-plugin-assetgallery
[2] - http://github.com/sixapart/mt-plugin-facebook-connect-commenters

Reported on Movable Type 4.3

1 Reply

| Add a Reply
  • Hi,
    
    

    I like your first implementation better, as it will work with blogs that have templates that don't have HTML head template modules in their template set.

    I would tweak the regex a bit though:

    s/^(.*?)<\/head>(.*)/$1$javascript<\/head>$2/si;

    I haven't tested it, but I believe this should only grab the first </head>.

    And if it doesn't have a <head>, then why bother injecting javascript eh...

Add a Reply

If you need to share template code, replace all the "<" signs with "&lt;" or use this utility.

Forum Groups

1773 6162

Last Topic: Excluding categories from blog by kholechek on Feb 9, 2012

86 302

Last Topic: website entries by masoud on Oct 26, 2011

1429 5077

Last Topic: What apocalypse hit this community in the middle of 2011? by 75th on Feb 10, 2012

695 2910

Last Topic: Insert Image / File Fails by Russ Miller on Feb 10, 2012

84 291

Last Topic: How to have some other characters in entry basename automatically written by Afshin Haghighatnia on Dec 22, 2011

173 737

Last Topic: About the MT version stated in HTML source by Alex E. Schneider on Feb 7, 2012

190 567

Last Topic: Analytics Reporting by michael webster on Feb 5, 2012

48 210

Last Topic: An idea and also a request by Afshin Haghighatnia on Jun 29, 2011

64 246

Last Topic: jQuery in MT 5.1 still at 1.4 - why? by perlmonkey on May 25, 2011

code.sixapart.com

137 478

Last Topic: Getting a thumbnail with xpath by Peter on Mar 13, 2011

222 720

Last Topic: Custom Field for Asset Not Appearing by android on Feb 9, 2012