Affinity header image

  • walkintheparkstockport · Member ·

    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: (visible only to logged in users)

  • 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.

  • walkintheparkstockport · Member ·

    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!

  • siobhyb · Member ·

    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.

  • walkintheparkstockport · Member ·

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

  • siobhyb · Member ·

    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.

  • walkintheparkstockport · Member ·

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

  • siobhyb · Member ·

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

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