Difference between revisions of "Drupal/C3/Controlling-Display-of-Images/English-timed"
From Script | Spoken-Tutorial
Sandhya.np14 (Talk | contribs) |
PoojaMoolya (Talk | contribs) |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 13: | Line 13: | ||
|- | |- | ||
| − | | 00:12 | + | | 00:12 |
| − | | To record this tutorial, I am using: | + | | To record this tutorial, I am using:'''Ubuntu Linux''' Operating System, '''Drupal''' 8 and '''Firefox''' Web browser. |
| − | + | ||
| − | + | ||
| − | + | ||
|- | |- | ||
| Line 181: | Line 178: | ||
|- | |- | ||
| 03:36 | | 03:36 | ||
| − | | Scroll down to the preview section and we find | + | | Scroll down to the preview section and we find our logos are all uniform. |
|- | |- | ||
| Line 245: | Line 242: | ||
|- | |- | ||
| 04:54 | | 04:54 | ||
| − | | Let’s cross-check with our 5 criteria: | + | | Let’s cross-check with our 5 criteria: The''' Display''' is a''' Page''', |
| − | The''' Display''' is a''' Page''', | + | |
|- | |- | ||
| Line 253: | Line 249: | ||
|- | |- | ||
| 05:01 | | 05:01 | ||
| − | | there is only one''' Field''' named''' Title,''' | + | | there is only one''' Field''' named''' Title,''' and lastly, the''' Filter''' and''' Sort Criteria'''. |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
|- | |- | ||
| Line 337: | Line 329: | ||
|- | |- | ||
| 06:34 | | 06:34 | ||
| − | | In this tutorial, we have learnt about: | + | | In this tutorial, we have learnt about: '''Image styles''' and '''photo gallery view.''' |
| − | + | ||
| − | + | ||
|- | |- | ||
| Line 355: | Line 345: | ||
|- | |- | ||
| 07:08 | | 07:08 | ||
| − | | Spoken Tutorial Project is funded by- | + | | Spoken Tutorial Project is funded by- NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture, Government of India. |
| − | + | ||
| − | + | ||
|- | |- | ||
Latest revision as of 11:34, 17 October 2016
| Time | Narration |
| 00:01 | Welcome to the Spoken tutorial on Controlling Display of Images. |
| 00:06 | In this tutorial, we will learn about Image styles and a photo gallery view. |
| 00:12 | To record this tutorial, I am using:Ubuntu Linux Operating System, Drupal 8 and Firefox Web browser. |
| 00:21 | You can use any web browser as per your choice. |
| 00:25 | Let us open our website which we created earlier. |
| 00:29 | In Drupal, we can manipulate the size and scale of an image to fit the different needs of the site. |
| 00:37 | Drupal takes the original image and converts it to the size and scale we want. |
| 00:43 | Then, it saves that version of the file. |
| 00:46 | Click on Configuration. |
| 00:48 | We are going to create 2 image styles here. |
| 00:51 | Scroll down and locate MEDIA tab. |
| 00:54 | Here, we can see Image Styles. Click on it. |
| 00:58 | We will create an Image style for the table that we have set up. |
| 01:03 | And also for the next view that we will be creating which is a grid of logos. |
| 01:09 | Click on Add image styles. |
| 01:12 | In the Image style name, we will type "Upcoming Events 150 x 150". |
| 01:19 | Notice that Drupal fills out the machine name for us. |
| 01:23 | This is our Image style name. |
| 01:26 | Now, click on Create new style. |
| 01:29 | On the left, is the original image which is 600 by 800 pixels and the edited version of the image is on the right. |
| 01:38 | Under EFFECT, click on Select a new effect drop-down. |
| 01:42 | Many options are displayed in this list. Among these options, I will choose "Scale and crop" effect. |
| 01:49 | You can choose any option that you want to. For e.g: Rotate, Resize or any other. |
| 01:56 | Click on the Add button. |
| 01:58 | Enter the Width as 150 and Height as 150. |
| 02:02 | Remember - never make the Width and Height larger than the original image. |
| 02:07 | Doing so, will cause the image to pixelate. |
| 02:11 | Click Add effect. |
| 02:13 | Here is our new Image Style. In the right-hand-side image, we can see that it is now scaled and cropped. |
| 02:22 | Let’s create another one. Click on Image styles and then on Add image styles button. |
| 02:29 | This time, in the Image style name we will type: "photo gallery of logos". |
| 02:35 | Then click on Create new style button. |
| 02:38 | This can be an image in any photo gallery on your machine. |
| 02:42 | You can do this for any image, in any field and in any content. |
| 02:47 | Once again, click on Select a new effect and then on "Scale and crop" option. |
| 02:53 | Click on Add button. Let’s enter the Width as 300 and Height as 300. |
| 03:00 | And then click on Add effect button. |
| 03:03 | Notice that the right-hand-side image now has the new dimensions of 300 by 300. |
| 03:09 | This shows that Drupal automatically creates versions of images for each Image style and stores them on the site. |
| 03:18 | Click Structure, then on Views. |
| 03:21 | Let’s now update our Upcoming Events view by clicking on Edit. |
| 03:27 | Click on Event Logo and change the Image Style to "Upcoming Events". |
| 03:33 | Then click on Apply. |
| 03:36 | Scroll down to the preview section and we find our logos are all uniform. |
| 03:42 | Now, click on Save. |
| 03:45 | Click on Back to site. Here’s our view on our website. |
| 03:50 | This is what Image Styles does. |
| 03:53 | Let’s now create a new view as a grid layout for all these events. |
| 03:59 | To do this, click on Structures, then Views, and Add new view. |
| 04:05 | We will name this as Photo Gallery. |
| 04:09 | Set the VIEW SETTINGS as Content - of type - Events. |
| 04:14 | This particular view could be used as photo-of-the-day or gallery of images for any event. |
| 04:22 | Click on Create a page. |
| 04:25 | Scroll down and select Grid of fields. |
| 04:29 | Please note: we can choose any other option, provided in the drop-down by Drupal, also. |
| 04:36 | In Items to display field, choose 9 as this gives a 3 by 3 grid. |
| 04:42 | Let’s check Create a menu link as well. |
| 04:46 | Under the Menu drop-down, choose the option "Main navigation". |
| 04:51 | Then click Save and Edit. |
| 04:54 | Let’s cross-check with our 5 criteria: The Display is a Page, |
| 04:59 | the Format is a Grid, |
| 05:01 | there is only one Field named Title, and lastly, the Filter and Sort Criteria. |
| 05:08 | We will leave these as they are, for now. |
| 05:12 | Scroll down. We see here - we have 4 columns and 9 events. |
| 05:17 | To change the number of columns, in Format, click on the Settings option. |
| 05:22 | Then change the number of columns to 3 and click Apply. |
| 05:28 | That will give us a 3 by 3 grid. |
| 05:31 | In Fields, click on Add. |
| 05:34 | Locate the Event Logo, put a check mark on it and then click on Apply. |
| 05:40 | This time, choose the "photo gallery of logos" as Image style. |
| 05:45 | In Link image to, choose Content and then click Apply. |
| 05:50 | Immediately, in the Preview section below, a grid is laid out. |
| 05:55 | So, you see, a grid layout differs from a table. |
| 06:00 | All the fields that you choose from a node, are in one cell. |
| 06:05 | And, we can decide how many cells we want to display. |
| 06:09 | Let’s click on Save now. |
| 06:12 | Let’s click on Back to site button and then click on Photo Gallery. |
| 06:17 | This looks quite nice. |
| 06:19 | On a small device like a mobile, all the images scale down to maintain their 3 by 3 grid. |
| 06:26 | And that is what Drupal does with a grid. |
| 06:29 | With this, we come to the end of this tutorial. Let us summarize. |
| 06:34 | In this tutorial, we have learnt about: Image styles and photo gallery view. |
| 06:44 | This video is adapted from Acquia and OSTraining and revised by Spoken Tutorial Project, IIT Bombay. |
| 06:53 | The video at this link summarizes the Spoken Tutorial project. Please download and watch it. |
| 07:00 | The Spoken Tutorial Project team conducts workshops and gives certificates. For more details, please write to us. |
| 07:08 | Spoken Tutorial Project is funded by- NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture, Government of India. |
| 07:19 | This is Ameesha Bhorkhade, signing off. Thanks for joining. |
