Slideshow Creator เป็น module ไว้นำภาพมาเป็นสไลค์โชว์ภาพใน drupal ของเราง่ายๆครับ ซึ่งสามารถนำไปใช้ร่วมกับ node หรือ block ได้ครับ

โดย module Slideshow Creator สามารถใช้งานร่วมกับ CCK ได้ และยังสามารถดึงรูปจาก directory ของเรามาทำเป็นสไลค์ได้ด้วยครับ ซึ่ง module ตัวนี้จะใช้ jQuery Cycle plugin เป็นตัวจัดการครับ

วิธีติดตั้งให้เราโหลด module jQuery plugins และ Slideshow Creator มาทำการติดตั้งก่อนครับ

สามารถตั้งค่าได้จาก admin/settings/slideshow_creator

ต่อมาให้ไปตั้งค่าการใข้งานใน input formats ครับโดยการแก้ไข format ที่เราต้องการจากนั้นช่อง Slideshow Creator เพื่อทำให้ใส่ code ทำสไลค์รูปได้ครับ

วิธีการใช้งานโดยโค็ดจะเป็นดังนี้นะครับ

[slideshow:VERSION, img=|IMAGE_URL|LINK|TITLE|DESCRIPTION|TARGET|, img=|IMAGE_URL|LINK|TITLE|DESCRIPTION|TARGET|]

อธิบาย
VERSION: เลือกเวอร์ชั่นของ slideshow แต่ค่าที่ใส่ก็คือ 2 ครับ
IMAGE_URL: url ของรูปภาพ
LINK: ใส่ลิงค์ให้กับรูปภาพ
TITLE: หัวข้อรูปภาพ
DESCRIPTION: คำอธิบาย
TARGET: เมื่อใส่ลิงค์ให้กับรูปภาพเราต้องเลือกด้วยว่าจะให้พอกดแล้วเป็นแบบไหน โดยจะเป็นในรูปแบบ html เช่น _blank (default) , _parent, _self

อ่านเพิ่มเติมครับ

ตัวอย่างโค็ดครับ สามารถนำไปใช้งานเพื่อดูตัวอย่างได้ครับ

[slideshow: 2, img=|http://drupal.org/sites/all/themes/bluebeach/logos/drupal.org.png|drupal.org|Drupal|The ultimate CMS. Download it now!|Drupal|, img=|http://www.mysql.com/common/logos/mysql_100x52-64.gif|http://www.mysql.com|MySQL|Free and reliable SQL server and client.|_self|, dir=|files/|yes||Generic Photos|Aren't they great?||]

วิธีใช้งานเพิ่มเติม : http://drupal.org/node/237049

วิธีทำก็ไม่ยากให้โหลดไฟล์มาจาก http://www.prestashop.com/forums/viewthread/25836 ก่อน เจ้าของไฟล์ดันเรียกเป็น module ผมว่ามันไม่ใช่ module นะเพราะเราต้องเข้าไปแก้ไขโค็ดเอง

หลังจากโหลดมาแล้วทำการแตกซิบไฟล์ออกมา ให้เข้าไปที่โฟลเดอร์ root/ แล้วก็อปปี้โฟลเดอร์ js/ ออกมาใส่ไว้ที่ตัวเว็บของ prestashop

จากนั้นทำการแก้ไขไฟล์ admin/tabs/AdminCMS.php โดยหาคำว่า

plugins : "safari,pagebreak,style,layer,table,advimage,advlink,inlinepopups,media,searchreplace,contextmenu,paste,directionality,fullscreen",

แก้เป็น

plugins : "safari,pagebreak,style,layer,table,advimage,images,advlink,inlinepopups,media,searchreplace,contextmenu,paste,directionality,fullscreen",

และหาคำว่า

theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,,|,forecolor,backcolor",

แก้ไขเป็น

theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,images,cleanup,help,code,,|,forecolor,backcolor",

จากนั้นทำการบันทึกเพียงเท่านี้เมื่อเราเข้าไปที่ CMS และใช้งานในส่วนของ WYSIWYG editor ที่เขาเอามาให้แล้วใช้ไอคอนดังรูป ก็จะสามารถอัพโหลดรูปขึ้น server เราได้แล้วครับ…

ขั้นแรกให้เราสร้างไฟล์ .phtml ตั้งชื่อว่า thumb_pic.phtml แล้วนำอัพขึ้นไปที่ app/design/frontend/default/[ธีมที่ใช้งาน]/template/catalog/product/view/ โดยข้างในมีโค็ดดังนี้

<?php
$productId = $this->getProduct_id();
$_product = Mage::getModel('catalog/product')->load($productId); //load the product
?>
<img src="<? echo Mage::helper('catalog/image')->init($_product, 'thumbnail')->resize(75, 75); ?>" alt="<?php echo $this->htmlEscape($_product['name']); ?>" border="0" width="75" />

จากนั้นไปที่ CMS > Manage Pages ในที่นี้ผมจะเอารูปไปใช้ใน page นะครับ นำโค็ดด้านล่างไปใช้งาน

{{block type="catalog/product_new" product_id="2" template="catalog/product/view/thumb_pic.phtml"}}

โดยให้เราดูที่ product_id=”…” ให้นำ id ของสินค้ามาใส่

ตัวอย่างผมแก้จาก About Us

การแสดงผลออกมาจากตัวอย่างข้างต้น สามารถนำไปประยุกต์ใช้ได้นะครับ

เครดิต : http://www.molotovbliss.com/blog/magento-commerce/magento-display-a-product-image-within-static-pages-and-blocks/

วิธีนี้เป็นวิธีการดึงรูปในบทความของเรานำออกมาแสดงในหน้าแรกของ wordpress ยังที่เห็นกันในเว็บบล็อกต่างๆทั่วไป ซึ่งสามารถช่วยให้สื่อความหมายของบทความที่เราเขียนได้มากทีเดียว

1. ให้นำโค็ดนี้ไปเพิ่มใน wp-content/themes/[ชื่อ theme ของเรา]/funtion.php

function catch_that_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;
}

2. จากนั้นไปที่ไฟล์ index.php ของ theme หา

<div class="entry">
 <?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

แก้เป็น

<div class="entry">
 <img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" class="dis-pic" />
 <?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

จกานั้นเราก็จัด css ได้ตามใจชอบ

Via : http://wordpress.org/support/topic/246893

ให้เราเข้าไปแก้ไข image mapping ในหน้า admin ของเราครับ แล้วคลิกไปตัวที่เราจะทำการแก้ไข

จากนั้นให้เราลงมาดูที่รูปภาพขนาดใหญ่ ให้นำเมาส์กดวางสี่เหลี่ยมครอบนะตำแหน่งที่จะให้ลิงค์ไปยังสินค้า ดังรูป

ช่องด้านล่างให้เราพิมพ์รายชื่อสินค้าเพื่อทำการค้นหาสินค้าที่ต้องให้ลิงค์ไป จากนั้นกดตกลง

เมื่อเสร็จแล้วจะเป็นดังรูป

สามารถทำเพิ่มเติมได้

เสร็จขั้นตอนแล้วกด บันทึก image map ซะ แล้วไปดูที่หน้าร้านของเรา ไปที่หมวดหมู่ทีเราทำไว้ที่รูปภาพจะมีตัว บวก อยู่เมื่อนำเมาส์ไปวางไว้ก็จะแสดงรายละเอียดสินค้าของเราขึ้นมา และสามารถคลิกเข้าไปได้

ผมว่ามันเป็นอีกหนึ่งฟิวเจอร์ที่น่าสนใจทีเดียวสำหรับ prestashop ซึ่งผมยังไม่เคยเจอสำหรับ cms ตัวอื่น

หลังจากทำการเพิ่มสินค้าแล้วนะครับให้กลับมายังหน้า รายการสินค้า จะเห็น colum ชื่อว่า Media ตรงนี้ละครับที่จะทำการเพิ่มไฟล์หรือรูปภาพให้สินค้าตัวนี้ได้

หลังจากคลิกเข้ามาแล้วก็จะเจอกับหน้าของ การจัดการไฟล์ โดยจะมีรูปเดิมอยู่ด้วยให้เราคลิกที่ สร้างใหม่ เพื่อทำการเพิ่มรูปภาพเข้าไปครับ

ทำการ browse ไปรูปภาพของเรา และปรับแต่งค่าต่างๆตามต้องการจากนั้นกดบันทึก

จะทำการเพิ่มกี่รูปก็ตามสะดวกครับแล้วจากนั้นเราก็จะได้ดังรูปล่าง

กำหนดชื่อจากนั้นทำการอัพโหลดรูปที่ต้องการลงไป

จากนั้นมันจะกลับมาหน้าเดิมให้เราคลิกเข้าไปที่เราสร้างไว้เพื่อทำการแก้ไข

เราจะเห็นรูปที่เราอัพโหลดขึ้นมา จากนั้นทำการติ้กช่องหมวดหมู่ที่เราต้องการให้แสดงออกมา แล้วทำการบันทึกซะ

แล้วลองกลับไปดูที่หน้าแรกคลิกที่หมวดหมู่ของเราก็จะเห็นรูปที่เราทำการอัพขึ้นไป หากต้องการแบบดังรูปบนสุดให้เพิ่มรูปที่สองขึ้นไปแล้วกำหนดช่องหมวดหมู่เป็นอันเดียวกับรูปแรก เช่นของผมจะกำหนดรูปแรกอยู่ในหมวดหมู่ CPU รูปสองก็กำหนดให้อยู่ในหมวดหมู่ CPU ด้วยเช่นกัน การทำแบบนี้จะทำให้รูปที่แสดงออกมาเป็นแบบสไลด์ มี thumbnail แล้วกดเพื่อดูรูปใหญ่ได้

แนะนำผมว่าถ้าใส่เป็นรูปตัวสินค้าเลยก็จะดีมากทำให้ลูกค้าที่กดเข้ามารู้ได้ทันทีว่าเข้ามาดูถูกหมวดแล้วนะ จะได้ไม่ต้องหนีไปไหนอีก ^ ^

จะพบกับระบบจัดการไฟล์ของ joomla ให้คลิกที่โฟลเดอร์ stories

ให้ทำการสร้างโฟลเดอร์ชื่อว่า slide ในโฟลเดอร์ images/stories

ทำการ browse ไฟล์รูปเพื่อทำการอัพโหลดขึ้นไป

จากนั้นให้เราไปที่เมนู Extensions >> Module Manager แล้วค้นหา Random Image จากนั้นคลิกเข้าไปเพื่อทำการตั้งค่า

ตั้งค่าต่างๆแล้วกด Save

1. กำหนดหัวข้อของ module
2. ปรับให้โชว์หัวข้อหรือไม่
3. เลือก yes เพื่อเปิดการใช้งาน
4. เลือกตำแหน่งการจัดวางในหน้าเว็บไซต์
5. กำหนดชนิดของรูปภาพ เช่น jpg , png , gif
6. กำหนดโฟลเดอร์เก็บรูปภาพที่ต้องการนำแสดง
7. กำหนดลิงค์เมื่อผู้ชมเว็บไซต์คลิกบนรูป
8. กำหนดขนาดความกว้าง หน่วยเป็นพิกเซล
9. กำหนดขนาดความสูง หน่วยเป็นพิกเซล

จากนั้นเราก็จะได้รูปภาพมาแสดงบนเว็บไซต์เราแล้วครับ

เลือก enable เพื่อเปิดการใช้งาน จากนั้นปรับแต่งตามภาพแล้วกด Save

เรามาดูวิธีใช้งานกันครับ ให้ทำการใส่รูปลงในบทความเอาใหญ่ๆหน่อย จากนั้นย่อให้เล็กลงมา แล้วทำการ save

Link : http://extensions.joomla.org/extensions/6263/details

โดยให้เราไปตั้งค่าที่ Settings > Media

ทำการลบออกให้หมดครับ จากนั้นกด save changes เป็นอันเสร็จ…

ปล.แนะนำถ้าเว็บใครมีต้องใช้รูปภาพเยอะๆในการนำเสนอบทความให้ใช้ plugin iMax Width ช่วยครับ