Drupal/C3/Controlling-Display-of-Images/English-timed

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.

Contributors and Content Editors

PoojaMoolya, Priyacst, Sandhya.np14