تعیین سایز اولین تصویر پست (نه تصویر شاخص!)

[Milad123 285]

سلام به همگی

من میخوام که فقط اولین تصویر داخل پستم یه طول و عرض مشخص داشته باشه و بقیه تصاویر هر سایزی بود همون سایز رو نمایش بده!

الان این کد رو توی فایل استایل قالبم دارم :

.post-content img {
	   width: 480px;
	   height: 640px;

با این کد،طول و عرض تصاویر پست مشخص شده

نمیخوام از max و min استفاده کنم،چون میخوام سایز تصاویر دقیقا همین باشه نه کمتر و نه بیشتر!

اما حالا میخوام این سایز فقط روی اولین تصویر پست عملکرد داشته باشه،و روی تصاویر بعدی یک پست تاثیری نداشته باشه.

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

حالا چنین چیزی امکان پذیر هست یا خیر؟

[Milad123 285]

یا اینکه بگید چجوری میشه یه div مستقل ساخت و هرکدوم از تصاویر پست رو که خواستم داخل اون div قرار بدم تا بجای طول و عرض استانداردی که کدشو توی پست اول گذاشتم،از طول و عرض همون div استفاده کنه!

[imanfakhar 26231]

این کد را به functions.php اضافه کنید

function fimg( $atts, $content = null ) { 
	 return '<div class="first-img">'.do_shortcode($content).'</div>';
}
add_shortcode('fimg', 'fimg');

این کد را به style.css

.first-img img {
width:100px;
height:100px;
}

و تصویر اول را به این صورت احضار نمایید

[fimg]<img src="example.jpg">[/fimg]

[Milad123 285]

این کد را به functions.php اضافه کنید

function fimg( $atts, $content = null ) {
	 return '<div class="first-img">'.do_shortcode($content).'</div>';
}
add_shortcode('fimg', 'fimg');

این کد را به style.css

.first-img img {
width:100px;
height:100px;
}

و تصویر اول را به این صورت احضار نمایید

[fimg]<img src="example.jpg">[/fimg]

نمیخوام بطور دائم برای هر پستی که میخوام بزنم یکی یکی عکساشو ویرایش کنم بندازم داخل این کد!!

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

چنین کاری امکان پذیر نیست؟

[hamidwi 479]

آدرس آنلاین بزارید .

این لینک هم می تون بهتون کمک کنه.

http://pars-soft.ir/index.aspx?Article=Reference-selectors-in-CSS-Part-3

ویرایش شده تیر 93 توسط hamidwi

[imanfakhar 26231]

function get_first_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}

و در محل نمایش در برگه single.php یا index.php

<div class="first-image"><?php echo get_first_image() ;?></div>

[Milad123 285]

function get_first_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}

و در محل نمایش در برگه single.php یا index.php

<div class="first-image"><?php echo get_first_image() ;?></div>

اگه درباره این کد بیشتر توضیح بدید ممنون میشم چون حس میکنم منظورمو اشتباه متوجه شدید!

الان کد دومی که دادید رو میگید توی قالب قرار بدم و به این صورت اولین تصویر پست فراخوانی میشه،اما تصویر اول پست وسط جملاته!

الان این پست رو ببینید.

سایز تصویر پست مشخصه (با کدی که توی پست اول قرار دادم)

حالا من اگه بخوام آیکونی توی این پست استفاده کنم مثلا با سایز 20×20 نمیتونم،چون هر عکسی بذارم توی پست سایزش بزرگ میشه!

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

تصویر داخل پسته،قرار نیست جایی فراخوانی بشه!

فقط میخوام استایل اولین کد img که داخل پست قرار میگیره اون سایز مشخص رو داشته باشه و بقیه img ها سایز دلخواه داشته باشن!

آدرس آنلاین بزارید .

این لینک هم می تون بهتون کمک کنه.

http://pars-soft.ir/...s-in-CSS-Part-3

آدرس آنلاین چی بدم عزیز توضیح دادم دیگه

ممنون،لینک رو چیزی ازش سر در نیاوردم متاسفانه

[imanfakhar 26231]

این کد جی کوئری رو تست کنید کارکردش بستگی به متن های ارسالیتون داره اگر منسجم باشند عمل می کنه کد را در foter.php بگذارید

<script type="text/javascript">
$(document).ready(function() {
$(".content p:first-child img:first-child").filter(function() {
$(this).addClass("first-image");
});
})
</script>

اگر تصویرتون در پاراگراف اول نیست این کد را هم چک کنید

<script type="text/javascript">
$(document).ready(function() {
$(".content img:first-child").filter(function() {
$(this).addClass("first-image");
});
})
</script>

content را با post-content عوض کنید و

.first-image {
width:100px;
height:100px
}

را هم به style.css اضافه کنید

[Milad123 285]

این کد جی کوئری رو تست کنید کارکردش بستگی به متن های ارسالیتون داره اگر منسجم باشند عمل می کنه کد را در foter.php بگذارید

<script type="text/javascript">
$(document).ready(function() {
$(".content p:first-child img:first-child").filter(function() {
$(this).addClass("first-image");
});
})
</script>

اگر تصویرتون در پاراگراف اول نیست این کد را هم چک کنید

<script type="text/javascript">
$(document).ready(function() {
$(".content img:first-child").filter(function() {
$(this).addClass("first-image");
});
})
</script>

content را با post-content عوض کنید و

.first-image {
width:100px;
height:100px
}

را هم به style.css اضافه کنید

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

<script type="text/javascript">
$(document).ready(function() {
$(".post-content img:first-child").filter(function() {
$(this).addClass("first-image");
});
})
</script>

این کد هم به آخر فایل استایل اضافه کردم :

.first-image {
width:480px;
height:600px
}

تغییری ایجاد نشد متاسفانه!

حتی کد قبلیمم حذف کردم اما بازم تغییری ایجاد نشد!

ویرایش شده تیر 93 توسط Milad123

[imanfakhar 26231]

http://jsfiddle.net/fakhar/vgvcN/

http://jsfiddle.net/fakhar/vgvcN/1/