WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] implementing photon on my theme's images (4 posts)

  1. Darkkurama
    Member
    Posted 9 months ago #

    Hi, I would like to know as detailed as possible, how can i serve my theme's images with WordPress CDN. I read this guide, and I added the photon function to my functions.php, but I'm a bit lost at the time of editing every image call within my theme. In which file do I make these changes? thanks a lot!

    http://wordpress.org/extend/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 9 months ago #

    You will indeed need to edit every image call within your theme.

    Your theme may be calling an image like so at the moment:

    <img src="<?php echo get_template_directory_uri(); ?>/img/logo.jpg">

    To call this image with Photon instead, you will need to use this code:

    <img src="<?php echo jetpack_photon_url( get_template_directory_uri() . '/img/logo.jpg' ); ?>">

    And until the next version of Jetpack comes out, you will also need to add the following code to your theme's functions.php:

    if( function_exists( 'jetpack_photon_url' ) ) {
        add_filter( 'jetpack_photon_url', 'jetpack_photon_url', 10, 3 );
    }
  3. Darkkurama
    Member
    Posted 9 months ago #

    Hi, thanks for answering. Actually, in the theme I'm using, the only img call similar to what you gave as example is located in my functions.php, and it looks like:

    unction matala_admin_header_style() {
    ?>
    	<style type="text/css">
    	.appearance_page_custom-header #headimg {
    		background-color: #<?php echo ( '' != get_background_color() ? get_background_color() : '000' ); ?>;
    		<?php if ( '' == get_header_image() && '' == get_background_color() )
    			echo 'background-image: url(' . get_template_directory_uri() . '/images/bg-wrapper.jpg) !important;';
    		?>
    		border: none;
    		width: 940px;
    		height: 200px;
    		text-align: left;
    	}

    I know that's part of a the header function of my theme, but it's the only similar code I found given your example.

    The rest of my images are called on the css portion of the theme. Example:

    #page {
    	background: url("images/bg-site.jpg") repeat-x;
    	min-width: 1000px;
    }

    I hope it makes sense.

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 9 months ago #

    In this case, you could edit the code in your theme's header.php file to use jetpack_photon_url, as I mentioned above.

    You won't be able to change the other images though, as they're added via CSS.

Reply

You must log in to post.

About this Plugin

About this Topic