Home Forums Themes Support Claue blog post's image on my home page not seen

This topic contains 14 replies, has 2 voices, and was last updated by  Harry 2 weeks, 5 days ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #33696
    sait
    Supported

    Hi,

    I do not see the blog post’s image on my home page. Can you please tell me how to fix

    Attachments:
    You must be logged in to view attached files.
    #33708

    Hi,

    Our theme uses the Aqua Resizer script to resize/crop images to the selected size, this script only accepts images hosted on the same server as the site so CDN images will not work.

    In order to support CDN images you will need to disable the cropping functionality. This is not an elegant solution as this will mean the full size images are loaded in all cases but at least your images will be working.

    To do this copy the following function to claue-child > functions.php file:

    Replace “http://cdnurl.com/wp-content/uploads” with your CDN uploads directory.

    class Aq_Exception extends Exception {}
    class Aq_Resize {
        /**
         * The singleton instance
         */
        static private $instance = null;
        /**
         * Should an Aq_Exception be thrown on error?
         * If false (default), then the error will just be logged.
         */
        public $throwOnError = false;
        /**
         * No initialization allowed
         */
        private function __construct() {}
        /**
         * No cloning allowed
         */
        private function __clone() {}
        /**
         * For your custom default usage you may want to initialize an Aq_Resize object by yourself and then have own defaults
         */
        static public function getInstance() {
            if(self::$instance == null) {
                self::$instance = new self;
            }
            return self::$instance;
        }
        /**
         * Run, forest.
         */
        public function process( $url, $width = null, $height = null, $crop = null, $single = true, $upscale = false ) {
            try {
                // Validate inputs.
                if (!$url)
                    throw new Aq_Exception('$url parameter is required');
                if (!$width && !$height)
                    throw new Aq_Exception('$width and $height parameter are required'); // MODIFIED
                // Caipt'n, ready to hook.
                if ( true === $upscale ) add_filter( 'image_resize_dimensions', array($this, 'aq_upscale'), 10, 6 );
                // Define upload path & dir.
                $upload_info = wp_upload_dir();
                $upload_dir = $upload_info['basedir'];
                $upload_url = 'http://cdnurl.com/wp-content/uploads';
                
                $http_prefix = "http://";
                $https_prefix = "https://";
                $relative_prefix = "//"; // The protocol-relative URL
                
                /* if the $url scheme differs from $upload_url scheme, make them match 
                   if the schemes differe, images don't show up. */
                if(!strncmp($url,$https_prefix,strlen($https_prefix))){ //if url begins with https:// make $upload_url begin with https:// as well
                    $upload_url = str_replace($http_prefix,$https_prefix,$upload_url);
                }
                elseif(!strncmp($url,$http_prefix,strlen($http_prefix))){ //if url begins with http:// make $upload_url begin with http:// as well
                    $upload_url = str_replace($https_prefix,$http_prefix,$upload_url);      
                }
                elseif(!strncmp($url,$relative_prefix,strlen($relative_prefix))){ //if url begins with // make $upload_url begin with // as well
                    $upload_url = str_replace(array( 0 => "$http_prefix", 1 => "$https_prefix"),$relative_prefix,$upload_url);
                }
                
                // Check if $img_url is local.
                if ( false === strpos( $url, $upload_url ) )
                    throw new Aq_Exception('Image must be local: ' . $url);
                // Define path of image.
                $rel_path = str_replace( $upload_url, '', $url );
                $img_path = $upload_dir . $rel_path;
                // Check if img path exists, and is an image indeed.
                if ( ! file_exists( $img_path ) or ! getimagesize( $img_path ) )
                    throw new Aq_Exception('Image file does not exist (or is not an image): ' . $img_path);
                // Get image info.
                $info = pathinfo( $img_path );
                $ext = $info['extension'];
                list( $orig_w, $orig_h ) = getimagesize( $img_path );
                // Get image size after cropping.
                $dims = image_resize_dimensions( $orig_w, $orig_h, $width, $height, $crop );
                $dst_w = $dims[4];
                $dst_h = $dims[5];
                // Return the original image only if it exactly fits the needed measures.
                if ( ! $dims && ( ( ( null === $height && $orig_w == $width ) xor ( null === $width && $orig_h == $height ) ) xor ( $height == $orig_h && $width == $orig_w ) ) ) {
                    $img_url = $url;
                    $dst_w = $orig_w;
                    $dst_h = $orig_h;
                } else {
                    // Use this to check if cropped image already exists, so we can return that instead.
                    $suffix = "{$dst_w}x{$dst_h}";
                    $dst_rel_path = str_replace( '.' . $ext, '', $rel_path );
                    $destfilename = "{$upload_dir}{$dst_rel_path}-{$suffix}.{$ext}";
                    if ( ! $dims || ( true == $crop && false == $upscale && ( $dst_w < $width || $dst_h < $height ) ) ) {
                        // Can't resize, so return false saying that the action to do could not be processed as planned.
                        //throw new Aq_Exception('Unable to resize image because image_resize_dimensions() failed');
                        $img_url = $url; // MODIFIED
                    }
                    // Else check if cache exists.
                    elseif ( file_exists( $destfilename ) && getimagesize( $destfilename ) ) {
                        $img_url = "{$upload_url}{$dst_rel_path}.{$ext}";
                    }
                    // Else, we resize the image and return the new resized image url.
                    else {
                        $editor = wp_get_image_editor( $img_path );
                        if ( is_wp_error( $editor ) || is_wp_error( $editor->resize( $width, $height, $crop ) ) ) {
                            throw new Aq_Exception('Unable to get WP_Image_Editor: ' . 
                                                   $editor->get_error_message() . ' (is GD or ImageMagick installed?)');
                        }
                        $resized_file = $editor->save();
                        if ( ! is_wp_error( $resized_file ) ) {
                            $resized_rel_path = str_replace( $upload_dir, '', $resized_file['path'] );
                            $img_url = $upload_url . $resized_rel_path;
                        } else {
                            throw new Aq_Exception('Unable to save resized image file: ' . $editor->get_error_message());
                        }
                    }
                }
                // Okay, leave the ship.
                if ( true === $upscale ) remove_filter( 'image_resize_dimensions', array( $this, 'aq_upscale' ) );
                // Return the output.
                if ( $single ) {
                    // str return.
                    $image = $url;
                } else {
                    // array return.
                    $image = array (
                        0 => $url,
                        1 => $dst_w,
                        2 => $dst_h
                    );
                }
                return $image;
            }
            catch (Aq_Exception $ex) {
                error_log('Aq_Resize.process() error: ' . $ex->getMessage());
                if ($this->throwOnError) {
                    // Bubble up exception.
                    throw $ex;
                }
                else {
                    // Return false, so that this patch is backwards-compatible.
                    return false;
                }
            }
        }
        /**
         * Callback to overwrite WP computing of thumbnail measures
         */
        function aq_upscale( $default, $orig_w, $orig_h, $dest_w, $dest_h, $crop ) {
            if ( ! $crop ) return null; // Let the wordpress default function handle this.
            // Here is the point we allow to use larger image size than the original one.
            $aspect_ratio = $orig_w / $orig_h;
            $new_w = $dest_w;
            $new_h = $dest_h;
            if ( ! $new_w ) {
                $new_w = intval( $new_h * $aspect_ratio );
            }
            if ( ! $new_h ) {
                $new_h = intval( $new_w / $aspect_ratio );
            }
            $size_ratio = max( $new_w / $orig_w, $new_h / $orig_h );
            $crop_w = round( $new_w / $size_ratio );
            $crop_h = round( $new_h / $size_ratio );
            $s_x = floor( ( $orig_w - $crop_w ) / 2 );
            $s_y = floor( ( $orig_h - $crop_h ) / 2 );
            return array( 0, 0, (int) $s_x, (int) $s_y, (int) $new_w, (int) $new_h, (int) $crop_w, (int) $crop_h );
        }
    }

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #33737
    sait
    Supported
    This reply has been marked as private.
    #33739

    Hi,

    Please don’t add < ?php on top of code. just copy code in field and don't copy code in mail, just copy code on our forum.

    class Aq_Exception extends Exception {}
    class Aq_Resize {
    /**
    * The singleton instance
    */
    static private $instance = null;
    /**
    * Should an Aq_Exception be thrown on error?
    * If false (default), then the error will just be logged.
    */
    public $throwOnError = false;
    /**
    * No initialization allowed
    */
    private function __construct() {}
    /**
    * No cloning allowed
    */
    private function __clone() {}
    /**
    * For your custom default usage you may want to initialize an Aq_Resize object by yourself and then have own defaults
    */
    static public function getInstance() {
    if(self::$instance == null) {
    self::$instance = new self;
    }
    return self::$instance;
    }
    /**
    * Run, forest.
    */
    public function process( $url, $width = null, $height = null, $crop = null, $single = true, $upscale = false ) {
    try {
    // Validate inputs.
    if (!$url)
    throw new Aq_Exception('$url parameter is required');
    if (!$width && !$height)
    throw new Aq_Exception('$width and $height parameter are required'); // MODIFIED
    // Caipt'n, ready to hook.
    if ( true === $upscale ) add_filter( 'image_resize_dimensions', array($this, 'aq_upscale'), 10, 6 );
    // Define upload path & dir.
    $upload_info = wp_upload_dir();
    $upload_dir = $upload_info['basedir'];
    $upload_url = 'http://cdnurl.com/wp-content/uploads';

    $http_prefix = "http://";
    $https_prefix = "https://";
    $relative_prefix = "//"; // The protocol-relative URL

    /* if the $url scheme differs from $upload_url scheme, make them match
    if the schemes differe, images don't show up. */
    if(!strncmp($url,$https_prefix,strlen($https_prefix))){ //if url begins with https:// make $upload_url begin with https:// as well
    $upload_url = str_replace($http_prefix,$https_prefix,$upload_url);
    }
    elseif(!strncmp($url,$http_prefix,strlen($http_prefix))){ //if url begins with http:// make $upload_url begin with http:// as well
    $upload_url = str_replace($https_prefix,$http_prefix,$upload_url);
    }
    elseif(!strncmp($url,$relative_prefix,strlen($relative_prefix))){ //if url begins with // make $upload_url begin with // as well
    $upload_url = str_replace(array( 0 => "$http_prefix", 1 => "$https_prefix"),$relative_prefix,$upload_url);
    }

    // Check if $img_url is local.
    if ( false === strpos( $url, $upload_url ) )
    throw new Aq_Exception('Image must be local: ' . $url);
    // Define path of image.
    $rel_path = str_replace( $upload_url, '', $url );
    $img_path = $upload_dir . $rel_path;
    // Check if img path exists, and is an image indeed.
    if ( ! file_exists( $img_path ) or ! getimagesize( $img_path ) )
    throw new Aq_Exception('Image file does not exist (or is not an image): ' . $img_path);
    // Get image info.
    $info = pathinfo( $img_path );
    $ext = $info['extension'];
    list( $orig_w, $orig_h ) = getimagesize( $img_path );
    // Get image size after cropping.
    $dims = image_resize_dimensions( $orig_w, $orig_h, $width, $height, $crop );
    $dst_w = $dims[4];
    $dst_h = $dims[5];
    // Return the original image only if it exactly fits the needed measures.
    if ( ! $dims && ( ( ( null === $height && $orig_w == $width ) xor ( null === $width && $orig_h == $height ) ) xor ( $height == $orig_h && $width == $orig_w ) ) ) {
    $img_url = $url;
    $dst_w = $orig_w;
    $dst_h = $orig_h;
    } else {
    // Use this to check if cropped image already exists, so we can return that instead.
    $suffix = "{$dst_w}x{$dst_h}";
    $dst_rel_path = str_replace( '.' . $ext, '', $rel_path );
    $destfilename = "{$upload_dir}{$dst_rel_path}-{$suffix}.{$ext}";
    if ( ! $dims || ( true == $crop && false == $upscale && ( $dst_w < $width || $dst_h < $height ) ) ) {
    // Can't resize, so return false saying that the action to do could not be processed as planned.
    //throw new Aq_Exception('Unable to resize image because image_resize_dimensions() failed');
    $img_url = $url; // MODIFIED
    }
    // Else check if cache exists.
    elseif ( file_exists( $destfilename ) && getimagesize( $destfilename ) ) {
    $img_url = "{$upload_url}{$dst_rel_path}.{$ext}";
    }
    // Else, we resize the image and return the new resized image url.
    else {
    $editor = wp_get_image_editor( $img_path );
    if ( is_wp_error( $editor ) || is_wp_error( $editor->resize( $width, $height, $crop ) ) ) {
    throw new Aq_Exception('Unable to get WP_Image_Editor: ' .
    $editor->get_error_message() . ' (is GD or ImageMagick installed?)');
    }
    $resized_file = $editor->save();
    if ( ! is_wp_error( $resized_file ) ) {
    $resized_rel_path = str_replace( $upload_dir, '', $resized_file['path'] );
    $img_url = $upload_url . $resized_rel_path;
    } else {
    throw new Aq_Exception('Unable to save resized image file: ' . $editor->get_error_message());
    }
    }
    }
    // Okay, leave the ship.
    if ( true === $upscale ) remove_filter( 'image_resize_dimensions', array( $this, 'aq_upscale' ) );
    // Return the output.
    if ( $single ) {
    // str return.
    $image = $url;
    } else {
    // array return.
    $image = array (
    0 => $url,
    1 => $dst_w,
    2 => $dst_h
    );
    }
    return $image;
    }
    catch (Aq_Exception $ex) {
    error_log('Aq_Resize.process() error: ' . $ex->getMessage());
    if ($this->throwOnError) {
    // Bubble up exception.
    throw $ex;
    }
    else {
    // Return false, so that this patch is backwards-compatible.
    return false;
    }
    }
    }
    /**
    * Callback to overwrite WP computing of thumbnail measures
    */
    function aq_upscale( $default, $orig_w, $orig_h, $dest_w, $dest_h, $crop ) {
    if ( ! $crop ) return null; // Let the wordpress default function handle this.
    // Here is the point we allow to use larger image size than the original one.
    $aspect_ratio = $orig_w / $orig_h;
    $new_w = $dest_w;
    $new_h = $dest_h;
    if ( ! $new_w ) {
    $new_w = intval( $new_h * $aspect_ratio );
    }
    if ( ! $new_h ) {
    $new_h = intval( $new_w / $aspect_ratio );
    }
    $size_ratio = max( $new_w / $orig_w, $new_h / $orig_h );
    $crop_w = round( $new_w / $size_ratio );
    $crop_h = round( $new_h / $size_ratio );
    $s_x = floor( ( $orig_w - $crop_w ) / 2 );
    $s_y = floor( ( $orig_h - $crop_h ) / 2 );
    return array( 0, 0, (int) $s_x, (int) $s_y, (int) $new_w, (int) $new_h, (int) $crop_w, (int) $crop_h );
    }
    }

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #33740
    sait
    Supported

    Hi,

    This part is the original functions.php file, I didn’t add;

    When delete this part and paste only your forum codes everything distorted but photos still don’t appear. Like Attach:

    <?php
    /**
    * Claue child theme functions.
    * @since 1.0.0
    * @package Claue

    * Enqueue style of child theme
    */

    function jas_claue_enqueue_script() {
    wp_enqueue_style( ‘jas-claue-parent-style’, get_template_directory_uri() . ‘/style.css’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘jas_claue_enqueue_script’ );

    Attachments:
    You must be logged in to view attached files.
    #33743
    sait
    Supported

    when look the developers tools, src is unknown. I try to attach a media as a featured image from cdn file direction, it can see image. I don’t understand, whats the problem

    Attachments:
    You must be logged in to view attached files.
    #33746

    Can you send me your site admin account and check in “Set as private reply” we need more check before give you a hint.

    Thanks

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #33747
    sait
    Supported
    This reply has been marked as private.
    #33755
    sait
    Supported

    Hi again,
    While researching the subject, I saw one of the github user re-adapt the aqua resizer for the amazon s3. maybe this can give you an idea for other cdn providers.

    https://github.com/richardyu314/aqua-resizer-s3/blob/master/aqua-resizer.php

    Thank you for your interest.

    #33758

    Hi,

    Did you running your site on Amazon S3?

    Please following additional steps:

    (1) download the AWS PHP SDK from https://github.com/richardyu314/aqua-resizer-s3

    (2) update line 17 (“require_once”) to point to the absolute path of your AWS SDK installation’s aws-autoloader.php (i.e., /var/www/html/aws/aws-autoloader.php”)

    (3) update $s3url on line 84 to point to the URL of your S3 or Cloudfront CDN (i.e., a888888.cloudfront.net). Do not use a trailing slash on this URL

    (4) update lines 162 to 165 with your AWS credentials (S3 bucket name, IAM user key, IAM user secret)

    Note that for (3), this implementation assumes that your S3 bucket has a wp-content/uploads path set up. If your S3 bucket is configured differently, change lines 139 and 155 where wp-content/uploads is referenced to your media directory in S3

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #33761
    sait
    Supported

    Hi,

    No,  my site not running on Amazon, but if they can run aqua resizer with amazon, can’t you adapt it to other cdn suppliers too?

    #33796

    Hi,

    I’m sorry i check the code of Amazon S3 but can’t apply for our theme and your site. We still investigate your issue when find solution we will inform you.

    Kind regards

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

    #33808
    sait
    Supported

    Thanks for your interest, looking forward to your good news.

    #33830
    sait
    Supported

    Hi,

    Have you found a solution to the problem ?

    #33857

    I’m sorry, we still not find solution. Does the CDN have option to exclude image of blog?

    Harry
    Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.