I'm trying to create a bootstrap gallery with the thumbnail component. I pulled the code directly from getboostrap.
When viewing the page at full size everything looks fine. However, when I resize the screen to make it smaller the images don't adjust to fit inside of the thumbnail box. What I was hoping to do is have an image that adjusts in size based on how wide the thumbnail box is.
Instead the thumbnail box ends up being substantially wider than the image itself, especially on medium sized screens. The images I'm using for my source images are more than large enough to take up the entire space within the thumbnail.
Any ideas?
Thanks
Related
Is it possible using only CSS to replicate how as screen sizes change but the same amount of image is seen? I have been able to scale the image but the amount of the image seen changes as screen sizes change. I am fairly new to learning CSS and appreciate any help.
I am trying to replicate this site. Just the initial section and first image.
https://ayesha.dropletthemes.com/home-beauty-salon/
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?
How can I force mediawiki to disable resizing and use the original size of my image? My main problem is that I'm uploading small parts of screenshots. If I don't use the original size then they look awful. (Imagine a 237px wide image resized to 400px....) But I don't see any option for that.
http://www.mediawiki.org/wiki/Help:Images#Size_and_frame
By simply using the image name, it will fit the image to screen which is really bad! For example, a 300px wide screenshot cutout looks awful on a full hd monitor... You could say that the image may be too large for the users' screen but in my particular case that is not the case. I'll always be using small images (300px and smaller) and the users will always watch these pages on desktop monitors.
I'm sorry I was very dump. If I don't use any option then it is displayed in its original size. I was mistaken because somebody has changed the zoom level of my browser, but I did not realize this because the monitor resolution was so high...
Is an image displaying in a lightbox script (e.g. prettyPhoto, lightbox, thickbox, etc) affected by high pixel ratio devices?
For example, if I had an 800px wide image up in a lightbox, will it be shown at 800 CSS pixels or 800 actual pixels? To probe further, is an image displayed raw in the browser affected in the same way?
If images displayed with lightboxes are affected by retina screens, what's the solution? Simply link to a larger image? (assuming the script auto resizes images to fit in the viewport)
Perhaps someone needs to develop a new jQuery plugin. :)