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 :)
Related
Goal: When creating an image gallery in Wordpress 5.3.2 using the Gutenberg editor, I'd like to be able to select the image size.
Why: The block gallery automatically serves the large image and then relies on CSS to resize the image to fit the flexbox layout. Instead I'd like to choose the medium size for my site, which is closer in size to what's displayed in the layout. This will improve load times, as users aren't being served oversized images.
Question: Is there some code I can add to functions.php that will give me the option to choose the image size I want or to override the default large size for the medium size?
I understand what you're going for and unfortunately WordPress and Gutenberg still loads the full-size, original image (and just resizes it in css) :(
There are several closely-related issues that describe this
https://core.trac.wordpress.org/ticket/45407
https://github.com/WordPress/gutenberg/issues/9620
https://github.com/WordPress/gutenberg/issues/6177
Update, 2021:
Gutenberg no longer loads the full-size, original image and you can choose which in the block's right side panel which of the registered image sizes to load;
but that image is often still larger than necessary and not fully optimized; more information at https://gist.github.com/skorasaurus/a01249d4302226bf12c80dd979322303
I have portrait images with about 200x600 size. I would like to create a square version of it with 600x600 size.
Is it possible somehow?
Unfortunately the hard crop set the width first and I get only the center of the image.
add_image_size( 'square', 600, 600, true );
Required below. Upload portrait and get square version of it.
I recently found this plugin, https://wordpress.org/plugins/square-thumbnails which seems to do exactly what you need.
It will create a square thumbnail image and fit the original image inside the square.
I haven't tested it on a production site, so I can vouch for the plugin, but it's worth trying.
WordPress functions for image manipulation can't work like this, they can crop images, but they can't fill them up to be expanded.
Images can have different backgrounds, and automatically choosing colours for that is not easy to do. If the images are with background transparency, then, it is easier to do, but still, WordPress can't do that. I am not sure of any plugin for WordPress that can do this.
Best way to do this is to hire someone to code it for you, and again, it will work fine only if images don't have background.
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'm working with the Header Image Slider plugin for WordPress (which uses the Nivo Slider) and I can't seem to get the images to the size I need on a smaller screen.
I've looked around plenty and tried various things in my media queries like setting the max-width, but I can't put my finger on what the problem is. Each image is cutting off on the right-hand side. I'd like to get the images to roughly 708x245 on the next step-down. Any advice? Thanks!
My Site
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.