Affinity header image

  • Author
    Posts
  • #3030360

    I am currently using Affinity theme and really like the header image that I’m using but would like to make it a little smaller – anyone know if thats possible? If so, how?

    The blog I need help with is walkintheparkstockport.wordpress.com.

    #3030539

    musicdoc1
    Member

    Hi,

    On the Affinity theme, you may crop images used for the site header image, resulting in a shorter (but not less wide) image, as follows:

    • 1. At Customize > Header Images click the Add new image button. This opens the Choose Image module.
    • 2. At the Choose Image module, either select an image from the media library or upload an image from external files. If selecting from the media library, then click on the chosen image.
    • 3. Click the Select and Crop button at the bottom right. This will open the Crop Image module. Crop as desired and then click the Crop Image button.
    • 4. Click the Save & Publish button.

    I found that I could easily reduce the height of the header image, but not the width. Note that the Quick Specs section of the Affinity theme guide says:

    The custom header appears at full-screen width with flexible height.

    So this result is due to theme design. Reducing the width leads to stretching of the cropped portion to the full width, with some loss of quality as a consequence.

    However, my tests produced some other results that were unexpected. I found that if I reduced the width and height to much then the header ended up with the height being much taller than that of the default (2000 x 1200) header images, the small image being stretched both ways (consequently losing quality) to fill the space.

    Also, frequently the cropped header image displayed on the visible site was significantly different from the image displayed in the previewer at Customize.

    #3030583

    Thanks for your reply – the image I’m using is one of the “suggested” ones for Affinity, but when I click on it it doesn’t bring up the Crop button, it just puts it at full size with no option to reduce the height!

    #3030591

    siobhyb
    Staff

    Hi there,

    You’re right that there isn’t a built only way to crop the default header images. To crop them, you’d need to manually download the image to your computer (you could do that by right clicking on the image and choosing to “Save Image As”) and then re-upload it.

    #3030602

    Hi thanks I tried that but unfortunately the image becomes very “pixelated” and doesn’t look great 🤔

    #3030603

    siobhyb
    Staff

    The best advice I can offer here is to make sure you’re resizing the images proportionally to the original size. There’s always going to be some loss in quality when you resize an image but this should be minimal if the new size is proportional to the original.

    #3030605

    Ok thank you I’ll play about with it and see if I can get it clearer ☺

    #3030614

    siobhyb
    Staff

    Sounds great. :) Let us know if we can help with anything else.

The topic ‘Affinity header image’ is closed to new replies.