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

Title of Script: Controlling Display of Images

Keywords: video tutorial, drupal, Media, Image Styles, Scales and Sizes, Grid, Effect, Event logo, Grid Layout, Display, Format, Fields, Filter, Sort

Visual Cue	Narration
Slide 1: Controlling Display of Images	Welcome to the Spoken tutorial on Controlling Display of Images
Slide 2: Learning Objectives	In this tutorial, we will learn about Image styles and A photo gallery view
Slide 3: System requirement	To record this tutorial, I am using Ubuntu Linux Operating System Drupal 8 and Firefox Web browser You can use any web browser as per your choice.
	Let us open our website which we created earlier.

Time	Narration
00:10	In Drupal, we can manipulate the size and scale of an image to fit the different needs of the site.
00:15	Drupal takes the original image and converts it to the size and scale we want.
00:25	Then, it saves that version of the file.
00:30	Click on Configuration.
00:32	We are going to create 2 image styles here.
00:36	Scroll down and locate MEDIA tab. Here, we can see Image Styles. Click on it.
00:40	We will create an Image style for the table that we have set up. And also for the next view that we will be creating, which is a grid of logos.
00:53	Click on Add image styles. In the Image style name, we will type Upcoming Events 150 x 150
01:05	Notice that Drupal fills out the machine name for us.
01:09	This is our Image style name.
01:15	Now, click on Create new style. 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:25	Under EFFECT, click on Select a new effect dropdown. Many options are displayed in this list. Among these options, I will choose Scale and crop effect. You can choose any option that you want to. For eg: Rotate, Resize or any other.
01:50	Click on the Add button.
01:52	Enter the Width as 150 and Height as 150.
01:57	Remember - never make the Width and Height larger than the original image. Doing so, will cause the image to pixelate.
02:05	Click Add effect.
02:10	Here is our new Image Style. In the right-hand-side image, we can see that it is now scaled and cropped.
02:15	Let’s create another one. Click on Image styles and then on Add image styles button.
02:25	This time, in the Image style name we will type photo gallery of logos.
02:30	Then click on Create new style button.
02:35	This can be an image in any photo gallery on your machine. You can do this for any image, in any field and in any content.
02:45	Once again, click on Select a new effect and then on Scale and crop option.
02:50	Click on Add button. Let’s enter the Width as 300 and Height as 300, and then click on Add effect button.
03:05	Notice that the right-hand-side image now has the new dimensions of 300 by 300. This shows that Drupal automatically creates versions of images for each image style. And stores them on the site.

Time	Narration
00:05	Click Structure, then on Views. Let’s now update our Upcoming Events view by clicking on Edit.
00:15	Click on Event Logo and change the Image Style to Upcoming Events. Then click on Apply.
00:30	Scroll down to the preview section and we find that our logos are all uniform.
00:35	Now, click on Save.
00:40	Click on Back to site. Here’s our view on our website. This is what Image Styles does.
00:46	Let’s now create a new view as a grid layout for all these events.
00:55	To do this, click on Structures, then Views, and Add new view.
01:00	We will name this as Photo Gallery. Set the view setting as Content of type Events.
01:15	This particular view could be used as photo-of-the-day or gallery of images from any event.
01:27	Click on Create a page.
01:29	Scroll down and select Grid of fields. Please note: we can choose any other option provided in the drop-down by Drupal, also.
01:45	In Items to display field, choose 9 as this gives a 3 by 3 grid. Let’s check Create a menu link, as well.
01:50	Under the Menu dropdown, choose the option Main navigation. Then click Save and Edit.
02:00	Let’s cross-check with our 5 criteria: The Display is a Page, The Format is a Grid, There is only one Field named Title, And lastly, the Filter and Sort Criteria. We will leave these as they are, for now.
02:15	Scroll down. We see here - we have 4 columns and 9 events.
02:20	To change the number of columns, in Format, click on the Settings option. Then change the number of columns to 3 and click Apply. That will give us a 3 by 3 grid.
02:35	In Fields, click on Add. Locate the Event Logo, put a check mark on it and then click on Apply.
02:50	This time, choose the photo gallery of logos as Image style. In Link image to, choose Content, and then click Apply.
03:00	Immediately, in the Preview section below, a grid is laid out. So, you see, a grid layout differs from a table. All the fields that you choose from a node are in one cell. And we can decide how many cells we want to display.
03:20	Let’s click on Save now. Let’s click on Back to site button and then click on Photo Gallery. This looks quite nice.
03:40	On a small device like a mobile, all the images scale down to maintain their 3 by 3 grid. And that is what Drupal does with a grid. With this we come to the end of this tutorial.

Slide 5: Summary	Let us summarize. In this tutorial we have learnt about Image styles and A photo gallery view
Slide 6: Acknowledgement	This video is adapted from Acquia and OSTraining and revised by Spoken Tutorial Project, IIT Bombay.
Slide 7: Acknowledgement	The video at this link summarises the Spoken Tutorial project. Pls download and watch it.
Slide 8: Spoken Tutorial Workshops	The Spoken Tutorial Project Team conducts workshops and gives certificates. For more details, please write to us.
Slide 9: Acknowledgement	Spoken Tutorial Project is funded by NMEICT, Ministry of Human Resource Development and NVLI, Ministry of Culture Government of India.
	This is Ameesha Bhorkhade signing off. Thanks for joining.

Contributors and Content Editors

Nancyvarkey, Priyacst