js and css not in seperate files

[danieltulp]

Hi,

for speed purposes I would like the JS and CSS code that Photonic throws into my webpage in seperate js and css files

Now I have this in my pagesource and I can't optimize placement etc.

Code: Select all

<script type='text/javascript'>var Photonic_JS={ajaxurl:"http://www.fotokringarnhem.nl/wp/wp-admin/admin-ajax.php",flickr_api_key:"3bda0275a0bc4f7e407f029cdb8be317",flickr_position:"0",flickr_thumbnail_size:"s",flickr_main_size:"z",flickr_view:"View in Flickr",flickr_set_count:"{#} sets",flickr_photo_count:"{#} photos",fbox_show_title:"1",fbox_title_position:"inside",flickr_hide_collection_thumbnail:"1",flickr_hide_collection_title:"",flickr_hide_collection_set_count:"1",flickr_hide_set_thumbnail:"1",flickr_hide_set_title:"",flickr_hide_set_photo_count:"1",flickr_hide_gallery_thumbnail:"1",flickr_hide_gallery_title:"",flickr_hide_gallery_photo_count:"1",flickr_hide_set_pop_thumbnail:"1",flickr_hide_set_pop_title:"",flickr_hide_set_pop_photo_count:"1",flickr_hide_gallery_pop_thumbnail:"1",flickr_hide_gallery_pop_title:"",flickr_hide_gallery_pop_photo_count:"1",flickr_collection_set_title_display:"tooltip",flickr_hide_collection_set_photos_count_display:"1",flickr_collection_set_per_row_constraint:"padding",flickr_collection_set_constrain_by_count:"5",flickr_gallery_title_display:"tooltip",flickr_hide_gallery_photos_count_display:"1",flickr_galleries_per_row_constraint:"padding",flickr_galleries_constrain_by_count:"5",flickr_photos_per_row_constraint:"padding",flickr_photos_constrain_by_count:"5",flickr_photos_pop_per_row_constraint:"padding",flickr_photos_pop_constrain_by_count:"5",Dpx_photos_per_row_constraint:"padding",Dpx_photos_constrain_by_count:"5",Dpx_photos_pop_per_row_constraint:"",Dpx_photos_pop_constrain_by_count:"",flickr_photo_pop_title_display:"tooltip",flickr_photo_title_display:"tooltip",picasa_photo_title_display:"tooltip",picasa_photo_pop_title_display:"tooltip",wp_thumbnail_title_display:"tooltip",Dpx_photo_title_display:"tooltip",slideshow_library:"fancybox",slideshow_mode:"",slideshow_interval:"5000",pphoto_theme:"pp_default",gallery_panel_width:"800",gallery_panel_items:"20"};</script>

Code: Select all

<style type="text/css">.photonic-pad-photosets{margin:15px}.photonic-pad-galleries{margin:15px}.photonic-flickr-stream .photonic-pad-photos{margin:0 15px}.photonic-picasa-stream .photonic-pad-photos{margin:0 15px}.photonic-picasa-stream img{border-top:none;border-right:none;border-bottom:none;border-left:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}.photonic-panel .photonic-picasa-image img{border-top:none;border-right:none;border-bottom:none;border-left:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}.photonic-500px-stream .photonic-pad-photos{margin:0 15px}.photonic-500px-stream img{border-top:none;border-right:none;border-bottom:none;border-left:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}.photonic-panel{background:rgb(17,17,17);border-top:1px solid #333;border-right:1px solid #333;border-bottom:1px solid #333;border-left:1px solid #333}.photonic-panel .photonic-flickr-image img{border-top:none;border-right:none;border-bottom:none;border-left:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}.photonic-flickr-panel .photonic-pad-photos{margin:0 15px}.photonic-picasa-panel .photonic-pad-photos{margin:0 15px}.photonic-flickr-coll-thumb img{border-top:none;border-right:none;border-bottom:none;border-left:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}.photonic-flickr-set .photonic-flickr-set-solo-thumb img{border-top:none;border-right:none;border-bottom:none;border-left:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}.photonic-flickr-set-thumb img{border-top:none;border-right:none;border-bottom:none;border-left:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}.photonic-flickr-set-pop-thumb img{border-top:none;border-right:none;border-bottom:none;border-left:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}.photonic-flickr-gallery-pop-thumb img{border-top:none;border-right:none;border-bottom:none;border-left:none;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px}</style>

[sayontan]

Firstly this isn't a bug, so this is mis-posted.

If you try to move so little CSS/JS code out of your page source code, you will spend a lot more on the round trip HTTP call for first, the JS and second, the CSS. That may work for you with an optimization plugin, but more than 95% of the users don't use optimization plugins.

Moreover, these bits are dynamically generated based on your options. What that means is that you cannot store them upfront in a file. If you look at the code carefully, you will see that there are files called photonic.css and photonic.js that include static CSS and JS.

As far as dynamic CSS and JS are concerned, there are two ways to not print them in your page source. The first is to generate and save a file whenever the options are saved - this causes problems in cases where users don't have permissions to write something to the uploads folder (like some Multi-site installations) and is also not secure. The correct way to implement this is a rather laborious usage of the WP FileSystem. I say laborious not because of effort to me, but because of effort to the end-user. Again, I am not sure if it works for multi-site installations with restrictions on the uploads folder.

The second is to use a "template_redirect" functionality. Unfortunately that is the heaviest resource hog, because it loads the entire WP environment for each linked CSS / JS, and moreover they cannot be cached.

To cut a long story short, having the CSS and JS the way they are is the most efficient way of handling dynamic code.

[danieltulp]

Firstly this isn't a bug, so this is mis-posted.

I know, but where else to put it? it's not a feature either

If you try to move so little CSS/JS code out of your page source code, you will spend a lot more on the round trip HTTP call for first, the JS and second, the CSS. That may work for you with an optimization plugin, but more than 95% of the users don't use optimization plugins.

Moreover, these bits are dynamically generated based on your options. What that means is that you cannot store them upfront in a file. If you look at the code carefully, you will see that there are files called photonic.css and photonic.js that include static CSS and JS.

As far as dynamic CSS and JS are concerned, there are two ways to not print them in your page source. The first is to generate and save a file whenever the options are saved - this causes problems in cases where users don't have permissions to write something to the uploads folder (like some Multi-site installations) and is also not secure. The correct way to implement this is a rather laborious usage of the WP FileSystem. I say laborious not because of effort to me, but because of effort to the end-user. Again, I am not sure if it works for multi-site installations with restrictions on the uploads folder.

The second is to use a "template_redirect" functionality. Unfortunately that is the heaviest resource hog, because it loads the entire WP environment for each linked CSS / JS, and moreover they cannot be cached.

To cut a long story short, having the CSS and JS the way they are is the most efficient way of handling dynamic code.

Thanks for the explanation, I'm not that familiar with the WP file system and did not realise the css an js was created dynamically