আমি ভাবছি যে রেগেক্স ব্যবহার ব্যতীত ওয়ার্ডপ্রেসগুলি স্বয়ংক্রিয়ভাবে বৈশিষ্ট্যযুক্ত চিত্রের উচ্চতা এবং প্রস্থের বৈশিষ্ট্যগুলিকে হার্ডকোডিংয়ের কোনও সহজ উপায় নেই কিনা ...
যেহেতু আমি আমার প্রকল্পের জন্য একটি নমনীয় গ্রিড ব্যবহার করছি (যিনি না!) এটি কিছু ছদ্মবেশী ইমেজ সমস্যার সৃষ্টি করছে।
উত্তর:
আপনি বৈশিষ্ট্যযুক্ত চিত্রের URL পেতে পারেন এবং ম্যানুয়ালি এটি আপনার সামগ্রীতে যুক্ত করতে পারেন, যেমন:
<?php
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail' );
if ($image) : ?>
<img src="<?php echo $image[0]; ?>" alt="" />
<?php endif; ?> srcsetবৈশিষ্ট্যটি অন্তর্ভুক্ত নয় ।
image_downsizeপাওয়া ফাংশনের আউটপুট ফিল্টার করে আপনি প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি সরাতে পারেন wp-includes/media.php। এটি করার জন্য, আপনি নিজের ফাংশনটি লিখুন এবং এটি আপনার থিমের ফাংশন.এফপি ফাইলের মাধ্যমে বা একটি প্লাগইন হিসাবে সম্পাদন করুন।
উদাহরণ:
বৈশিষ্ট্য widthএবং heightবৈশিষ্ট্য অপসারণ করুন ।
/**
* This is a modification of image_downsize() function in wp-includes/media.php
* we will remove all the width and height references, therefore the img tag
* will not add width and height attributes to the image sent to the editor.
*
* @param bool false No height and width references.
* @param int $id Attachment ID for image.
* @param array|string $size Optional, default is 'medium'. Size of image, either array or string.
* @return bool|array False on failure, array on success.
*/
function myprefix_image_downsize( $value = false, $id, $size ) {
if ( !wp_attachment_is_image($id) )
return false;
$img_url = wp_get_attachment_url($id);
$is_intermediate = false;
$img_url_basename = wp_basename($img_url);
// try for a new style intermediate size
if ( $intermediate = image_get_intermediate_size($id, $size) ) {
$img_url = str_replace($img_url_basename, $intermediate['file'], $img_url);
$is_intermediate = true;
}
elseif ( $size == 'thumbnail' ) {
// Fall back to the old thumbnail
if ( ($thumb_file = wp_get_attachment_thumb_file($id)) && $info = getimagesize($thumb_file) ) {
$img_url = str_replace($img_url_basename, wp_basename($thumb_file), $img_url);
$is_intermediate = true;
}
}
// We have the actual image size, but might need to further constrain it if content_width is narrower
if ( $img_url) {
return array( $img_url, 0, 0, $is_intermediate );
}
return false;
}image_downsizeহুকের সাথে নতুন ফাংশন সংযুক্ত করুন :
/* Remove the height and width refernces from the image_downsize function.
* We have added a new param, so the priority is 1, as always, and the new
* params are 3.
*/
add_filter( 'image_downsize', 'myprefix_image_downsize', 1, 3 );আপনার সিএসএসে চিত্রগুলি সঠিকভাবে স্কেল করতে ভুলবেন না:
/* Image sizes and alignments */
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full {
max-width: 97.5%;
width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}আশা করি এটি আপনাকে সহায়তা করবে।
চিয়ার্স,
srcset, sizesএবং অন্যান্য প্রতিক্রিয়াশীল ইমেজ দুর্ভাগ্যবশত বৈশিষ্ট্যাবলী। :( এটি আমার বর্তমান একাকীকরণ, যা পুনরায় বৈশিষ্ট্যগুলি পুনর্নির্মাণ করে: gist.github.com/cibulka/8e2bf16b0f55779af590472ae1bf9239
আপনি post_thumbnail_htmlগুণটি মুছে ফেলতে ফিল্টারটি ব্যবহার করতে পারেন :
function remove_img_attr ($html) {
return preg_replace('/(width|height)="\d+"\s/', "", $html);
}
add_filter( 'post_thumbnail_html', 'remove_img_attr' );এটি আপনার functions.phpফাইলে রাখুন
আপনি এর সাথে ইনলাইন শৈলী / বৈশিষ্ট্যগুলিকে ছাড়িয়ে নিতে পারেন !important:
.wp-post-image {
width: auto !important; /* or probably 100% in case of a grid */
height: auto !important;
}এটি সবচেয়ে পরিষ্কার সমাধান নয়, তবে এটি আপনার সমস্যার সমাধান করে।
wp-post-imageআমার চিত্রগুলিতে অন্তর্ভুক্ত ছিল না। পরিবর্তে আমার মত কিছু ছিল wp-image-26। আমাকে অন্য একজন নির্বাচক ব্যবহার করতে হয়েছিল তবে ধারণাটি কার্যকর হয়েছিল।
সিএসএস সমাধান:
img[class*="align"], img[class*="wp-image-"] {
width: auto;
height: auto;
}এটি প্রতিক্রিয়াশীল চিত্রগুলিকে যেমন করা উচিত তেমনভাবে কাজ করতে দেয়, ইতিমধ্যে আপনি ইম্জ উপাদানটিতে প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি বজায় রাখবেন, যা সম্ভবত পুরানো ব্রাউজারগুলির জন্য, পারফরম্যান্স এবং / অথবা এইচটিএমএল বৈধতা যাচাইকারীদের পক্ষে উত্তম।
পিএইচপি সমাধান:
এটি ডাব্লুপি সম্পাদকের ('মিডিয়া যুক্ত করুন' এর মাধ্যমে) যে কোনও নতুন যুক্ত মিডিয়ায় প্রস্থ / উচ্চতার বৈশিষ্ট্যগুলি যুক্ত করা রোধ করবে। এফওয়াইআই, এটি আপনার চিত্রের ক্যাপশনগুলিকেও প্রভাবিত করতে পারে!
function remove_widthHeight_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}
add_filter( 'post_thumbnail_html', 'remove_widthHeight_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_widthHeight_attribute', 10 );