Image in header

When I add an image to my header, I see that it is forcing me to crop it. Even when I stretch the crop markers to cover the entire image, it still crops it to some maximum size allowed.

I would like the actual size of the image which is just a little bigger, but it actually makes a big difference for how it looks.

How can I get a larger image in the header? Please see https://www.screencast.com/t/FFEk8lcHbL.

I am trying to post an urgent question how can i do this

Hello Rob,

Please check this topic:

@goaannie, please create a new topic for your question in order to make it easier to help you.

Kind Regards, Roman.

Hi Roman,

This did not work. I installed/activated Code Snippets to set the logo to 260 length and 100 height so that the size I really want, 233 x 84 will be allowed. The problem is that when I add the image in Site Branding it changes 233 x 84 to 200 x 72. In fact any image larger than 200 x 72, no matter how I crop it, goes to 200 x 72.

My site is https://stage.shapiro.cloud/

If you need admin access, where can I send you the details privately?

Rob->

Hello Rob,

It looks like this issue requires close inspection, this goes beyond our support policy. As an option, you can find a reputable freelancer on Upwork for this kind of service.

Kind Regards, Roman.

Hi Roman,

Further inspection shows that this is purely a simple CSS issue - see https://www.screencast.com/t/G4DlvkWJ. Given what you see from the screenshot, what CSS do I need?

While I don’t completely understand how to develop a WP theme, the image is in the “masthead” section and I would think that this is something the theme controls. If you look at the SiteOrigin themes that do the exact same thing as Astrid, they allow any size image (I think you customize this “masthead” size) and then when you scroll it reduces the “masthead” and image about 50-60%.

Going to what I think is the root of this problem, when you tell the theme to select an image from your Media the WP Media function is governed by the controls of the theme. This seems to determine if the image needs to be cropped or if cropping can be skipped. In this case, the control says to crop because of the max size control in the theme. This is further demonstrated when you upload other images in the theme (i.e. header image) where there are no such controls and any size image can be used — thus Skip Cropping is allowed by the WP Media manager.

The CSS workaround clearly is to re-specify the correct original-sized image and change the width and height accordingly. Interestingly enough, when you do this, the “masthead” section automatically adjusts to accommodate the larger image as demonstrated by the fact that the 1px border under the section grows and that it scrolls properly when reducing the size of the section.

Rob->

Hello Rob,

I’ve just inspected your logo once again and its size is still 200×72px.

You can learn more about WordPress Custom Logo functionality here:

Kind Regards, Roman.

I only changed it on my production site (not the stage site), and only in Google Developer where it is not retained. Is the information I provided in the screen shot insufficient?

Hello Rob,

Screenshot isn’t enough for me to see the cause.

Kind Regards, Roman.

I can’t give you access to production. I discovered that the below change makes the image the size I want. Can you comment if this is good or if it will cause any other consequences?

.custom-logo-link img {
    width: 233px !important;
    height: 84px !important;
    content: url("https://shapiro.cloud/wp-content/uploads/2017/04/shapiro-cloud-5_25per.png") !important;
}

Rob->

Hello Rob,

content property seems to be inappropriate in that CSS code.

You can learn more about content property here:
https://www.w3schools.com/cssref/pr_gen_content.asp

Kind Regards, Roman.

Hi Roman,

Reading about this, I don’t see why there is a problem. Based on the description of the CSS Content Property it shows:

url(url) Sets the content to be some kind of media (an image, a sound, a video, etc.)

I see no notes or warnings that it is inappropriate. When I try to add :before or :after, I do not get the results I want (no effect).

May I ask you to explain why you think it is inappropriate?

Rob->

PS: It is my belief that this is a case where an improvement of the template would reap many rewards to users. Why not let the user put any size image they want as the logo (or at least have a maximum of something much larger than the current 200px limit, say double it to 400px) and then reduce it by X% or by a specified size in pixels when the header is scrolled? Since these are only specification parameters to the CSS, it would not create bloat in the template.

Hello Rob,

Well, according to the description that I mentioned above, the content property is used only with :before and :after pseudo-elements, you don’t have any of these two pseudo-elements in that CSS code.

Kind Regards, Roman.

Hi Roman,

Ok, I see your point, but when I put the :before or :after on the img (i.e. img:before or .custom-logo-link:after) the result is that the image returns to the wrong, smaller-sized image.

Rob->

Hello Rob,

It’s very hard to help you without a link to the live site.

Kind Regards, Roman.

I’ll be happy to create an account for you, but what privileges do you need and how can I send you the login privately?

Hello Rob,

I think that Subscriber role should be enough.

You can use this link:
[hidden]

Please include a link to this topic.

Kind Regards, Roman.

Hi Roman,

Just posted 2 messages with title Shapiro Cloud in your WP contact page. Second one was because I forgot to include the link to this discussion - sorry.

Rob->

Hello Rob,

  1. Currently the actual size of your logo image is 200×72px. However, it’s artificially stretched to 233×84px using CSS code.

  2. I have just tried the PHP solution (that I mentioned earlier) on my local Astrid install and it worked, so you might want to try it once again.

Kind Regards, Roman.