رفتن به مطلب

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


پست های پیشنهاد شده

سلام

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

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

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

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

ممنون

لینک به ارسال

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


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

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


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

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


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

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

لینک به ارسال

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


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
لینک به ارسال

این کد در اندازه 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 استفاده کنید ، بعد از نصب صفحه افزونه در قسمت ابزار پنل تنظیمات اضافه میشه و با زدن دکمه شروع به پردازش تصاویر قدیمی میکنه و با سایز جدید کراپ میکنه

لینک به ارسال

این کد در اندازه 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
لینک به ارسال

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

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

لینک به ارسال
کروپ نمودن یعنی برش دادن تصویر کوچکتر را که نمی شه به ابعاد بزرگتر برش داد با کد 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 را نگفتید چیه

لینک به ارسال

این کد را


<?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 را وردپرس به تصاویر شاخص می ده

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...