Video
Back to collection listing
Home
208 videos, 10h 36m

How to link up an image style with an image field

Description

Collection: Build Your First Drupal 7 Web Site
Chapter: Working With Custom Blocks and Image Styles

Transcript

How to Link Up an Image Style with an Image Field Now, the next step is associating this image style with the image field that we've added to our guide content type, and we do this through the same interface that we used to hide the label, the display settings for the content type. So let's go ahead and go to Structure in the admin toolbar. Click on Content types and then next to guide here we're going to click on manage display.

And under this image field here, you see that we have a couple of new pieces of data. It says Original image, and then it has this cogwheel which you can click on. Let's go ahead and click the cogwheel.

All right. So this gives us some additional options for this field. We have Format settings image, Image style none.

It says it's the original image. Let's go ...

Read the last half of the transcript

You are 0% complete

When you have an active membership, you will be able to see your progress here.

Skill focus: Site Building
Skill level: Beginner - Intermediate

In this collection, we take you through the process of building a fully functional Drupal 7 web site, step by step. No prior Drupal experience is required, and when you're done you will have learned the most important components of Drupal site building and will have developed the skills to tackle unanticipated problems as they arise.

Before watching this series, you will need a fresh Drupal 7 installation. Follow the videos in the Setting Up a Web Environment With Drupal to get Drupal set up on your Windows, OSX (Mac) or Linux machine.

Some of the key points we'll be covering include:

  1. Critical Drupal terminology
  2. How to work with content types and fields
  3. Introduction to important modules like Views, Pathauto, Date and Wysiwyg
  4. How to work with basic CSS to get your site looking the way you want it to
  5. How to work with taxonomy and referencing one piece of content from another

Who this collection is for

This video collection is intended for those who are completely new to Drupal, or for those that want to make sure that they have a solid foundation before moving on to more advanced projects. We assume you know nothing about Drupal, and lead you from start to finish through a practical project.

Prerequisites

There are no particular prerequisites for this collection.

Display
Show videos in one column
Show videos in split view
Actions
Mark multiple complete (member-only)
Add multiple to a playlist (member-only)
Change speed.5x1x1.5x2x3x

Chapters

  1. 36:02Introduction to Our Project and Reviewing Mockups
    1. 1:49Updates to the "Build Your First Drupal 7 Web Site" collection
    2. 3:15Introduction
    3. 2:23Review of the resources sent by the client
    4. 3:11Review of the home page mockup
    5. 4:26Review of the calendar, contact us and guide page mockups
    6. 0:45Recap of files in our client resource pack
    7. 4:44How to map a mockup to existing Drupal elements
    8. 3:03How to use the administration menu and breadcrumbs to get around
    9. 4:32Overview of the Appearance page, how theme settings work and how to upload a new logo
    10. 2:02How to hide the site name in the header
    11. 4:02How to work around the disappearing logo bug
    12. 1:50Chapter review and challenges for the "Introduction to Our Project and Reviewing Mockups" chapter
  2. 35:00How to Create and Edit Content
    1. 2:16What this chapter covers and how to change the site name
    2. 6:31How to add a new page and overview of settings on the "add content" form
    3. 2:19What "node" means and how the notifications area works
    4. 3:14How to edit a piece of content
    5. 3:09How to set the default home page
    6. 4:16How to add content as a menu item and how weight works
    7. 1:44How URL aliases work
    8. 1:47Finishing adding the About Us page
    9. 1:15How to change the position of a menu item with weight
    10. 5:06Review of the Contact Us form mockup and how the Module listing page works
    11. 1:14How to find a core module that you need and enable it
    12. 2:09Chapter review and challenges for the "How to Create and Edit Content" chapter
  3. 38:03How to Work With Menus, Modules and Webform
    1. 3:57How to work with the menu listing page
    2. 1:24How to work with the menu "list links" page
    3. 4:07How to enable, edit and move a menu item
    4. 1:40How menu sorting impacts menu item weight
    5. 4:53How to find help and configure the Contact module
    6. 2:41How to disable and uninstall a module
    7. 4:32How to use the Update Manager module to install a module
    8. 2:53How to set up the initial webform container
    9. 6:01How to add an input to a webform, overview of component types and input options
    10. 4:01Adding an email input and how machine names and tokens work
    11. 1:54Chapter review and challenges for the "How to Work With Menus, Modules and Webform" chapter
  4. 41:19How to Work With Content Types and Fields
    1. 4:04Finishing up the contact us webform
    2. 3:29How to create a single item checkbox (sign up for newsletter) with Webform
    3. 2:24Testing our contact form as logged in and logged out users (anonymous and authenticated)
    4. 6:28How to view webform submissions and set up e-mail templates
    5. 2:02How content types work
    6. 3:46How to disable "published by" information and a review of the content type edit form
    7. 4:05How to add a new content type
    8. 5:38How fields work and how to use the field edit form to change a field title
    9. 3:56How to add a new field to a content type
    10. 3:23Adding the rest of the fields we need for the Tour content type
    11. 2:04Chapter review and challenges for the "How to Work With Content Types and Fields" chapter
  5. 37:54How to Work With Pathauto and Introduction to Views
    1. 3:06Previewing our "add tour" form and introduction to the Pathauto module
    2. 3:49How to install module dependencies
    3. 4:27How to change automated URL alias settings for a content type with Pathauto
    4. 1:14How to find a piece of content that doesn't have a menu item
    5. 4:28How to update URL aliases after a pattern change with Pathauto
    6. 2:00How to work with shortcuts in the shortcut bar
    7. 5:28What the Views module is for and how to install it
    8. 1:32A deeper explanation of the Views module and the view listing page
    9. 3:56Filling out the "add view" wizard
    10. 5:59Overview of the "add view" settings page and how a view "display" works
    11. 1:55Chapter review and challenges for the "How to Work With Pathauto and Introduction to Views" chapter
  6. 32:45How to Add Fields to a View and Work With the Date Module
    1. 3:05How to add a new field to a view
    2. 3:31How to set the label, wrap HTML and set default text for a field in a view
    3. 2:57How to rewrite the output of a field to include other fields
    4. 1:39How to edit a view from the view display
    5. 2:22Adding our remaining view fields in quick succession
    6. 3:22How to adjust the sort order of content in a view
    7. 4:53How to deal with module installation errors and install the Date module
    8. 4:58How to add and configure a date field
    9. 4:05How to work with the pop up calendar and extend the year range
    10. 1:53Chapter review and challenges for the "How to Add Fields to a View and Work With the Date Module" chapter
  7. 36:15How to Fix Broken Views and Work With Taxonomy
    1. 1:17How to delete a field from a content type
    2. 4:30How to deal with broken views handlers and restore unsaved view changes
    3. 3:52How to modify date formats both globally and in a view
    4. 2:42How to sort view fields and fix broken sort handlers
    5. 5:00How to change view menu settings and add a header
    6. 4:41How to add a date-based filter to a view
    7. 1:53How to delete a piece of content and modify multiple pieces of content at the same time
    8. 3:17Reviewing our guide data and adding another content type
    9. 1:02A brief explanation of taxonomy
    10. 2:11How to add a taxonomy vocabulary with terms
    11. 3:44How to add a taxonomy term reference field to a content type
    12. 2:06Chapter review and challenges for the "How to Fix Broken Views and Work With Taxonomy" chapter
  8. 35:29How to use Term and Node Reference Fields
    1. 4:53Updating the guide automatic alias pattern and adding the guide data
    2. 5:41How to share a field between two content types and why you would want to
    3. 3:39Updating our calendar view to use a new field
    4. 1:31Overview of the multiple ways to link a Views field to other related content
    5. 2:38Overview of development (dev) versions of modules and installing the References module
    6. 3:27Adding a node reference field and updating our content
    7. 3:06Updating our calendar view to use the new node reference field
    8. 4:08How to add an autocomplete (free tagging) field to a content type
    9. 2:16How to use an autocomplete field
    10. 2:02Quickly removing a field and updating our view to use a different field
    11. 2:08Chapter review and challenges for "How to Use Term and Node Reference Fields" chapter
  9. 31:46How to Work With Blocks and Permissions
    1. 2:00A comparison of our current site to the mockups
    2. 4:30What blocks and regions are, and how to use the blocks administration page
    3. 2:01How to hide the user login and "Powered by Drupal" blocks
    4. 3:40How to add a "log in" menu item to the user menu
    5. 2:04How to enable a menu block and hide a block title
    6. 1:28How to hide the secondary menu (user menu)
    7. 5:20What permissions are and how to modify them
    8. 4:40How to configure search and how cron runs work
    9. 2:22How to add a new user
    10. 1:58How roles work and how to add a new role
    11. 1:43Chapter review and challenges for "How to Work With Blocks and Permissions" chapter
  10. 31:15Overview of Permissions and Text Formats
    1. 1:24Review of how roles and permissions work
    2. 1:15What each permission does, from the Block to Menu modules
    3. 5:44What each Node or content-related permission does
    4. 2:52What each permission does, from the Path to System modules
    5. 3:37What each permission does, from the Taxonomy to Views modules
    6. 2:56What each Webform permission does, and a review of our Guide role
    7. 1:49Different methods for testing the site as another user
    8. 3:36How to use the Masquerade module to act like another user
    9. 2:28Adding a piece of content as a Guide
    10. 4:00How text formats work
    11. 1:34Chapter review and challenges for "Overview of Permissions and Text Formats" chapter
  11. 34:35Configuring Text Formats and Setting Up a Wysiwyg
    1. 3:58Review of the text format settings page and how filters work
    2. 1:34How to re-order text format filters and why order matters
    3. 2:54How to configure text format filters
    4. 2:11How to add a new text format
    5. 3:58How to configure permissions for text formats
    6. 2:05What Wysiwygs are and how to install the Wysiwyg module
    7. 1:03The problems with Wysiwygs and possible alternatives
    8. 2:39How libraries work
    9. 2:38How to install the TinyMCE library for the Wysiwyg module
    10. 3:05How the Wysiwyg "Basic settings" and "Buttons and Plugins" options work
    11. 3:20How the Wysiwyg "Editor appearance" and "Cleanup and output" options work
    12. 3:13How the Wysiwyg "CSS" settings work and our Wysiwyg in action
    13. 1:57Chapter review and challenges for "Configuring Text Formats and Setting Up a Wysiwyg" chapter
  12. 33:53Working With Custom Blocks and Image Styles
    1. 3:43How to add a custom block
    2. 2:41The difference between "URL" and "path" and how to use a "Show on specific pages" input
    3. 2:08How to modify the visibility settings for a block
    4. 0:50Seeing our new block in action
    5. 4:33How to deal with shared field conflicts (unlimited vs. limited values)
    6. 6:15How to add and configure an image field
    7. 1:48Previewing the display of our image field
    8. 1:38How to hide a field label on a node display page
    9. 3:26What image styles are and a review of existing image styles
    10. 3:16How image style effects work and how to add a new image style
    11. 1:45How to link up an image style with an image field
    12. 1:50Chapter review and challenges for "Working With Custom Blocks and Image Styles" chapter
  13. 34:00How to Work With CSS
    1. 3:24A recap of what we have covered so far, and what is to come
    2. 1:35How to change the order of fields on the node display page
    3. 1:10How to install Firebug in the Firefox browser
    4. 2:37How to use Firebug to inspect any element
    5. 3:38How to manipulate CSS with firebug
    6. 4:00How to find a good selector and apply styles to a specific element
    7. 3:29How to rapidly experiment with CSS in Firebug
    8. 3:30How to install the CSS Injector module and find most module configuration pages
    9. 4:16How to add a custom CSS stylesheet to certain pages based on path with CSS Injector
    10. 1:53How to use Firebug to learn more about what an element is
    11. 2:36How to hide breadcrumbs (or any other element) using CSS
    12. 1:52Chapter review and challenges for "How to Work With CSS" chapter
  14. 34:56Troubleshooting Module Installation and Configuration
    1. 3:24Updating other guide nodes and using alt and title attributes for an image field
    2. 2:07Review of what we need to complete our template
    3. 2:10How to install the Media module
    4. 3:22How to find a module dependency when it is not its own module project
    5. 2:46Where to find information about a newly installed module
    6. 1:41How managed and unmanaged files work, and the benefits of using the Media module
    7. 3:32How to upload an image with the Media module and use it as a background
    8. 4:54What to do when CSS changes aren't being applied
    9. 3:17What to do when you get a fatal error and how to clear all caches
    10. 3:57How to search for an error in Google and tips for reading a long issue
    11. 1:42The difference between module development versions and official releases
    12. 2:04Chapter review and challenges for the "Troubleshooting Module Installation and Configuration" chapter
  15. 33:55Updating Modules and Manipulating CSS
    1. 2:27How to check for module updates from your site
    2. 3:36How to update a module with the Update Manager
    3. 1:31How and why to clear Drupal's caches
    4. 4:10How to update a module manually
    5. 3:43How to fix our issue by reading the module help page
    6. 1:36Summary of the steps we took to fix module errors
    7. 3:10How to ensure image URLs work on a remote server
    8. 3:30How to remove the background color of main menu tabs
    9. 5:41What to do about disappearing CSS properties in Firebug
    10. 2:12How to change the font size of the main menu items
    11. 2:19Chapter review and challenges for the "Updating Modules and Manipulating CSS" chapter
  16. 32:46More CSS Updates and Troubleshooting Text Formats
    1. 6:12How to adjust CSS in the footer using Firebug for testing
    2. 3:03Adding and troubleshooting our footer CSS changes with CSS Injector
    3. 1:47Finishing up our footer margin changes
    4. 4:45How to add a repeating background image to the footer
    5. 3:30Adding a new user with a new role
    6. 2:23Giving our new user permission to add, edit and delete pages
    7. 2:17How to fix "This field has been disabled because you do not have sufficient permissions to edit it"
    8. 2:58How content and text formats are related, and how to deal with placeholder text
    9. 3:37How to integrate the Media module with a WYSIWYG
    10. 2:14Chapter review and challenges for the "More CSS Updates and Troubleshooting Text Formats" chapter
  17. 31:28How to Evaluate Modules and Install IMCE
    1. 4:32How to turn the Media browser Wysiwyg plugin on
    2. 2:47How to troubleshoot permissions issues with a module
    3. 2:33How to find solutions on Drupal.org by using Google and reading comments first
    4. 4:28How to assess the health of a module by reviewing the module project page
    5. 3:21How to learn more about what a module does by reading the module project page
    6. 2:21Viewing a demo of IMCE and installing the IMCE module
    7. 1:58Overview of the IMCE main configuration page
    8. 4:31How an IMCE profile configuration works
    9. 1:27Comparing two IMCE configurations
    10. 1:38How to set up a new IMCE configuration profile
    11. 1:52Chapter review and challenges for the "How to Evaluate Modules and Install IMCE" chapter
  18. 44:41How to configure IMCE and Wrap Up Our Project
    1. 4:59How to associate IMCE profiles with user roles and upload an image
    2. 5:04How to embed an image in a Wysiwyg with IMCE
    3. 4:10Why styles sometimes display properly in a Wysiwyg but not when viewing the content
    4. 1:56Overview of two solutions to the Wysiwyg style inconsistency issue
    5. 2:57Overview of how to set up a Wysiwyg to use a drop-down selector for CSS classes
    6. 3:05How to configure the styles available in the Wysiwyg
    7. 0:57How to add a class to an element in a Wysiwyg with the "font style" plugin
    8. 1:18How to add easy-to-read aliases for class names in a Wysiwyg
    9. 3:20How to troubleshoot line break or paragraph problems in the Wysiwyg
    10. 1:36Comparing our home page to the mockup
    11. 4:10How to set a custom 404 "page not found" error page and navigate up paths
    12. 1:38Adding a missing piece of content
    13. 4:10Why it's a good idea to review all the settings when creating a piece of content
    14. 1:44Chapter review and challenges for the "How to Configure IMCE and Wrap Up Our Project" chapter
    15. 3:37Congratulations

Videos

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:

$291 month $1566 months $2761 year

Loading...
Add to playlist

Add to , or

Add to new playlist:

Add to playlist
Contact us

Below are the supported keyboard shortcuts for our video player.

space
Start / stop video
shift▶
Go to next video
shift◀
Go to previous video
▲▼
Increase or decrease player speed by 20%
◀▶
Skip ahead or go back by 15 seconds
1...9
Jump to a percentage (2 is 20%, for example)
f
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
$29
1 month
$156
6 months
10% off
$276
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
user
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.