Header image too small

This topic contains 11 replies, has 3 voices, and was last updated by  John Marcy 4 years, 11 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • #522402

    John Marcy
    Full Member
    Post count: 9

    I am using the Whoop! theme, but I believe the issue lies in Directory Starter. When customizing the theme, there is a spot to upload a header image. The image gets cropped to 1600px x 85px. I can’t skip the cropping function, so the image is much smaller than the header area (see attached image).

    My screen is 1920×1080. Screens are getting larger all the time. I saw another thread on the same topic, and the suggestion was to add custom CSS to make the image cover the area, but scaling an image up only makes it blurry and ugly.

    Please get rid of the cropping function when uploading the header image.

    Thanks.

    #522422

    Alex Rollin
    Moderator
    Post count: 27815

    I will take this up as a suggestion and share your idea with the developers.

    #522441

    John Marcy
    Full Member
    Post count: 9

    That would be great. Thanks!

    #522821

    Naveen Giri
    Moderator
    Post count: 1559

    Hi John,

    I have notice your concern. I am on it.
    Get back to you with an update soon.

    Thanks

    #522894

    John Marcy
    Full Member
    Post count: 9

    Thanks!

    #522897

    Naveen Giri
    Moderator
    Post count: 1559

    Hi John,

    disabling crop will load the full image which is not good idea.
    I have reviewed theme code. there is already a solution for your issue.

    You can set the required hight of the image using the constant below.

    
    define('DT_HEADER_HEIGHT', '500px');
    

    Add this code in wp-config.php and it will change the image required height from 85px to 500px.

    Thanks

    #522900

    John Marcy
    Full Member
    Post count: 9

    Thanks. Does the code above also work for width, like DT_HEADER_WIDTH?

    Ultimately, the image should be something like 2700×300 to cover Retina devices, like iPads. In any case, 1600px wide is way too narrow for modern screens.

    #522903

    John Marcy
    Full Member
    Post count: 9

    I just added that. It allowed me to make the image taller, but it also defined .site-header to be that tall as well. I just want a larger background image to cover the header area. I don’t want the header to expand with the image. DT_HEADER_WIDTH did not work, of course.

    I know I can add CSS to make .site-header the right size again, but I’m just fighting against a bad design. The width is still not right. You need to allow people to upload an image that will cover the header area. My 6 year old, 15″ laptop screen is 1920px wide. 1600px is not wide enough.

    #522936

    Naveen Giri
    Moderator
    Post count: 1559

    Hi John,

    I have added patch for header image width in theme.
    it will up in upcoming version of directory starter theme. if you want me to apply patch before next release. Please share site details and FTP in private reply.

    about your second concern of changing #site-header height on setting height of image DT_HEADER_HEIGHT. I think thats legit because the header image set to the #site-header container.

    You can changing the container height is custom work. so you can do it with additional css.

    Thanks

    #522989

    John Marcy
    Full Member
    Post count: 9
    This reply has been marked as private.
    #523036

    Naveen Giri
    Moderator
    Post count: 1559

    Hi John ,

    I have added code for width. You can upload a new image and check it.

    I will consider your second request for mobile devices. meanwhile i have added css in customiser.

    Thanks

    #523086

    John Marcy
    Full Member
    Post count: 9

    Thanks for your help.

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

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
20% Discount Offer
Hurry! Get your 20% discount before it expires. Get 20% Discount