[RFC|Accepted] Overridable imageset and theme paths for CDNs

[Jhong]

I use Amazon Cloudfront Content Distribution Network to host cacheable assets such as images, scripts, etc -- it helps with site performance.

Uploading the assets (or using origin push, depending on the CDN), can be left to the user (might be a 'nice to have' in v4), but it should be easy to override the imageset and theme paths so that the URL points to the CDN rather than the same server as phpBB3.

Note that (at least in the case of Amazon Cloudfront) the URL needs to be dynamic depending on whether the browser supports gzipped assets or not, as CloudFront doesn't do content negotiation.

Right now I have had to go through a 3-step process:
1. I created a hook file that sets a template variable, T_CDN, to one of two URLs depending on whether the browser supports gzip (e.g. gzipped-assets.mysite.com and assets.mysite.com).

2. I manually edited all the template files and changed the paths to T_CDN where needed

3. However, this still left me with paths to assets in the CSS that I could not easily change dynamically. In the end I just edited style.php -- grabbed the $css as it is about to be output, and did a find/replace for paths.

The only other way I could think of right now was to edit a bunch of core code, which I didn't want to do.

It would be nice to have an option to make all static assets take an alternate URL. This could be specified in a MOD -- or even better, a couple of ACP fields (alternate URL for static assets).

More and more people will be wanting to use cloud-based infrastructure for serving files going forward, so this should be a well-received feature.

If this idea is acceptable in principle, I can create a patch against current 3.1

[naderman]

Absolutely, would love to have this.

[pinkflozd]

thats a really nice idea for 3.1, we've recently switched to a CDN network, there was quite some work to make all smiles, images and other static assests serve from the cdn. hope for a way to serve attachments from CDN's in 3.1 too

[bantu]

thats a really nice idea for 3.1, we've recently switched to a CDN network, there was quite some work to make all smiles, images and other static assests serve from the cdn. hope for a way to serve attachments from CDN's in 3.1 too

How about you tell us what exactly you did to make it work?

[pinkflozd]

hardcoded the stylpe.php to style.css so i cant give u those changes but i saw it in a file somewhere. i think in functions_display. here are the other changes. my cdn grabs data from my www domain and stores it to their server (most cdn's have this option). sorry for any "mods" that got in the way. still testing the usefullness of my avatar and attachment changes so wont post them.

for smiles:
in functions_content.php:

Code: Select all

/**
* Smiley processing
*/
function smiley_text($text, $force_option = false)
{
    global $config, $user, $phpbb_root_path;

    if ($force_option || !$config['allow_smilies'] || !$user->optionget('viewsmilies'))
    {
        return preg_replace('#<!\-\- s(.*?) \-\-><img src="\http://cdn.varjanta.com/static/forum\/.*? \/><!\-\- s\1 \-\->#', '\1', $text);
    }
    else
    {
        $root_path = (defined('PHPBB_USE_BOARD_URL_PATH') && PHPBB_USE_BOARD_URL_PATH) ? generate_board_url() . '/' : $phpbb_root_path;
        return preg_replace('#<!\-\- s(.*?) \-\-><img src="\{SMILIES_PATH\}\/(.*?) \/><!\-\- s\1 \-\->#', '<img src="http://cdn.varjanta.com/static/forum/' . $config['smilies_path'] . '/\2 />', $text);
    }
}

in functions_posting.php

Code: Select all

'SMILEY_IMG'    => 'http://cdn.varjanta.com/static/forum/' . $config['smilies_path'] . '/' . $row['smiley_url'],

Forum images:
in functions_display.php

Code: Select all

'FORUM_IMAGE'            => ($row['forum_image']) ? '<img src="http://cdn.varjanta.com/static/forum/' . $row['forum_image'] . '" alt="' . $user->lang['FORUM_CAT'] . '" />' : '',
                'FORUM_IMAGE_SRC'        => ($row['forum_image']) ? 'http://cdn.varjanta.com/static/forum/'  . $row['forum_image'] : '',

forum ranks:
in functions_display.php

Code: Select all

$rank_img = (!empty($ranks['special'][$user_rank]['rank_image'])) ? '<img src="http://cdn.varjanta.com/static/forum/images/ranks/' . $ranks['special'][$user_rank]['rank_image'] . '" alt="' . $ranks['special'][$user_rank]['rank_title'] . '" title="' . $ranks['special'][$user_rank]['rank_title'] . '" />' : '';

imageset:
in session.php

Code: Select all

$img_data['src'] = 'http://cdn.varjanta.com/static/' . rawurlencode($this->theme['imageset_path']) . '/imageset/' . ($this->img_array[$img]['image_lang'] ? $this->img_array[$img]['image_lang'] .'/' : '') . $this->img_array[$img]['image_filename'];

[z2z]

that helped pinkflozd, thanks

Additional to that i also made few changes in include/function.php & style.php

How about Forum Avatar? i think since phpBB filenames are different so the CDN sys(origin pull) can catch the avatar changes without much extra efforts...

[pinkflozd]

for the avatars i hanged only in

functions_display.php

Code: Select all

case AVATAR_UPLOAD:
            if (!$config['allow_avatar_upload'] && !$ignore_config)
            {
                return '';
            }
            $avatar_img = "http://cdn.varjanta.com/blog/forum/download/file.$phpEx?avatar=";
        break;

seems to work ok for my CDN, could be made as a workaround with htaccess if u host doesnt support query strings (using lighttpd so cant help u on that)
the attachment thingy is quite tricky, as there are permissions and anti hotlinking. maybe allowing some site to view all attachments would do the trick

[Jhong]

Note that for Amazon Cloudfront (or direct from S3), the best way is to specify two CDNs -- one for when the browser supports gzip, and one for when it doesn't (as CloudFront doesn't do negotiation).

There is a specific release of IE6 that doesn't report whether it supports gzip correctly, so I used the following code, based on a snippet recommended on the Amazon forums.

For 3.0.x I just put the following in a hook file:

Code: Select all

function is_buggy_ie() 
{
    $ua = $_SERVER['HTTP_USER_AGENT'];
    // quick escape for non-IEs
    if (0 !== strpos($ua, 'Mozilla/4.0 (compatible; MSIE ') || false !== strpos($ua, 'Opera')) 
    {
        return false;
    }
    $version = (float)substr($ua, 30);
    return ($version < 6 || ($version == 6  && false === strpos($ua, 'SV1')));
}

$cdn = (is_buggy_ie()) ? 'http://uassets.wp-united.com' :  'http://gassets.wp-united.com';

define('CDN', $cdn);

function get_cdn_paths(&$hook)
{
    global $template, $cdn;
    $template->assign_vars(array('T_CDN'  => $cdn));
}

(uassets is unzipped assets, gassets is gzipped).

I then used the T_CDN in my template files where needed -- this is where it got messy. (I also set the define for my own use elsewhere)

To get it to work with paths set in the CSS files, I modified style.php and intercepted:

Code: Select all

 echo $theme['theme_data'];

And did a find/replace for paths.

J

[GravityDK]

I just wanted to cheer for this being accepted.
I would use a subdomain to get the parallel downloads: like subdomain.mysite.com.

I believe what I've read above will allow that usage.

[Rahul]

I hade made every necessary changes in style.php so that all files in theme goes to csn. How to override this three files for cdn

http://www.example.com/style.php?id=1&lang=en
http://www.example.com/styles/prosilver ... orum_fn.js
http://www.example.com/styles/prosilver/theme/print.css