runy

کد نمایش تصویر بدون برش ولی در ابعاد مشخص

9 پست در این موضوع قرار دارد

سلام

دوستان من کدی را لازم دارم که در ان تصویرشاخص را در ابعاد مشخص بدون برش نشان بده

منظورم اینکه مثلا اگر عکس بزرگ تر از اندازه ای که من می خوام باشه در عکس زوم کنه و به اندازه مه من می خوام نشونش بده ولی برش نده و اگر کوچک بود همین طور بزرگش کنه در ابعاد که من میخوام .

مثلا اگر من در ابعاد 200*300 می خوام و عکس فرضا 150*350 است طوری زوم کنه که عرضش که از 150 به 200 رسید طول را هر چی بود رو 300 نشون بده ولی کشش نده تصویر را.

امید وارم منظورم را رسونده باشم.

ممنون

0

به اشتراک گذاری این پست


لینک به پست

من اصلا متوجه منظورتون نشدم


add_image_size('name', 150, 300, true );

این کد طول و عرض را 150 در 300 می کند و تصویر را کروپ میکند


add_image_size('name', 150, , true );

این کد 150 در هرچی که شد (کروپ می کنه)


add_image_size('name', 150, 300, false);

صد و پنجاه در 300 بدون کروپ

3

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

من اصلا متوجه منظورتون نشدم


add_image_size('name', 150, 300, true );

این کد طول و عرض را 150 در 300 می کند و تصویر را کروپ میکند


add_image_size('name', 150, , true );

این کد 150 در هرچی که شد (کروپ می کنه)


add_image_size('name', 150, 300, false);

صد و پنجاه در 300 بدون کروپ

این کار را کردم ولی اونی که می خوان نمیشه سایتم را ببنید چه بهم ریخته شده


http://nedaj.ir/

هر کدامشون یه اندازه است انگار نه انگار

اصلا یه کد که تصویر در هر ابعادی باشه (کوچیک یا بزرگ تر از سایز معین) اون را به سایز معین برش بده. یعنی در هر حال مثلا فقط 150*300 برش بده.

این کد های بالا هیچ کدام همه را به یک اندازه نمی کنه می خوام همه یه دست بشن

ویرایش شده در توسط runy
0

به اشتراک گذاری این پست


لینک به پست

این کد در اندازه 150*300 برش می ده


add_image_size('name', 150, 300, true );

و با


the_post_thumbnail('name')

هم فراخوانی می شه

ولی تصویر کوچکتر رو که نمی شه برش داد

برای تصاویر کوچکتر باید css بنویسید

مثلا می تونید تصویر را در یک div با کلاس thumbnailDiv بگذارید و این استایل را بهش بدهید


.thumbnail {
height:auto;
width:auto;
min-height:300px;
min-width:150px;
position:relative;
}
.thumbnailDiv {
display:inline-block;
margin:7px;
border:1px #aaa solid;
width:150px;
height:300px;
overflow:hidden;
}

در ضمن پستهای صفحه اول سایت شما از تصویر شاخص استفاده نمی کنه از تصاویر سایتهای مرجعش استفاده می کنه وقتی شما تصویری را آپلود نکرده اید چطور باید وردپرس تغییرش بده؟

2

به اشتراک گذاری این پست


لینک به پست

با تشکر از استاد

اگر بعد از بارگذاری تصاویر شاخص خواستیم اندازه آن را با کد هایی که استاد دادن تنظیم کنیم تصاویری که قبلا آپلود کردیم کراپ نمیشن (چون این کراپ شدن فقط در هنگام بارگذاری انجام میشه)

اما اگر خواستیم تصاویر قبل از تغییر را با اندازه هایی که تعیین کردیم کراپ بشن باید از افزونه regenerate thumbnails استفاده کنید ، بعد از نصب صفحه افزونه در قسمت ابزار پنل تنظیمات اضافه میشه و با زدن دکمه شروع به پردازش تصاویر قدیمی میکنه و با سایز جدید کراپ میکنه

2

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

این کد در اندازه 150*300 برش می ده


add_image_size('name', 150, 300, true );

و با


the_post_thumbnail('name')

هم فراخوانی می شه

ولی تصویر کوچکتر رو که نمی شه برش داد

برای تصاویر کوچکتر باید css بنویسید

مثلا می تونید تصویر را در یک div با کلاس thumbnailDiv بگذارید و این استایل را بهش بدهید


.thumbnail {
height:auto;
width:auto;
min-height:300px;
min-width:150px;
position:relative;
}
.thumbnailDiv {
display:inline-block;
margin:7px;
border:1px #aaa solid;
width:150px;
height:300px;
overflow:hidden;
}

در ضمن پستهای صفحه اول سایت شما از تصویر شاخص استفاده نمی کنه از تصاویر سایتهای مرجعش استفاده می کنه وقتی شما تصویری را آپلود نکرده اید چطور باید وردپرس تغییرش بده؟

با تشکر از استاد

اگر بعد از بارگذاری تصاویر شاخص خواستیم اندازه آن را با کد هایی که استاد دادن تنظیم کنیم تصاویری که قبلا آپلود کردیم کراپ نمیشن (چون این کراپ شدن فقط در هنگام بارگذاری انجام میشه)

اما اگر خواستیم تصاویر قبل از تغییر را با اندازه هایی که تعیین کردیم کراپ بشن باید از افزونه regenerate thumbnails استفاده کنید ، بعد از نصب صفحه افزونه در قسمت ابزار پنل تنظیمات اضافه میشه و با زدن دکمه شروع به پردازش تصاویر قدیمی میکنه و با سایز جدید کراپ میکنه

کاری که فرمودین را انجام دادم ولی بازم نشد دو تا مشکل پیدا کرده:

1- عکس های کوچیک را نتونست بزرگ کنه حتی اینا که جدیدا آپ کردم به عنوان تصویر شاخص

2- یه فاصله به ابعاد تصویر شاخص بین عنوان و خلاصه مطلب برای مطالبی که تصویر شاخص ندارند انداخته

آدس سایتم :


nedaj.ir

ویرایش شده در توسط runy
0

به اشتراک گذاری این پست


لینک به پست

کروپ نمودن یعنی برش دادن تصویر کوچکتر را که نمی شه به ابعاد بزرگتر برش داد

با کد css باید اونها رو تنظیم کرد و دایو اصلی نمایش تصاویر شاخص را هم باید در داخل شرط نمایش تصویر شاخص قرار بدید

1

به اشتراک گذاری این پست


لینک به پست
کروپ نمودن یعنی برش دادن تصویر کوچکتر را که نمی شه به ابعاد بزرگتر برش داد با کد css باید اونها رو تنظیم کرد و دایو اصلی نمایش تصاویر شاخص را هم باید در داخل شرط نمایش تصویر شاخص قرار بدید

استاد فخار کد ها را من اینگونه استفاده کردم


<div class="text_shakhe">
<?php
$tmp_query = $wp_query;
query_posts('showposts=5&cat=5'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="hotposts">
<div class="onvan">
<H3><span><a href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></span></H3>
</div>
<a href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="رفتن به : <?php the_title_attribute(); ?>">
<div class="gameimg"><?php the_post_thumbnail('app3'); ?></div></a>
<div class="text_shakhe1"><?php the_excerpt(); ?></div>
<div style="clear:both;"></div>
</div>
<?php endwhile;
// Reset Post Data
wp_reset_postdata();
// Reset Query
wp_reset_query();
// load temp query
$wp_query = $tmp_query;
?>
</div>



و کد های سی اس اس

.gameimg img {
border-radius: 5px;
transition: all 0.9s ease 0.1s;
margin: 6px 0;
padding: 2px;
border: none;
border: 2px solid #f8f8f8
}
.gameimg img:hover {
border: 2px solid #F30;
border-radius: 5px;
transition: all 0.9s ease 0.1s;
}
.gameimg {
height:auto;
width:auto;
min-height:160px;
min-width:300px;
position:relative;
}
.gameimgDiv {
display:inline-block;
margin:7px;
border:1px #aaa solid;
width:300px;
height:160px;
overflow:hidden;
}
.onvan {
float: right;
}
.onvan h3 {
font-size: 19px;
}
.text_shakhe1 {
font-family: BYekan;
margin-right: 2px;
float: right;
}
.hotposts {
text-align: justify;
}

آیا مشکل ار کد نویسی است؟؟

آخه اون کدی که گذاشتید درونش

thumbnail

نفهمیدم چیه؟

thumbnailDiv را گفتید کلاسی که تصویر شاخص توش هست ولی

thumbnail را نگفتید چیه

0

به اشتراک گذاری این پست


لینک به پست

این کد را


<?php
if ( has_post_thumbnail() ) {?>
<a class="thumbnailDiv" href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="رفتن به : <?php the_title_attribute(); ?>">
<?php the_post_thumbnail('app3'); ?>
</a>
<?php
};?>

جایگزین


<a href="<?php the_permalink() ?>" rel="bookmark" target="_blank" title="رفتن به : <?php the_title_attribute(); ?>">
<div class="gameimg"><?php the_post_thumbnail('app3'); ?></div></a>

کنید و این کدها را در css بگذارید


.thumbnailDiv .thumbnail {
border-radius: 5px;
transition: all 0.9s ease 0.1s;
margin: 6px 0;
padding: 2px;
border: 2px solid #f8f8f8;
min-width:300px;
min-height:160px;
width:auto;
height:auto;
}
.thumbnailDiv .thumbnail:hover {
border: 2px solid #F30;
border-radius: 5px;
transition: all 0.9s ease 0.1s;
}
.thumbnailDiv {
min-height:160px;
min-width:300px;
position:relative;
display:inline-block;
margin:7px;
border:1px #aaa solid;
width:300px;
height:160px;
overflow:hidden;
}
.onvan {
float: right;
}
.onvan h3 {
font-size: 19px;
}
.text_shakhe1 {
font-family: BYekan;
margin-right: 2px;
float: right;
}
.hotposts {
text-align: justify;
}

کلاس thumbnail را وردپرس به تصاویر شاخص می ده

1

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری