I'm having a problem where wordpress keeps resizing the featured image, on a single blog post.
Here is an example of the html it is spitting out for:
the_post_thumbnail('large');
<img width="1900" height="849" src="http://127.0.0.1/wp-content/uploads/2016/02/MyImage-1903x850.png" class="attachment-large size-large wp-post-image" alt="MyImage-1903x850" srcset="http://127.0.0.1/wp-content/uploads/2016/02/MyImage-600x268.png 600w, http://127.0.0.1/wp-content/uploads/2016/02/MyImage-1903x850.png 1903w" sizes="(max-width: 1900px) 100vw, 1900px">
As you can see the actual image dimensions are 1903x850. However, wordpress has decided to add a different width/height in the img tag of 1900x849
Ive tried using regen thumbnails and reuploading the image, but it's really strange cant seem to work out why this is happening.
The image is scaling down because there's a max-width set of "1900px" when the image is actually 1903px.
Related
Not sure if this started happening very recently, or if this has been an issue for longer, but I feel it's the former. I think I would have noticed, otherwise.
When I add an image to my post, and set the size to 'enlarged' or 'full' (presumably, I'm translating this from Portuguese), my (custom) theme shows these images either enlarged, or in full width. (To allow for this, I added add_theme_support('align-wide') to my functions.php.)
However, the file that is used, on larger screens, is not the correct one.
This is the image tag I get when including an image that is set to have full width:
<img loading="lazy" width="1003" height="564" src="[...]image.jpg?resize=640%2C360&ssl=1" alt="" class="wp-image-115865 shadow" srcset="[...]image.jpg?w=1920&ssl=1 1920w, [...]image.jpg?resize=300%2C169&ssl=1 300w, [...]image.jpg?resize=1024%2C576&ssl=1 1024w, [...]image.jpg?resize=1536%2C864&ssl=1 1536w, [...]image.jpg?resize=640%2C360&ssl=1 640w, [...]image.jpg?resize=1320%2C743&ssl=1 1320w, [...]image.jpg?resize=150%2C84&ssl=1 150w" sizes="(max-width: 640px) 100vw, 640px">
You can see that the image is displayed at 1003x564 pixels, but that the 'sizes' attribute sets a max-width at 640 pixels.
As a result, this image, displayed at 1003x564 pixels, is an upscaled image of 640 pixels wide.
The result is pixelated, which is not pretty.
What is defining the 'sizes' attribute? Why is it, here, set to 640 pixels? Can I change this? How?
The function that adds attr in images is wp_get_attachment_image()
The function that adds size attr in images is wp_calculate_image_sizes()
They have given filter wp_calculate_image_sizes to modify as per your need.
I am to looking to find out how i can add image that will take up the full width of the screen.
I have currently downloaded the new version of Joomla 3.7.4 and have duplicated the Protostar Template to try and do this.
Any advice would be really appreciated.
Do you just want to use the whole width of the content area? If so you can do this with plain CSS. Just add style="width: 100%" to the image tag like <img src="" style="width: 100%;">. A better way would be to add a new style to the templates CSS file.
I usually upload images larger than the maximum size and have a general CSS rule for images img {max-width: 100%}. Images will be scaled down to fit the width of the content area so I don't need to add additional style information to each image.
I don't want a background image, just an image on the homepage (with elements before and after the image) that will display full screen on every device. I don't want the user to have to click on the image to see it full screen. (I'm using the Harmony theme.)
Here goes the code how you can full screen image on every device but this code may be cause to stretch your image ...
img {
width:100%;
height: 100vh;
}
NOTE: First remove all containers before you do that
Add class "img-responsive" under img like <img class="img-responsive" src="">
This will work only if you have used bootstrap framework in your theme html.
I have a stock image of 1772 px. This image is the largest available. The raw file is gone so I can't create an image of 5120 px wide. How would the markup and CSS look for that image if I want to be able to stretch it nicely across the entire width of the iMac?
Minimum requirements:
I'm using Bootstrap so it has to work with that. And preferably with the img-responsive built-in class. Do I need to have the img-tag in a container-fluid div?
<picture>-element needs to be used since art directing is involved. When the viewport hits 767px and lower I'm displaying the image in portrait mode.
Here's the code I'm experimenting with:
<picture>
<source media="(min-width: 768px)"
srcset="/img/landscape/large.jpg 1772w,
/img/landscape/medium.jpg 886w,
/img/landscape/small.jpg 443w"
sizes="100w" />
<source srcset="/img/portrait/large.jpg 955w,
/img/portrait/medium.jpg 640w,
/img/portrait/small.jpg 320w"
sizes="100vw" />
<img src="/img/landscape/medium.jpg" alt="" />
</picture>
Currently firefox and Chrome managemes to strech out the image nicely but IE10 stops at 1772px and leaves white-space on the right of the image.
If I set the img to width:100% the image will stretch but I'm confused of wheather this is the right approach since in Bootstrap they use max-width.
:)
Recently I changed the default LARGE size from 960px width to 1280px width.
When I upload the image, WP creates the 1280px image, BUT when I insert it into the post, it still uses the 960px settings, even with the 1280 image.
It's like:
<img src="image-1280x853.jpg" alt="" width="960" height="640" class="aligncenter size-large" />
How can I fix this?