I have uploaded an image into a wordpress website and when i enable open in lightbox the image actually shrinks to about a 200x200px square. the original file is much larger and im wondering if there is a way to enable the lightbox to display the larger image (or at least not shrink the image once it is opened in a lightbox)
Turns out the image link the lightbox was referencing had dimensions in the url, going to the media tab and taking the image location itself and pasting it in fixed the issue.
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 a clients website using the Revolution Slider plugin. I'm trying to optimise the page for mobile page speed.
Each slide is just a background image. The problem is that the image is 1920x1080 which is the same image used on mobile screens that are 640px wide or less. This makes the page load a larger file image then is needed.
I've tried removing the background image and including 2 versions of the image to the slide on their own layers. One layer only shows for mobile and the other only for desktop but even though it doesn't display both images it still loads them both. The mobile view shows the smaller image but still loads the larger one without using it.
Wordpress creates small, medium, large and thumbnail versions of images uploaded to the media library. I thought the plugin would use these by default for different screen sizes but I can't see how to set this or do it manually.
Is there a way for me to have the smaller image file display for smaller screens without loading the larger image file? If not is there another slider WordPress plugin that can do this?
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'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.
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.