How to make the header image in TwentyTen theme Retina-friendly?

  • Resolved richardbrand

    (@richardbrand)


    9 years, 6 months ago

    I’m using the TwentyTen theme and the header image is automatically cropped to 940 x 198 pixels when I upload it in Appearance > Header. Even if I upload an image that is twice that size (1880 x 396), the theme will still automatically downscale it, making it appear blurry on Retina and high-res displays.

    Does anyone know how I can go into the TwentyTen theme files and change the code so that it uses a 2x high-res image that it then scales down to 940 x 198 px, rather than directly cropping it and using the small version?

Viewing 1 replies (of 1 total)
  • Thread Starter richardbrand

    (@richardbrand)

    I figured out how to do this.

    When you upload image.jpg for the TwentyTen header, WordPress creates a cropped version of the header image, calls it cropped-image.jpg and saves it in wp-content/uploads.

    All I had to do was find the cropped-image.jpg file in cPanel and replace it with the the 1880 x 396 version. Now it works perfectly. WordPress calls up cropped-image.jpg, scales it down to 940 x 198, and displays it on the header, but because it’s @2x the size, it looks perfect on Retina displays.

Viewing 1 replies (of 1 total)
  • The topic ‘How to make the header image in TwentyTen theme Retina-friendly?’ is closed to new replies.