X Pro Theme and WP Retina 2x

Support
#1

Hey,
I bought the pro version of WP Retina X but face some problems when activating the X Pro Theme on my site.
Here I have a huge featured image 6000x wide shown:
http://staging.fourtylove.com/post-master-template/
The image is processed by the plugin but somehow the weird sizes generated by X Pro (the entry sizes) cant be generated.
The result is, that the featured image is not optimized for retina. Could you look into that problem since I don’t really understand what’s going on or where to start.
Login Data added.
Thanks!

#2

Hey @awecesar,

Not sure how WP Retina X works but I see the container is larger than the natural size of the entry image coming from Pro.

Would you like to use the Full image size instead? If so, we could need to override Pro’s Featured Image function. To do that, you will need to copy the function in featured.php which is located at pro\framework\functions\global folder to your child theme’s functions.php.

Here’s a screenshot of the function and the image size you need to change. For more details about the image size or Post Thumbnails, please see https://codex.wordpress.org/Post_Thumbnails

I just went ahead and tested that in your site and the featured image is using the full size now.

Hope that helps.

#3

Hey @christian_y ,
thanks for the help so far.
I don’t really understand the problem to this point. When I install the WP Retina 2x Plugin it looks at my featured image and delivers it in 2x resolution when viewed on a retina screen.
With your change in code my featured image is always delivered in full size, even when viewed on a NON retina screen.
Could you help me here further?
Thanks!

#4

Hey @awecesar,

I’m sorry but we’re not familiar with how WP Retina plugin works. But, the image now is many times larger than its container and that basically is retina ready. With that said, you won’t need the WP Retina plugin for this scenario. For details, please see number #3 in this article. As far as I can tell, WP Retina automatically uses image replacement or srcset. X / Pro handles the Featured Image separately so maybe that is why WP Retina plugin won’t work.

If you need to integrate WP Retina to X Featured Image, regretfully, you will need to modify the function I showed you previously. That would be outside the scope of our support though as we’ll be going deeper into custom coding.

Thank you for understanding.

#5

Thanks.
Could you revert the changes you made? I can’t find the changes in my functions.php in my child theme.
And could you also tell me what exactly you changed to get the image size bigger?
It would be perfect if you just make the changes in my child themes functions.php so I can check everything by myself :slight_smile:

#6

Hey @awecesar,

I made the change in your child theme. Looks like you removed the code already. I see the original X image size being used.

I detailed the change I made in my previous reply.

Thanks.

#7

Hey,
I am really struggling with the solution.
My site is not displaying the x2 sizes of the images.
Could you please help me here?

#8

Hey @awecesar,

I’m sorry but I have given you a solution but you removed it. You asked me to remove it but upon checking, the code I placed in your site was already removed. Here’s the code you need to edit the featured image function. As I said in my first reply, the code will use your Full image size which is more than 2x the size of the container. That is what retina devices need.

if ( ! function_exists( 'x_featured_image' ) ) :
  function x_featured_image( $cropped = '' ) {

    $stack     = x_get_stack();
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( has_post_thumbnail() ) {

      if ( $cropped == 'cropped' ) {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'full', NULL );
        }
      }

      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
            esc_url( get_permalink() ),
            esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
            $thumb
          );
          break;
      }

    }

  }
endif;

If you want to integrate the WP Retina plugin to the featured image function, that would need custom development which is outside the scope of our support.

Thank you for understanding.

#9

Thanks @christian_y !
I have good news. If you want to use X or Pro and need retina images (That are only loaded on retina screens) you can simply install the free version of wp retina 2x and switch the “Method” to "HTML Rewrite. Works flawless for me without any customizations needed :wink:
Thanks!

#10

Thanks for the information!
Glad that it . works for you now!

Cheer!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.