ماکزیمم طول و عرض تصویر

[asemon14 36]

سلام دوستان

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

یعنی با استفاده از زمینه دلخواه عکسو اپلود می کنم و تعداش 12 تاس

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

اینم ادرس انلاین:

http://heyat.iust.ac.ir/?cat=31

لطفا کمک کنید

ممنون

[مهدی 1668]

سلام

این‌که یک عکس با اندازه برزگ کوچیک نمایش داده بشه جدا از بالا بردن زمان لود صفحه پیش‌نمایش نامناسبی رو برای مخاطب درست می‌کنه

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

منبع اصلی

ویرایش شده آبان 93 توسط مهدی

[imanfakhar 26231]

    max-width:100%;
    height:auto;

[asemon14 36]

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

دوما چطور می تونم برای اون عکسای کوچیک کاری کنم عکس بند انگشتی نمایش داده بشه نه عکس بزرگ!

سوما این کد های max-width:100%; و .... رو به کدوم کلاس باید بدم؟

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

[مهدی 1668]

روش کار در آموزش به طور کامل گفته شده

گالری عکس هم خود وردپرس می‌سازه ...

کد جناب فخار هم برای عکس مد نظرتون هست

[asemon14 36]

مثل اینکه متوجه سوالم نشدین

ببینید

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

حال من برای نمایش عکس به صورت گالری از کد زیر استفاده کردم:

<li>
   <a href="http://heyat.iust.ac.ir/wp-content/uploads/2014/11/DSC06964.jpg" class="image-gallery cboxElement" title=" » شب چهارم">
<img src="http://heyat.iust.ac.ir/wp-content/uploads/2014/11/DSC06964.jpg" width="130" height="130" alt=" » شب چهارم"></a>
</li>

الان من دو مشکل دارم:

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

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

لطفا راهنمایی کنید

در ضمن از افزونه زمینه دلخواه هم استفاده کردم

[مهدی 1668]

روش کار در آموزش به طور کامل گفته شده

گالری عکس هم خود وردپرس می‌سازه ...

خود وردپرس گالری می‌سازه بدون هیچ افزونه‌ای ...

[asemon14 36]

شما چه اصراری داری بگی وردپرس گالری می سازه

خودم میدونم

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

چون گالری وردپرس تو تابع the_content نمایش داده می شه و من این رو نمیخوام

[imanfakhar 26231]

شما یا باید کاری که می خواهی بکنی را اصولی و درست انجام دهی یا اگر از مسیر اشتباهش رفتید منتظر نباشید بشه همه مشکلات را حل کرد

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

[asemon14 36]

سلام اقای فخار

من از افزونه استفاده کردم

و دقیقا 12 زمینه گذاشتم

که خودشون تصویر آپلود میکنه و میتونه ادرس عکس یا شناسه عکس یا توضیح تصویر رو بگردونه

الان اگه من اینا رو بزارم روی شناسه یه عدد برمیگردونه

حالا شما بگین با این عدد من چطور میتونم تصویر بند انگشتی و تصویر کامل رو فراخوانی کنم

ممنون

[imanfakhar 26231]

در فایل functions.php ببینید چنین کدی اگر دارید

add_theme_support('post-thumbnails');
add_image_size( 'large', 700, '', true );
add_image_size( 'medium', 250, '', true );
add_image_size( 'small', 120, '', true );

ممکنه اعداد فرق کنند منظور معرفی add_image_size است) زیرش این دو خط را بعد از اصلاح ابعاد به اندازه دلخواه قرار بدید:

add_image_size( 'my_gallery_thumbnail', 300, 200, true );
add_image_size( 'my_gallery_large', 1024, 768, true );

اگر هم نداشتید بگذارید در انتهای فایل functions.php

و این کدها را هم در محل نمایش(بجای $img_id باید آی دی تصویر را بگذارید).

$my_gallery_thumbnail = wp_get_attachment_image($img_id, 'my_gallery_thumbnail');
$src = $my_gallery_thumbnail[0];
$width = $my_gallery_thumbnail[1];
$height = $my_gallery_thumbnail[2];
$link =  wp_get_attachment_image($img_id, 'my_gallery_large');
$link = $link[0];
echo '<a href="'.$link.'"><img src="'.$src.'" width="'.$width.'" height="'.height.'"></a>';

[asemon14 36]

ممنون آقای فخار

ولی من این کد رو قرار دادم

هیچ عکسی نشون نداد و فقط یه عدد که ای دی عکس هست نشون میده

<?php

$img_id=the_field('pic1');
$my_gallery_thumbnail = wp_get_attachment_image($img_id, 'my_gallery_thumbnail');
$src = $my_gallery_thumbnail[0];
$width = $my_gallery_thumbnail[1];
$height = $my_gallery_thumbnail[2];
$link = wp_get_attachment_image($img_id, 'my_gallery_large');
$link = $link[0];
echo '<a href="'.$link.'"><img src="'.$src.'" width="'.$width.'" height="'.height.'"></a>';
?>

اینم لینک آنلاین

http://heyat.iust.ac.ir/?cat=65

ویرایش شده آبان 93 توسط asemon14

[علی زینلی 2114]

سلام سلام !

من به شدّت به بحث ساخت گالری علاقه دارم!

از اون راهی که شما میخواین برین و بدون افزونه کارتون رو انجام بدین بهترین راهه!

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

استادم گفتن.

ببینید.

برای کاری که شما میخواین انجام بدین باید به تعداد سایز هایی که میخواین داشته باشین از این کد استفاده کنین:

add_image_size( 'medium', 250, '', true );

برای مثال شما میخواین که در صفحه اصلیتون یه عکس بند انگشتی نمایش داده بشه که سایزش 300 در 300 پیکسل باشه

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

add_image_size( 'sisad', 300, 300,true);

حالا این کد دقیقاً چکار میکنه؟

اینکار: میاد و هر عکسی که شما آپلود میکنین به طور خودکار به ابعاد 300×300 در میاره

_____________

خب تا اینجا شما دستور دادین به وردپرس که عکس های آپلودی رو به این ابعاد در بیاره!

باید حالا فراخوانیش کنین که این عکس 300×300 رو در مثلاً فایل single.php تون نمایش بده

باید هرجایی که میخواین این عکس نمایش داده بشه کد زیر رو بذارین:

<?php the_post_thumbnail('sisad'); ?>

خب!

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

برای اینکار باید اوّل یه کد رو بنویسین که لینک تصویر اصلی رو بگیره!

   <?php
            $full_size_img = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full-size');; // Full Size
            ?>

و حالا برای اینکه روی اون عکس که کلیک کردن بره توی این لینک باید این کد رو بذارین:

<a href="<?php echo $full_size_img[0]; ?>"><?php the_post_thumbnail('sisad'); ?></a>

_________________________________________

خلاصه:

البتّه یادتون باشه که اون کدی که باید در functions.php قرار بدین باید شامل سایز های sisad و full-size باشه تا این عکس ها کار کنه.

که میشه این:

add_theme_support('post-thumbnails');
add_image_size( 'sisad', 300, 300,true);
add_image_size( 'full-size',  9999, 9999, false);

کد sisad میاد عکس رو دقیقاً به 300×300 تبدیل میکنه

و کد دومی میاد به خاطر false آخرش هرچقدر که شد ازش میبره...

__________________

این کد هم شد برای نمایش:

<?php the_post_thumbnail('sisad'); ?>

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

   <?php
            $full_size_img = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full-size');; // Full Size
            ?>

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

<a href="<?php echo $full_size_img[0]; ?>"><?php the_post_thumbnail('sisad'); ?></a>

ویرایش شده آبان 93 توسط anwalt

[asemon14 36]

اقا من این کد رو هم گذاشتم

باز هم نشد

این کد رو توی صفحه category میزارم

ولی نمیدونم چرا فراخوانی نمیکنه

<?php

$img_id=the_field('pic1');
$gthumbnail = wp_get_attachment_image($img_id, 'gthumbnail');
$src = $gthumbnail[0];
$link =  wp_get_attachment_image($img_id, 'glarge');
$link = $link[0];
echo '<a href="' .$link. '" class="image-gallery cboxElement" title="' .wp_title(). '">
<img src="'.$src.'" width="130" height="130" alt="' .wp_title(). '"></a>';
?>