I want to make WordPress images responsive, I have read many articles, but I am facing problem with mobile responsive.
This is the code I use :
function blog_2( $attr, $attachment, $size ) {
$attr['sizes'] = '(min-width: 1025px) 1118px, (min-width: 768px) 985px, 95.45vw';
return $attr;
} add_filter( 'wp_get_attachment_image_attributes', 'blog_2', 10, 3 );
<img width="1920" height="1080" src="https://wsite.com/wp-content/uploads/2022/12/blog-10.jpg" class="attachment-full size-full" alt="" loading="lazy" srcset="https://wsite.com/wp-content/uploads/2022/12/blog-10.jpg 1920w, https://wsite.com/wp-content/uploads/2022/12/blog-10-728x410.jpg 728w, https://wsite.com/wp-content/uploads/2022/12/blog-10-985x555.jpg 985w, https://wsite.com/wp-content/uploads/2022/12/blog-10-1118x629.jpg 1118w" sizes="(min-width: 1025px) 1118px, (min-width: 768px) 985px, 95.45vw">
In mobile mode, I want it to be loaded in size 728x410, but when I test on pagespeed site, I see that it is loaded in mobile size 985x555, This has bothered me a lot, Friends, do you have experience in this field to guide me?
Try
Width: 100% and height: auto
for full screen use height: 100vh
Related
I am learning to code and while developing a test website I liked the way below code snippet worked to have more control and print responsive srcset images. The only thing missing is How can I get the dynamic title which I add inside the wordpress media upload to show on the front end as a result of the code.
Please note that the below snippet prints the alt tag from the image correctly, However, title is not showing...
<?php
echo get_the_post_thumbnail($post->ID, 'large', array('title' => '', 'sizes' => '(max-width: 480px) 480px, (max-width: 640px) 512px, (max-width: 960px) 960px, (max-width: 1280px) 480px, '));
?>
One way is to use get_post & pass the ID of the thumbnail & get the title from the object.
echo get_post($post->ID)->post_title;
echo get_post(get_post_thumbnail_id())->post_title;
i have one CSS issue (i hope so). After inserting this CSS by my side:
.owl-item>.product .product-thumbnail>img, .owl-item>.product .wp-post-
image, .products:not(.electro-v1)>.product .product-thumbnail>img,
.products:not(.electro-v1)>.product .wp-post-image {
height: 320px !important;
}
images on shop are alligned properly, but this caused some images to be scretched or distorzed, its not in their natural size.. Can someone to tell me where is my error in my CSS, and what to do to fix it? Many thanks
Yup, you're stretching the image by forcing the height to be 320px. Try applying the height to the wrapper element instead:
.owl-item>.product .product-thumbnail,
.products:not(.electro-v1)>.product .product-thumbnail {
height: 320px !important;
}
You can use this code in functions.php of your theme.
add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}
I'm the superadmin for a smaller network of multisites for a client. All network sites have the same name so organizing all the sites gets a bit of a cluttered mess:
Changing the titles of each site is not an option (Since of some SEO-optimization and smiliar).
I've only found guides on how to change ALL the dashboard logos to one other (via wp_enqueue_style in functions.php), but nothing when using multisites. Any ideas?
This might be posible to do with CSS.
Try to target each class, or if they all got the same class, you can use :nth-child operator.
.your-class:nth-child(1){
// CSS to change logo
}
.your-class:nth-child(2){
// CSS to change logo
}
.your-class:nth-child(3){
// CSS to change logo
}
Below is some code for inserting css to the admin area. Place this code in the functions.php.
I did a test on a regular site, and it worked, but have not tested it on a multisite like yours.
Hope it works, and good luck :)
function custom_admin_logo() {
echo '
<style type="text/css">
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/your-logo.jpg) !important;
background-position: 0 0;
color:rgba(0, 0, 0, 0);
background-size: cover;
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
</style>
';
}
add_action('wp_before_admin_bar_render', 'custom_admin_logo');
I am trying to add some css to portfolio pages only on my word press site.
An example page is:
http://www.1aproductions.co.uk/portfolio/22/
The css code i am trying to add is:
.header-wrapper {
background-position:top;
background-color:transparent !important;
background-image:url('http://www.1aproductions.co.uk/wp-content/uploads/2014/06/Florence-Nightingale-smaller-no-flo.jpg') !important;
background-size: 100% auto;
}
Which would display a similar effect to the header on this page (if I could only get it to work!)
http://www.1aproductions.co.uk/work/?cat=dramas
Any Help would be greatly appreciated!
Thanks
P
It looks as though portfolio is a custom post type. So try this:
function my_custom_css() {
if ( is_singular( 'portfolio' ) ) {
echo "<style>
.header-wrapper {
background-position:top;
background-color:transparent !important;
background-image:url('http://www.1aproductions.co.uk/wp-content/uploads/2014/06/Florence-Nightingale-smaller-no-flo.jpg') !important;
background-size: 100% auto;
}
</style>";
}
}
add_action( 'wp_head', 'my_custom_css' );
See the classes of body
single single-portfolio postid-22 siteorigin-panels fixed-header no-slider dark-header --- on portfolio
page page-id-7 page-template page-template-template-portfolio-gallery-php siteorigin-panels fixed-header no-slider dark-header --- on categories.
You can add your specific background using that classes.
.single-portfolio .header wrapper{
background: xxx;
}
and
.page-id-7 .header wrapper{
background: yyy;
}
I have attached a thumbnail image to the post. I have used the following code
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
add_image_size( 'post-image', 550, 650, true );
}
This is the site URL http://digitalsensebd.com/talking-threads/ .But images go to stretch when the height more than 650px. Please tell me how can I solve the stretch problem.
In main.css line 127, you have the CSS .thumblin-img img { width: 100%; }. If you change that property, or remove it, you will see your picture not stretch.
If you want to preserve the aspect ratio (and make the site responsive) change the CSS to this:
.thumblin-img img {
max-width: 100%;
height: auto;
}
If you're using the featured image you might want to use "set_post_thumbnail_size" instead of "add_image_size":
set_post_thumbnail_size( 550, 650, true );
http://codex.wordpress.org/Function_Reference/set_post_thumbnail_size