다음과 같은 것을 사용하여 작업중 인 특정 프로젝트에 대해 자동으로 둥근 모서리 썸네일을 만들고 싶습니다 .
내가 이상적으로하고 싶은 것은 이와 같은 것을 축소판 작성 프로세스 자체에 연결하고 서버 측에 캐시하는 방법을 찾는 것입니다. /wp-includes/media.php적용 가능한 후크가없는 것 같아서 내 롤을 굴려야 할 수도 있습니다.
어디서부터 시작할지에 대한 단서가 있습니까?
편집 : CSS에는 없습니다. 이것에 대한 좋은 제안이 있었지만 사이트 전체에 경계 반경을 사용하고 있으며 이미지는 서버 측에서 반올림해야합니다. 감사
답변:
wp_create_thumbnail필터에 연결할 수있는 것 같습니다.
function wp_create_thumbnail( $file, $max_side, $deprecated = '' ) {
if ( !empty( $deprecated ) )
_deprecated_argument( __FUNCTION__, '1.2' );
$thumbpath = image_resize( $file, $max_side, $max_side );
return apply_filters( 'wp_create_thumbnail', $thumbpath );
}
따라서 조작 만하고 결과를로 반환하십시오 wp_create_thumbnail.
Php 및 이미지 GD로 둥근 모서리를 처리 할 수는 있지만 (여전히 배경색을 선택해야 함) JavaScript 또는 CSS3로 쉽게 수행 할 수있는 작업 / 코드 / 처리가 엄청납니다.
CSS3의 둥근 이미지의 경우 이미지를 div로 감싸고 이미지를 해당 div의 배경 이미지로 만들어야하지만 실제로는 아닙니다.
따라서 jquery를 사용해야하고 필요할 때 스크립트를 대기열에 넣고 후크를 통해 또는 직접 jquery 클래스를 축소판에 추가해야한다고 생각합니다.
javascript / jquery 트릭은 기본적으로 4 개의 모서리 gif를 이미지에 적용하여 둥근 모양으로 표시합니다. 인터 웹에는 http://maestric.com/doc/css/rounded_corners_images 와 같은 다양한 jquery가 있습니다 .
둥글 지 않다고 아무에게도 말하지 마십시오.
border-radius문제없이 IMG 태그에 직접 적용 할 수 있습니다.
다음은 Wordpress 이미지 필터 중 하나를 사용하는 방법입니다. Chip Bennett에서 제안한 필터를 사용해 보았지만 성공하지 못했습니다.
내가 한 것은 사용자 정의 크기를 만든 다음 각 이미지가 특정 크기인지 phpthumb 필터를 적용하는지 여부를 확인합니다. 이상적으로는 사용자 정의 이미지 크기의 이름을 확인할 수 있기를 원하지만 아직 그 방법을 찾지 못했습니다.
add_theme_support( 'post-thumbnails' );
add_image_size( 'rounded-saturated', 250, 100, true );
require_once('path_to\phpthumb.class.php');
add_filter('image_make_intermediate_size', 'paul_rounded_filter');
function paul_rounded_filter($file) {
$info = getimagesize($file);
// check for our image size and do stuff
if($info[0] == 250 && $info[1] == 100)
{
// create phpThumb object
$phpThumb = new phpThumb();
$phpThumb->resetObject();
// set data source -- do this first, any settings must be made AFTER this call
$phpThumb->setSourceData(file_get_contents($file));
$output_filename = $file;
// PLEASE NOTE:
// You must set any relevant config settings here. The phpThumb
// object mode does NOT pull any settings from phpThumb.config.php
//$phpThumb->setParameter('config_document_root', '/home/groups/p/ph/phpthumb/htdocs/');
//$phpThumb->setParameter('config_cache_directory', '/tmp/persistent/phpthumb/cache/');
// set parameters (see "URL Parameters" in phpthumb.readme.txt)
$phpThumb->setParameter('fltr', 'ric|30|30');
$phpThumb->setParameter('fltr', 'sat|-100');
// generate & output thumbnail
if ($phpThumb->GenerateThumbnail()) { // this line is VERY important, do not remove it!
if ($phpThumb->RenderToFile($output_filename)) {
// do something on success
echo 'Successfully rendered to "'.$output_filename.'"';
//die;
} else {
// do something with debug/error messages
echo 'Failed:<pre>'.implode("\n\n", $phpThumb->debugmessages).'</pre>';
die;
}
} else {
// do something with debug/error messages
echo 'Failed:<pre>'.$phpThumb->fatalerror."\n\n".implode("\n\n", $phpThumb->debugmessages).'</pre>';
die;
}
}
if ( $width || $height ) {
if ( !is_wp_error($resized_file) && $resized_file && $info = getimagesize($resized_file) ) {
$resized_file = apply_filters('image_make_intermediate_size', $resized_file);
return array(
'file' => wp_basename( $resized_file ),
'width' => $info[0],
'height' => $info[1],
);
}
}
return false;
}
해당 코드를 테마의 functions.php 파일에 추가하는 경우 phpthumb을 다운로드하고 경로를 설정하십시오. xampp의 로컬 설치에서 작동하므로 다른 사람들에게도 효과가 있기를 바랍니다. phpThumb 주석은 간단한 데모 예제에서 가져온 것입니다.
CSS로 이것을하지 않을 이유는 없습니다. IE 8 이하를 제외한 모든 주요 브라우저에서 작동합니다 :
IE를 실제로 지원하려면 Modernizr을 사용하면 사용할 수없는 브라우저의 대상 img 요소에 둥근 모서리의 클래스를 추가 할 수 있습니다.
미리보기 이미지와 CSS에 class = "rounded-corners"를 추가하십시오.
.rounded-corners {
-moz-border-radius: 30px 30px 30px 30px;
-webkit-border-radius: 30px 30px 30px 30px;
border-radius: 30px;
}
Firebug를 사용하여 이미지 클래스에 모서리를 추가하여 WPCandy.com의 첫 페이지에서 임의의 이미지에 대한 빠른 테스트를 수행했습니다. 결과는 다음과 같습니다.
전에:
후:
CSS가 Firebug에 입력되었습니다 :
둥글 지 않은 코너는 필요한 경우 대체 방법 중 하나를 사용하십시오.
어떤 섬네일, 일반적으로 "섬네일"이미지 크기 또는 포스트 섬네일을 스타일링 하시겠습니까?
두 가지 모두 CSS를 통해 쉽게 달성 할 수 있습니다 border-radius. 구체적인 답변은 귀하의 정확한 요구에 달려 있습니다. 기꺼이 업데이트하겠습니다.
PS IMHO가 TimThumb / 캐시 된 이미지 라우트로가는 것은 최적이 아닙니다. WordPress에서 생성 한 사각형 코너 이미지 (이미 객체 캐시의 일부 임)를 사용하고 CSS를 사용하여 모서리를 둥글게하십시오.
border-radius이미지에서 잘 작동합니다. 나는 내 테마에 Gravatars를 주석으로 사용합니다.
구글 검색시 GD로 모서리를 둥글게 할 수 있지만 결과는 가장 크지 않습니다. 그들은 약간 멍청하다. 하지만 그것은 내 주관적인 전화입니다 : http://www.assemblysys.com/dataServices/php_roundedCorners.php
이 작업을 수행해야하는 경우 timthumb 스크립트를 시작점으로 사용하는 것이 좋습니다.
Timthumb 프로젝트 : http://timthumb.googlecode.com http://timthumb.googlecode.com/svn/trunk/timthumb.php
Stackoverflow는 이것에 대한 게시물을 가지고 있습니다 : /programming/609109/rounded-corners-on-images-using-php
ccs3pie Rounded Corners 및 CSS3 해킹을 살펴 보았습니까? 즉, 좋은 오래된 즉, 제출을 강제로 수행하는 것뿐만 아니라 원하는 것을 수행해야합니다.
OK 이것은 쉽다 !!
사람들이 가장 깨끗하고 가장 쉬운 방법이라고 말한 것처럼 먼저 css3 border-radius를 사용하는 것입니다. 이것은 IE9가 지원하지는 않지만 지원하지 않는 일반적인 IE6-8을 제외하고 대부분의 최신 브라우저에서 작동합니다.
.round {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
그래서 당신이 나와 같고 클라이언트가 모두 IE를 사용한다면 위의 http://css3pie.com/ 과 같이 CSS3 Pie를 권장 합니다. 유일한 단점은 이미지의 z- 색인을 어지럽히므로 페이딩하는 슬라이더를 사용하면 문제가 발생할 수 있습니다.
CSS3 Pie를 사용하지 않는다면 http://jquery.malsup.com/corner/를 추천 합니다. jQuery와 함께 헤더에 간단히 연결하고 다음을 사용하십시오.
<script>
$(function(){
$('.round').corner();
});
</script>
CSS3 선언을 선택하고이를 지원하지 않는 브라우저의 경우 jquery를 통해 둥근 모서리를 렌더링합니다.
우리는 최근에 클라이언트 웹 사이트에서이 두 가지를 사용했습니다 : http://www.theathenaprogramme.co.uk/
작업 완료 :-) 이것이 도움이 되길 바랍니다.
편집 : 방금 media.php를 통해 이미지를 저장하기 전에이 작업이 필요하다는 것을 알았습니다. 이 경우 내 솔루션이 적용되지 않는다고 생각하십시오.
Get Post Image 플러그인을 사용하여이 작업을 수행했습니다. http://surfhatteras.com/
Get Post Image는 Image WordPress 플러그인 가져 오기 및 phpThumb 라이브러리의 래퍼입니다.
그것을 사용하면 <?php get_post_image ('w=200&zc=1&fltr[]=ric|30|30'); ?> 게시 된 이미지의 모서리를 둥글게하는 것과 같은 일 을 할 수 있습니다 . 또는 이미지를 직접 포장 할 수 있습니다 : http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33
캐시하는 것을 잊지 마십시오! http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite