• Hi,

    I have a page that uses a custom crop. In some cases, I have replaced the crop generated automatically by WordPress manually. It worked just fine until I installed Photon. Now the images are not using the cropped version, and instead scaling the original.

    The cropped version is name-of-file-300×170 for this page.
    https://abgallerytribeca.com/artists/

    I want to use that image, and not the one that Photon ultimately uses. And I only need it to work that way for that specific page.

    I looked at some documentation here – https://jetpack.me/tag/featured-images/

    Not only did it not make sense to me, but it generated undefined function calls on line 4 of the unaltered code.

    https://www.ads-software.com/plugins/jetpack/

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Contributor Adam Heckler

    (@adamkheckler)

    A simpler solution might be to simply disable Photon entirely on that page, which you should be able to accomplish with this guide:

    https://jetpack.me/2013/05/03/skip-a-image-with-photon/

    Your code would look like so:

    function no_photon_by_page() {
      if ( is_page( 2853 ) ) {
        add_filter( 'jetpack_photon_skip_image', '__return_true');
      }
    }
    
    add_action('wp', 'no_photon_by_page');

    Simply insert that either into your theme’s functions.php file, or use a tiny plugin like so:

    https://gist.github.com/aa5cb5fb8b8d7b5bfc09

    Thread Starter roseba

    (@roseba)

    Thanks Adam for your input. I tried putting it into the functions file first, and then as its own module. It seems to have no effect at all.

    Thread Starter roseba

    (@roseba)

    Right now, I am being faced with having to completely disable the Photon plugin. This is unfortunate because the whole site could use the benefit of using it. However, the artist page is an important page and having it crop and then resize in this way doesn’t work where aesthetics are very important.
    https://abgallerytribeca.com/artists/

    The image for instance, should display this url, customized specifically for this page.

    Gloria McLean head cut off
    https://i2.wp.com/abgallerytribeca.com/wp-content/uploads/artists/gloria-mclean.jpg?resize=300%2C170

    Gloria McLean, what should appear.
    https://abgallerytribeca.com/wp-content/uploads/artists/gloria-mclean-300×170.jpg

    Clearly, you can see why having featured images where the crop cuts people’s heads off is less than ideal.

    I’d be happy to just turn photon off with Adam’s changes, but it seemed to have no effect when I applied it.

    The theme in use, is a Genesis Child called Zen with customizations in a grandfather. In order to work around WP limitations, the grandfather theme changes are applied as a plugin and the functions file resides within the plugin.

    Is this why Adams code doesn’t work?

    My functions file is pretty simple and it works for my jetpack change.

    <?php
    /*
    Plugin Name: *Elena Ab Theme Customization*
    Description: This plugin serves as a grandchild theme that enables one to customize Zen, a theme built on the Genesis Framework. One can customize css, javascripts, templates and functions in this directory. DO NOT TOUCH THE CORE CODE IN GENESIS OR ZEN THEMES. If you deactivate this, you will lose some of the customizations made to the theme.
    Author: Robin Sentell
    Author URI: https://abgallerytribeca.com/
    Version: 1.0
    */
    
    // Adds our new file with styles
    function grandchild_add_styles() {
    	wp_register_style( 'grandchild-style', plugins_url( 'grandchild-styles.css', __FILE__ ), array(), '1.0' );
    	wp_enqueue_style( 'grandchild-style' );
    }
    add_action( 'wp_print_styles', 'grandchild_add_styles' );
    
    // Adds our new file with scripts
    function grandchild_add_scripts() {
    	wp_register_script( 'grandchild-script', plugins_url( 'grandchild-scripts.js', __FILE__ ), array( 'jquery' ), '1.0' );
    	wp_enqueue_script( 'grandchild-script' );
    }
    add_action( 'wp_print_scripts', 'grandchild_add_scripts' );
    
    // Search for templates in plugin 'templates' dir, and load if exists
    function grandchild_template_include( $template ) {
    
    	if ( file_exists( untrailingslashit( plugin_dir_path( __FILE__ ) ) . '/templates/' . basename( $template ) ) )
    		$template = untrailingslashit( plugin_dir_path( __FILE__ ) ) . '/templates/' . basename( $template );
    
    	return $template;
    }
    add_filter( 'template_include', 'grandchild_template_include', 11 );
    
    /** allow tiled jetpack gallery to go full width of page **/
    if ( ! isset( $content_width ) )
        $content_width = 955;
    
    /**Tells Jetpack's Photon module to not run on a given page ID. */
    
    function no_photon_by_page() {
      if ( is_page( 2853 ) ) {
        add_filter( 'jetpack_photon_skip_image', '__return_true');
      }
    }
    
    add_action('wp', 'no_photon_by_page');
    Plugin Contributor Adam Heckler

    (@adamkheckler)

    I’m not sure what you mean by a “grandfather” theme. As far as I know, having themes being a “grandchild” just isn’t a thing…

    Anyway, what you might try is switch to the Genesis child theme, Zen, and then adding the code I pasted above as a separate plugin, like so:

    https://gist.github.com/75e8a194e57e6acb5027

    See if that causes Photon to be disabled on the Artists page. Thanks!

    Thread Starter roseba

    (@roseba)

    I am sorry I wasn’t clear. I will be more specific.

    The website uses a theme called Zen built in the Genesis framework.

    In order to make very minor changes, such as added a branded logo, and change some colors in the navigation, I needed to create a child theme of Zen.

    WordPress does not support a grandchild theme. I did some research and discovered some code that would function as a plugin, but allow me to make these minor customizations to the appearance. Only instead of installing it in the theme directory, it is installed in the plugin directory and activates as a plugin.

    It had its own functions file where I have been successful in making other modifications such as setting the max-width on pages that use Jetpack tiled gsllery. It also allowed my to place a branded logo in a directory and make any css changes I want. For all intents and purposes, it functions like a theme and I have had no issues using it this way.

    I placed your code in the functions file and it did not work. I placed your code in a standalone php file and activated it as a plugin, it did not work. I also deactivated the grandchild theme using only Zen. It did not work.

    The artist page functions like an farchive where there is no content on the actual page. Instead, it is a single page that uses the category to add content. Each artist page, in its own post id used this category hence making the display possible.

    Is it possible to rename your manually cropped images? If so, I think this will be easier than trying to disable Photon on the page, and you’ll still get the benefits of Photon as well.

    Try renaming one of your cropped images with a different pattern–for example, change “brian-gormley-300×170.jpg” to “brian-gormley-crop.jpg” or some other variation. Photon assumes that file names that end like “-300×170.jpg” were re-sized by WordPress and strips the “-300×170” part out, looking for the original to modify on Photon’s servers. Without the “-300×170” part, Photon will see this as an entirely different image, and not look for an “original.”

    If that works, and you want to get really fancy, you can save your manual crops at 600x340px–in other words, keeping the proportion, but doubling the dimensions (assuming the original exceeds these dimensions). Photon automatically adjusts for high-density displays (like Apple’s Retina), so it will take that higher res (600×340) image and serve it as-is for high-density displays to scale in the browser (keeping them sharp but the right size on the page). On screens with 1-to-1 pixel ratios, it will send a re-sized (300×170) version of the custom crop (no need to download those extra pixels on displays that don’t use them).

    Thread Starter roseba

    (@roseba)

    Unfortunately, that had no effect. WordPress doesn’t show all the various crops in the GUI. You only know of them when you go into it via FTP. So it is still registering the original image.

    It seems like a lot of overhead to create new images, and new postID just for the featured photo rather than just being able to take from the WordPress cropped photos.

    Oh, I see, when you say you’re manually cropping, you mean you’re doing it by clicking the Edit Image button on the Edit Media page? That makes sense, but I guess I was assuming you meant you were cropping them elsewhere and uploading them.

    In your case, it doesn’t seem like all that much overhead, since it looks like it’s only about 10 mew images. Still, I can see how you’d rather just turn off Photon for that particular page.

    On the other hand, as I look at your site now, it looks like a great number of your Photon image links are broken (no idea why), so you might want to give up on Photon all together and consider another image CDN. Bummers!

    Thread Starter roseba

    (@roseba)

    Broken? I don’t see broken images. Do you mean Adam’s code is working somewhere else on the site? I haven’t deactivated that plugin.

    The artist page is a work in progress. This site was built in two weeks. There will be many more artists added to it over time.

    When I upload an image, WordPress automatically creates different versions cropped at different sizes. This is pretty standard out of the box behavior. One of the sizes is the featured size on this page. So while in the gui, it registers as one image, there are actually four other versions with the pixel size dimensions appended to the file name.

    I considered taking the correctly cropped photos and uploading them separately. WordPress will create another four versions when I upload it, making a total of 10 images for one photo.

    I’d rather disable it in the one page.

    Thread Starter roseba

    (@roseba)

    Hi. I have decided to deactivate Photon. It appears it doesn’t work using photo galleries and the bulk of the images hosted there, will be in the form of photo galleries. (Jetpack to be exact.)

    Thanks for your assistance. I wish this would have worked because it would have been great to have the extra boost from Photon. But if the bulk of the images aren’t being served, AND it is messing up the appearance on an important page, it simply isn’t worth it.

    Thread Starter roseba

    (@roseba)

    mmm… so it seems when I deactivated Photon, I lost the responsive part of a slideshow gallery making images squish with unattractive aspect ratios. Wow, this is so complicated. I’m not sure why this is not better integrated. I’m pretty frustrated with this.

    I agree, this is very complicated, and very frustrating!

    None of the images are broken today, but for some reason yesterday, several were. For example, on https://abgallerytribeca.com/andrey-bogoslowsky/, the artist portrait and second painting were both broken, showing a broken image icon instead of the image. If I went to the address of the image, like https://i0.wp.com/abgallerytribeca.com/wp-content/uploads/artists/andrey-bogoslowsky-headshot.jpg, the page gave an error message saying, “We cannot complete this request.” If I removed the i0.wp.com part, and went to your server’s image location, https://abgallerytribeca.com/wp-content/uploads/artists/andrey-bogoslowsky-headshot.jpg, it loaded fine. Also, the (Photon-served) cropped version of the image on the Artists page loaded fine, so I’m not sure what was going on. In any case, it’s working now, so who knows?

    As to the number of extra saved images, WordPress creates only one post id per uploaded image, and creates alternate resized images only in the sizes smaller than the original. So in the case of the cropped ones you’ve uploaded now at 300×170 (like https://abgallerytribeca.com/wp-content/uploads/gloria-mclean-featured-photo-for-artist-page.jpg) there’s an additional version at https://abgallerytribeca.com/wp-content/uploads/gloria-mclean-featured-photo-for-artist-page-150×150.jpg, but I doubt there are any others. If you had decided to upload the doubled-dimension version at 600×170, you would have had at least one more variation (300×170), possibly more, depending on your other size settings. Still, manually cropping and uploading for each image that needs it can definitely be a pain.

    Thread Starter roseba

    (@roseba)

    I’m not sure what was going on yesterday, but I made significant changes this morning, before you revisited the site.

    1) I discovered that by disabling Photon, I would lose the responsiveness in other galleries. This is less than ideal. So I had reactivate it.

    2) I downloaded all the images from the server. Every photo uploaded creates:
    – original
    – 45×45*
    – 80×80* [This is set in the Zen theme but I’m not clear where it is used.]
    – 150×150* [I know this is set in the media settings screen and I do use it]
    – 300×170 (this is the one used for featured photos on the artist page and is set in the Zen Theme)*
    – 300×250
    – 300×300 [I know this is set in the media settings screen]

    As a work around, I went back in and reuploaded the 300×170 images (hence making them appear in the WordPress GUI twice.)

    This is an extremely inelegant solution because now those photos, also have the same number of iterations. (the one’s I starred.)

    If you FTP in, you can see this behavior clearly. You won’t see it in the WordPress front end.

    I’m still thinking about which of these file sizes I can eliminate. Some are need for the backend thumbnails etc. And then I have to put something in the functions to do that.

    The workaround you ended up using is what I was trying to suggest in my first post, back when I thought you were manually uploading custom crops made outside of WP (though you used a much longer filename variation!)

    You do have more auto-resized alternate files than I expected, because I assumed you wouldn’t have so many tiny image sizes. It seems like you could eliminate the 80×80 (since you don’t use) and 45×45 (just resize the 150 via html/css), but I guess whether you do that depends on which you dislike less–the hassle of changing the code, or the nagging knowledge that there’s a bunch of tiny image files on your server that you’ll never use. Personally, I think I’d choose the latter and leave them as they are.

    I do find it odd that WP appears to create a file ending in 300×170 (like this), when the original has the exact same dimensions. I thought the code was written to avoid that. At least it didn’t create the larger sizes, as expected.

    verythorough

    (@verythorough)

    I think I found a way to disable Photon on your Artists page.

    I tried the jetpack_photon_skip_image filter in about fifteen different ways on my own site, and never got it to do anything. However, in the article that Adam linked, there was a link to another article using a different strategy:

    remove_filter( 'image_downsize', array( Jetpack_Photon::instance(), 'filter_image_downsize' ) );

    I put that in one of my custom page templates, right before starting the loop. On the one page that uses that template, Photon didn’t run, and test-cropped images displayed properly. On all other pages, Photon ran fine.

    There are a few other ways you could incorporate that line into your code (like framing it in an is_page conditional in the functions file). If you want to de-activate and re-activate within the same page, the article describes how to do that, too.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Assign photon to use certain images’ is closed to new replies.