ایجاد یک گالری عکس زیبا در دروپال 7

ساخت گالری تصاویر در دروپال 7

خیلی از مواقع در خیلی از سایت هایی که طراحی میکنیم به گالری تصاویر نیاز پیدا میکنیم. و خوب دوست داریم یک گالری زیبا داشته باشیم. توی این مقاله میخوام نشون بدم که داشتن یک گالری زیبا در دروپال خیلی سخت نیست. پس با من همراه باشید.
برای آموزش ایجاد یک گالری عکس من از قالب bartik ( قالب پیش فرض دروپال 7) استفاده کردم اما واضحه که شما میتونین این آموزش رو برای هر قالبی که دوست دارید انجام بدید. اگر هنوز قالب خودتون رو انتخاب نکردید شاید این مقاله بتونه به شما کمک کنه و یا شاید بخواین از قالب های آماده شده استفاده کنید.
 

پیش نیازها: شما نیاز به دروپال 7 دارید و هم چنین به views. تعجب نکنید برای داشتن یک گالری زیبا به چیز دیگه ای نیاز ندارید. به ما اعتماد کنید.

مرحله 1: ایجاد یک content type جدید به مسیر (/admin/structure/types) برید و یک content type جدید بسازید. من اسم اون رو gallery گذاشتم ( machin name رو به یاد داشته باشید در مرحله 5 بهش نیاز پیدا میکنید) 1.png

مرحله 2: ایجاد یک image style جدید از منوی مدیریت وارد آدرس زیر بشید (your_site/admin/config/media/image-styles) و یک style جدید ایجاد کنید. من اسم اون رو gallery-thumb گذاشتم. رویCreate new style کلیک کنید و Scale and Crop رو انتخاب کنید. طول و عرضش رو روی 150px تنظیم کنید

. 4.jpg

مرحله 3: مدیریت فیلدها بعد از ایجاد یک content type جدید به آدرسStructure --> Content Types بیایید و رویmanager fields کلیک کنید.فیلد body رو حذف کنید و مثل عکس زیر فیلد گالری عکس رو ایجاد کنید. 2.png

در تنظیمات این فیلد و در بخش Number of value گزینه Unlimited رو انتخاب کنید.بعد از ایجاد فیلد رویmanage display کلیک کنید و مثل عکس زیر تنظیمات رو انجام بدید.

5.png

بعد از این مرحله باید عکس های خودتون رو وارد سایت کنید ( از مسیرyour_site/node/add/gallery )

33.jpg

مرحله 4 : ایحاد یک view برای گالری برید بهStructure --> Views و یک view جدید ایجاد کنید. مثل شکل زیر

6.png

مرحله 5: ایحاد یک tempalate به شاخه قالب برید (/themes/bartik/templates/) و node.tpl.php رو پیدا کنید و یک کپی از اون با نام node--gallery.tpl.php ذخیره کنید ( gallery نام ماشین content type که ایجاد کردید است. از اینجا میتونین اطلاعات بیشتری بدست بیارید). فایلی که ایجاد کردید رو باز کنید و مقادیر زیر رو در اون کپی و جایگزین اطلاعات قبلی فایل کنید.

<div id="node-<?php print $node->nid; ?>" class="node-gallery">
	<?php
		$imgcount = count($node->field_img['und']);
		for ($i = 0; $i < $imgcount; $i++) {
    	$image_uri = $node->field_img['und'][$i]['uri'];
			// url
			$masthead_raw = image_style_url('gallery-thumb', $image_uri);
	?>
      <a href="<?php print file_create_url($node->field_img['und'][$i]['uri']); ?>" rel="group-<?php print $node->nid; ?>" class="fancybox">
        <img class="image<?php print ($i + 1);?>" src="<?php print $masthead_raw; ?>" />
      </a>
    <?php } ?>
</div>

&nbsp;field_img['und']); for ($i = 0; $i &lt; $imgcount; $i++) { $image_uri = $node-&gt;field_img['und'][$i]['uri']; // url $masthead_raw = image_style_url('gallery-thumb', $image_uri); ?&gt;&nbsp;&nbsp;<a class="fancybox" href="&lt;?php print file_create_url($node-&gt;field_img['und'][$i]['uri']); ?&gt;" rel="group-&lt;?php print $node-&gt;nid; ?&gt;"><img class="image&lt;?php print ($i + 1);?&gt;" src="&lt;?php print $masthead_raw; ?&gt;"> </a> <!--?php } ?-->

کش سیستم رو پاک کنید و صفحه گالری رو refresh کنید.

مرحله 6: افزودن افکت خوب الان شما یک صفحه گالری دارید که در اون عکس های کوچک به عکس های بزرگ لینک شده اند. در این مرحله میخوایم کمی این صفحه رو زیباتر کنیم و افکت هایی رو بهش اضافه کنیم. به مسیر css در قالب برید (themes/bartik/css/) و فایل style.css رو باز کنید و مقادیر زیر رو به فایل اضافه کنید.

.node-gallery {
  float: left;
  width: 150px;
  height: 150px;
  position: relative;
	margin: 0 60px 50px 0;
}

.node-gallery img {
	position: absolute;
	bottom:0px;
}

.node-gallery .image1 {left: 0px;
  z-index: 3;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease
}

.node-gallery .image2 {left: 7px;
  height: 148px;
  z-index: 2;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease
}

.node-gallery .image3 {left: 14px;
  height: 145px;
  z-index: 1;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease
}

.image1, .image2, .image3{
  border: 5px solid #F3F3F3;
  box-shadow: 1px 1px 2px #666;
  -webkit-shadow:1px 1px 2px #666;
  -webkit-transform:rotate(0deg) translate(0px);
}

.node-gallery:hover .image1{
   z-index: 6;
  -ms-transform: rotate(-5deg) translate(-40px, -2px);
  -ms-transform-origin:center bottom;
  -webkit-transform: rotate(-5deg) translate(-40px, 2px);
  -webkit-transform-origin:center bottom;
  -moz-transform: rotate(-5deg) translate(-40px, -2px);
  -moz-transform-origin:center bottom;
  -o-transform: rotate(-5deg) translate(-40px, -2px);
  -o-transform-origin:center bottom;
}

.node-gallery:hover .image2{
   z-index: 5;
  -ms-transform: rotate(-2deg) translate(0px, 2px);
  -ms-transform-origin:center bottom;
  -webkit-transform: rotate(-2deg) translate(0px, -2px);
  -webkit-transform-origin:center bottom;
  -moz-transform: rotate(-2deg) translate(0px, 2px);
  -moz-transform-origin:center bottom;
  -o-transform: rotate(-2deg) translate(0px, 2px);
  -o-transform-origin:center bottom;
}

.node-gallery:hover .image3{
   z-index: 4;
  -ms-transform: rotate(5deg) translate(40px,-2px);
  -ms-transform-origin:center bottom;
  -webkit-transform: rotate(5deg) translate(40px,2px);
  -webkit-transform-origin:center bottom;
  -moz-transform: rotate(5deg) translate(40px,-2px);
  -moz-transform-origin:center bottom;
  -o-transform: rotate(5deg) translate(40px,-2px);
  -o-transform-origin:center bottom;
}

مرحله 7: افزودن fancybox
بعد از مرحله 6 شما افکت ها رو در صفحه گالری مشاهده میکنید وقتی که نشانگر موس رو روی عکس ها ببرید. اما هنوز وقتی روی عکس ها کلیک میکنید شما رو به سمت اندازه واقعی عکس ها هدایت میکنه. زیاد نگران نباشید. تا آخر این آموزش زمان زیادی نمونده. در این مرحله با کمک fancybox میخوایم گالری رو زیباتر ببینیم.
اول شما نیاز دارید که fancybox رو دانلود کنید. به مسیر قالب برید (themes/bartik) و یک پوشه جدید به نام "js" بسازید. فایل دانلود شده رو باز کنید و فایل jquery.mousewheel-3.0.6.pack.js و پوشه source رو در این مسیر (پوشه js) کپی کنید. نام پوشه source رو به fancybox تغییر بدید. حالا باید کدهای fancybox رو به فایل template قالب اضافه کنید.
پس در قالب bartik فایل template.php رو پیدا کنید و اون رو باز کنید. و function زیر رو در اون پیدا کنید

function bartik_process_page(&$variables) {

bartik_process_page(&amp;$variables) { این مقادیر رو دقیقا بعد از function اضافه کنید

drupal_add_js(drupal_get_path('theme', 'bartik') . '/js/jquery.mousewheel-3.0.6.pack.js');
drupal_add_js(drupal_get_path('theme', 'bartik') . '/js/fancybox/jquery.fancybox.pack.js');
drupal_add_css(drupal_get_path('theme', 'bartik') . '/js/fancybox/jquery.fancybox.css');
$fancybox = "jQuery(document).ready(function() {
    jQuery('.fancybox').fancybox();
});";
drupal_add_js($fancybox, 'inline');

شما الان یک گالری عکس زیبا دارید. امیدوارم این مقاله به شما کمک کرده باشه. شما از چه ابزارهایی برای ایجاد یک گالری زیبا در سایت خودتون استفاده میکنید؟

 

خوشحال میشیم نظرات خودتون رو در مورد این مقاله و روش های دیگر ایجاد گالری با ما درمیان بزارید.

 

دیدگاه‌ها

تشکر

خیلی ممنونم از مطلب خوبتون :) اگر قصد دارید زود تر و بیشتر رشد کنید ، بگردید ببینید مردم توی دروپال بیشتر دنبال چی هستند و بیشترین سوال ها و جست و جو ها در مورد چیه در مورد همان ها مطلب بنویسید... مثل همین کاری که الان کردید :) شاد و پیروز باشید

ممنون از اظهار لطف شما اما

ممنون از اظهار لطف شما اما واقعیت اینه که دنبال این نیستیم که ببینیم بقیه دنبال چی میگردند. دنبال این هستیم تا ببینیم در حال حاضر چه موضوعاتی در دروپال در زیان فارسی کمتر بهشون پرداخته شده تا وجه دیگه ای از دروپال رو نمایان کنیم. تا الان خیلی ها دروپال رو یک سیستم قوی و در عین حال نه چندان زیبا میدونستند پس این مطلب رو برای اثبات زیبایی های دروپال نوشتیم.

جالب بود. با استفاده از این

جالب بود. با استفاده از این روش و کمی سلیقه و ابتکار میشه گالری‌های زیبایی ساخت. با کدوم مرورگرها سازگاری داره؟ تست کردید؟

سلام ممنون هیرش عزیز.

سلام ممنون هیرش عزیز. نه متاسفانه با همه مرورگرها تست نکردم. با FF و Chrome که میدونم کار میکنه.

تشکر

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

کار جالبی انجام دادید و خود

کار جالبی انجام دادید و خود نشان دهنده میزان حرفه ای بودن نویسنده مطلب است. اگه همین رو به صورت پلاگین برای views درست می کردید خیلی جالب تر میشد. البته برای این جور کار ها ماژول های آماده برای دروپال زیاد وجود دارد. در واقع میشه گفت روش مورد استفاده ی شما از روش های سخت تر (برای مبتدیان) است و بیشتر مناسب حرفه ای ها هست و راه ساده تر هم موجود بود.

شما درست میگید. بیشتر هدف این

شما درست میگید. بیشتر هدف این بود که نشون بدیم که که حتی فقط با ماژول views هم میشه یک گالری ایجاد کرد

مشکل در طراحی

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

اگر میخواهید مو به مو بر اساس

اگر میخواهید مو به مو بر اساس این آموزش پیش برید پس باید اسم ها رو به همین شکل انتخاب کنید و حتما هم از قالب battik استفاده کنید.

سلام.

سلام. راستش من هر کاری میکنم در صفحه structure فقط block و menu و محتوا , taxonomy رو می بینم. این viewکجاست؟ ضمنا ماژول view رو نصب کردم و فعال هم هست! ضمنا لطفا برای تازه کارها یک hello world درست کنید خیلی ممنون می شم. ممنون از راهنمایی هایتان.

6

سلام ، برای دروپال 6 چی پیشنهاد میکنید؟

دسته بندی

سلام خسته نباشید یک سوال داشتم در دروپال 7 در دسته بندی بخشی هست بنام برچسب ها و از طرفی ما برا موضوع بندی از این طریق اسفاده میکنیم. خواستم بدونم چرا این دو یک جا اومده؟ و هر دو با ادرس http://localhost/taxonomy/term/ هست؟ چرا در دروپال 7 هم از taxonomy برا برچسب استفاده شده

من متوجه نشدم. یعنی شما میگید

من متوجه نشدم. یعنی شما میگید نباید از taxonamy برای برچسب استفاده میشد؟

با سلام مجدد

با سلام مجدد مگه taxonamy در اصل برا موضوع بندی نیست؟ بنظر شما اگه هم برا موضوع بندی و هم برچسب از taxonamy استفاده بشه خوبه؟ و یا برا برچسب افزونه خاصی رو پیشنهاد میدید؟

نه در واقع برچسب هم نوعی دسته

نه در واقع برچسب هم نوعی دسته بندیه. ماهیت اینها با هم فرقی نداره اما رفتار ما در طراحی سایت میتونه با اونها متفاوت باشه

سلام و ممنون

سلام و ممنون من مرحله تنظیمات فیلد رو که عکسش هم هست.همون جایی که استایل رو انتخاب میکنیم.توی دروپال پیدا نکردم.بعد اضافه کردن فیلد یه صفحه تنظیمات میاد که اصلا شبیه عکس نیس! و از سه گزینه ای که اینجا هست فقط image style رو پیدا کردم..گزینه های دیگه نیس! چرا؟ بازم ممنون

این داکیومنت برای دروپال 7

این داکیومنت برای دروپال 7 هست. آیا شما از دروپال 7 استفاده میکنید؟

سلام بله.از 7.12 فکر کنم

سلام بله.از 7.12 فکر کنم

خوب وقتی فیلد image رو اضافه

خوب وقتی فیلد image رو اضافه میکنین کافیه مرحله بعدی رو فقط ذخیره کنید. کار خاصی نمیخواد بکنید.

سلام خسته نباشید

سلام خسته نباشید من این گالری رو ساختم و مشکلی هم نداشتم. اما مشکلی که هست اینه که قصد داشتم زیر تصاویر یک فیلد متنی اضافه کنم و توضیحی زیر عکس نوشته بشه اینکار رو هم میکنم اما در صفحه نمایش فیلد متنی رو نمیاره؟ مشکلی از کجاست؟

به سایت دروپالی من هم یه سری

به سایت دروپالی من هم یه سری بزنید و نظرتون رو بگید http://www.daneshnameh.youhosting.ir

بنظرم اینکار را براحتی با

بنظرم اینکار را براحتی با ماجول slideShow میتوان انجام داد

ماژول های زیادی هستند که

ماژول های زیادی هستند که اینکار رو انجام میدن. هدف نشان دادن روش جدیدی است

سلام من از قالب دیگه ای که

سلام من از قالب دیگه ای که خودم ساختم دارم استفاده می کنم و داخل قالب من نه فایل template.php , node.tpl.php پس باید چی کار کرد...؟ تازه این کد ناقص نیست؟؟؟؟ $imgcount = count($node->field_img['und']); for ($i = 0; $i $image_uri = $node->field_img['und'][$i]['uri']; // url $masthead_raw = image_style_url('gallery-thumb', $image_uri); ?>

@#13 کد ناقص نیست اما چه

@#13 کد ناقص نیست اما چه قالبی هست که هیچ کدوم از این فایل ها رو نداره؟ 

من موبه مو رعایت کردم

من موبه مو رعایت کردم قالبم هم bartik و در.پال 7.اما نشد .یعنی فقط تا مرحله 4 نتیجه داد.....

gallery assistent

دوستان آیا ماژولی شبیه gallery assistent on drupal 6 در دروپال 7 سراغ دارین؟

@#16 شما میتوانید از ماژول

@#16 شما میتوانید از ماژول media و media gallery استفا ده کنید.در ضمن متاسفانه کدهایی که در این محتوا نوشته بودم به هم ریخته. سعی میکنم زود درستش کنم

من مراحل را رفتم اما انگار که اشتباهی کردم

سلام دوستان من مراحل را رفتم اما انگار که اشتباهی کردم حالا آدرس سایت و ادرس مدیریت را که میزنم پیغام زیر میاد field_img['und']); for ($i = 0; $i < $imgcount; $i++) { $image_uri = $node->field_img['und'][$i]['uri']; // url $masthead_raw = image_style_url('gallery-thum کلا دسترسی به سایت ندارم چطور این خطا را رفع کنم؟

سلام و خسته نباشید.

سلام و خسته نباشید. به نظر میاد این کد شما غلط باشه،میشه تصحیحش کنید ممنون

با سلام و درود.

با سلام و درود. من وقتی بعد از اینکه یک فیلد برای نوع محتوای جدیدم می سازم و در نهایت اونو ذخیره میکنم که به مرحله بعد برم با ارور زیر مواجه می شوم لطفا راهنمایی کنید با تشکر: An AJAX HTTP error occurred. HTTP Result Code: 200 Debugging information follows. Path: /drupal7/system/ajax StatusText: OK ResponseText: Fatal error: Call to undefined function drupal_array_diff_assoc_recursive() in C:\xampp\htdocs\drupal7\sites\all\modules\token\token.pages.inc on line 23

دیدگاه جدیدی بگذارید

آخرین ارسال ها

محتواهای محبوب

درباره ما

Author
اینجا دروپال یعنی همه چیز. در مورد دروپال صحبت میکنیم. ماژول هامون رو به اشتراک میزاریم در مورد قالب دروپال ، فروشگاه دروپال، دروپال فارسی و تاریخ شمسی دروپال صحبت میکنیم و هرچیزی که در مورد طراحی سایت با دروپال میدونیم به هم انتقال میدیم. دروپالیون یک سایت شخصی نیست. ما دست همه کسانی که برای پیشرفت دروپال تلاش میکنند رو میفشاریم و با آغوش باز اونها رو در این سایت میپذیریم.

تماس با ما

با ما تماس بگیرید.

logo-samandehi