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

  1. Darkkurama
    Posted 3 years 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!


  2. Jeremy Herve
    Jetpack Mechanic
    Plugin Author

    Posted 3 years 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
    Posted 3 years 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
    Jetpack Mechanic
    Plugin Author

    Posted 3 years 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.

  5. haha taduko
    Posted 2 years ago #

    Thank you, but I've already read that article you wrote.

    It's a nice away but I really want to have those images delivered to CDN automatically, I mean like as what you could mentioned this post.

    So as I don't know anything but this article and what you introduced me, then I wrote the code as bellow,

    <img src="<?php echo jetpack_photon_url( 'http://www.hogehoge.com/wp-content/uploads/header_logo.jpg' ); ?>" />

    I don't have any confidence to write English so much as a nonnative English speaker.
    Hopefully you could understand my question.

    Beset regards,

  6. Jeremy Herve
    Jetpack Mechanic
    Plugin Author

    Posted 2 years ago #

    I really want to have those images delivered to CDN automatically

    That's exactly what jetpack_photon_url() does.

    You can read more about it here;

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Jetpack by WordPress.com
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic