I'm trying to add images to a banner that was included with the WordPress template I'm using, but it's cropping the images instead of scaling them properly.
I noticed that the height of the banner was too small, but I can't seem to be able to change it in the CSS code.
This is the page where I'm trying to sort out the banner - Money Matters Home, and this is the original image that I uploaded - home-banner-1.png
As you can see, it's being cropped from the original, despite the fact that I've tried to change the height of the banner. The original image dimensions are 900 x 278, and it should scale naturally to 1152 x 355, but isn't.
Does anyone know how to sort this out? I feel like I'm missing something really obvious here!
You could just re-size the image in Photoshop or Gimp to the exact dimensions of the WordPress header.
Use your browsers developer inspect tool to figure out the exact dimensions.
Change dimensions of your image first to 870x230 (as i see the dimensions of current banner) - you can do it in Photoshop or even Paint.
Then when you upload image in Wordpress via Uploader, Upload the Image file and Select "Original" option in Size of image before saving rather than small/medium/large etc
Your current image banner file is: http://bojomedia.co.uk/preview/moneymatters/wp-content/uploads/2013/08/home-banner-1-temp-870x230.png
note 870x230 at the end of that file name - This is wordpress generated cropped version of original file that's being used there.
I hope this helps.
Related
Our developer has disappeared off the face of the planet and when our web server updated it's PHP version, formerly square images have cropped to landscape.
https://www.weareabsoluteuk.com/retail/
The section in question is the portfolio (screenshot attached) these were previously square but not display landscape despite the featured images still being a 1:1 ratio.
I'm familiar with Divi but this seems to be a custom built slider the developer has made and I'm just trying to figure out how I can make these images display as square again as we've sent countless requests to our developer to no avail
enter image description here
Would really appreciate a point in the right direction as I can get the containers to the size they should be but the image never fills them
Thanks
.et_pb_row
for this class max-width: 1080px is there, so it is restricting the images to look like rectangle instead of square, and your images are not square
your images are of resolution 400 x 284, so it wont look like square. You can try images as background images in order to appear them as square.
My logo (which actually only contains my name ) on my wordpress twenty sixteen child theme site is not completely sharp. I have tried everything like higher resolution uploading in jpg, png or svg. Nothing helped.
I didn't use site title instead of a logo because I don't want to use too many different font families since this might slow down my site. And also I think the font family 'skia' I'm using is not very common so that could make even loading worse.
Hope someone can help me on this. Or correct me if my findings are not correct.
Hazy
It could be that the CSS of your theme is resizing the image. Or maybe you have a plug-in that automatically compresses images on upload.
if this is still relevant, i have come across the solution.
i had the same issue
no matter what logo i made or even text only it had some blurry effect
the key to this is when you export your logo (in Photoshop for ex), set the height and width to the desired size, and set the same height and width in the Wordpress customizer as well.
in my case i have made my logo in PNG at the size of 500x200 and exported it to 200x80PX
in Wordpress im using OceanWp as a theme, this allows you to set the height and width of your logo inside the settings of the customizer.
so basically set it to 200x80 and your good to go
my logo contains only text and a square
my logo now looks sharp as the sky :)
I'm having trouble getting Revolution Slider (version 5.2.5.3) to work properly on my website and I'm looking for some help.
For reference the test page I'm using can be located here: http://www.capidale.co.uk/home-2
The problem I'm having is the background images on each slide are "zoomed" in. All images are 960x350 and I've set the grid settings also for 960x350. However, inspecting the code, the background images appear to being assigned values of 1653x549.
I've racked my brain but I just can't get it to work. I've tried using the images as "layers" and setting the background to transparent. But then I can't get the images to display at all.
Appreciate any help. Thank you.
i have looked at the code and it says the natural values for the
Best best is to resize the images so they are 960x350 this should fix the issue if the image is zoomed still on the styling of the image set max-width:960; and max-height:350;
to save you the trouble use this image and replace the existing img, if it works then this is due to the natural sizes of the image
:D
I have a problem with new images. When I'm uploading a new image it looks like this:
Any suggestions how to fix this ?
I ran into this problem. Every time I added an image into a page, part would be cropped off. I tried playing with the settings > media etc, turned off the Smush plugin, changed the image size and dimensions in photoshop. But part of the image still kept getting trimmed off when uploading. Finally, I uploaded the image directly into Media, where it looked fine. Tried placing it in the page - cut off again. Copied and pasted the image code into the page and it shows up fine. I haven't nailed down the issue, but at least this is a workaround if it is only one or two problematic images.
If your problem is that img is cut at the top or/and at the bottom, you probably have a hard crop in your template.
This might help you
Or, try a work around:
Add a high-quality, max-height image, then you can and scale it up with transform: scale(1.5); in css.
Hope that helps.
If you go to Settings -> Media, you should set width or height to 0. In this way, that dimension will be scaled and nothing is cut off.
If you set width to 0, vertical (height > width) images will be reduced, and horizontal images will be enlarged a bit.
Go to settings > media and you will see your image settings. What is happening is that the image you are uploading is too large and thus it gets cropped. Uncheck Crop thumbnail to exact dimensions (normally thumbnails are proportional), and your images will get scaled rather than cropped.
If this is still no good to you, then you will have to jump into the code that is displaying the images.
I am having trouble with the banners on this Drupal Site (www.ciob.org.uk) The static banners are somewhat pixelated when viewed in the front end. In the back end they are listed and shown as they would appear. These seem fine and have no pixelation.
I also have an issue where the banner is 700x230 on the image info yet when I have uploaded an image it cuts 30 pixels off the right side.
Any help on either of these issues would help.
Thanks
You use Imagecache to process your images. ImageCache will resize all images to the dimensions that are configured in his preset. For your case, 700*230
This is your image proccessed with imagecache : http://www.ciob.org.uk/sites/ciob.org.uk/files/imagecache/700x230sc/images/Skills%20Survey%202011%20Banner_1.jpg
This is the image you uploaded : http://www.ciob.org.uk/sites/ciob.org.uk/files/images/Skills%20Survey%202011%20Banner_1.jpg
Th original image is 680*230 pixel, and imagecache will upscale it to 700 pixel wide, that's also why you loose some content on the right.
You can either :
Use an Original image with correct
dimension (700*230)
Don't allow
imagecache to upscale images (there
is an option for that), but you will
probably some blank area in the
banner, on the front page.