Create a bike selling site with custom Content type, fields and views

iKnow-IT banner

In the pevious example I show you how to install a fresh Drupal 8 installation on Ubuntu Linux. In this example I show you how to create a website with custom content type, fields and views. (in this example it's a bike selling website)

After installation Drupal 8:

 

Goto "Structure" => "Content types"
Click on "Add content type"
Name = bike
Under "Publishing options" tab checked "Published", unchecked "Promoted to front page"
Under "Display settings" tab uncheck "Display authur and date information"
Click on "Save and manage fields" 

Click on "Add field"
Select "List (float)" under "Add a new field"
Give the Label "Type" 
Click on "Save and continue"
Add the following 2 lines under "Allowed values list"

0|new
1|used

Click on "Save field settings"
Click on Checkbox "Required field"
Select under Default value the Type = "new"
Click on "Save settings"

Click on "Add filed" again 
Select "List (float)" under "Add a new field"
Give the Label "M/W/B/G" 
Click on "Save and continue"
Add the following 4 lines under "Allowed values list"

0|Man
1|Woman
2|Boy
3|Girl

Click on "Save field settings"
Click on Checkbox "Required field"
Click on "Save settings"

Click on "Add filed" again 
Select "List (float)" under "Add a new field"
Give the Label "Bike" 
Click on "Save and continue"
Add the following 4 lines under "Allowed values list"

0|Race
1|City
2|Mountain
3|E-bike
4|Kids

Click on "Save field settings"
Click on Checkbox "Required field"
Click on "Save settings" 

Click on "Add filed" again 
Select "Number (decimal)" under "Add a new field"
Give the Label "Price" 
Click on "Save and continue"
Click on "Save field settings"
Click on Checkbox "Required field"
Fill in the "€ " sign at the prefix field  
Click on "Save settings" 

Click on "Add filed" again 
Select "Image" under "Add a new field"
Give the Label "Picture" 
Click on "Save and continue"
Click on "Save field settings"
Click on "Save Settings" 

Click on "Manage form display"
Reorder (with drag and drop, with arrows icon) in:

Title
Type
M/W/B/G
Bike type
Price
Picture
Body
..

Click on "Save

Click on Tab "Manage display"
Reorder (with drag and drop, with arrows icon) in:

Type
M/W/B/G
Bike type
Price
Picture
Body

Select Label "Inline" for the "Type" field
Select Label "Inline" for the "M/W/B/G" field
Select Label "Inline" for the "Bike type" field
Select Label "Hidden" for the "Picture" field

Click on "Save"

Now you can add content to the content type "bike"
Click on "Content"  tab
Click on "Add content"
Click on "bike"
After you added several new "bikes" to content type "bike"

Repeat the last step (create content) several times....

---- Now you can create a view ----

Click on "Structure" tab
Click on "Views" link
Click on "Add new view"
fill in View name = "Bike"
Show: "Content" of type: "bike" sorted by: "Newest first"

click on Checkbox "Create a page"
Page Display settings, Display format: "Grid" of "teasers"
Items to display "10"
Click on checkbox "Create a menu link"
Menu "Main navigation"
Click on "Save and edit"

 

open "Settings" next to "Grid" format

(here you can change the grid setting)

Apply these settings

click on Show content link, select fields, and Apply (all displays),
click Apply
 

click on "Add" fields
Select Type "Content"
Click on Checkbox "Bike"
Click on Checkbox "Picture"
Click on Checkbox "Price"
Apply (all display)
Apply (all display)
Image style: Medium (220x220)
Link image to:  "content"
Apply (all display)
Apply (all display)

Click on "Save"

open "Content" next to "Show" format
select "fields" 
Apply (all displays)

select the inline fields
Content: Bike
Content: Picture
Content: Price
Apply

Click on "Content: Title" Fields link
Click on "Remove"

Click on "Save"

 

Click on "Add" next to Filter criteria
Select Type "Content"
Click on Checkbox "Bike"
Click on Checkbox "M/W/B/G"
Click on Checkbox "Type (field_type)"  appears in: bike

Apply (all display)
Click on Expose...
Apply (all display)
Apply (all display)


under Filter criteria 
click on "Content: Bike"
Click on checkbox "Expose this filter to visitors
Label "Bike"
Apply (all display)

under Filter criteria 
click on "Content: M/W/B/G"
Click on checkbox "Expose this filter to visitors
Label "M/W/B/G"
Apply (all display)

under Filter criteria 
click on "Content: Type (or Unknown)"
Click on checkbox "Expose this filter to visitors
Label "Type"
Apply (all display)

Click on Save

 

 

Click on "advanced" link
Exposed form in block: "Yes"
Apply
Click on "Save"

Click on "Back to site"

now we are almost ready

Click on "Structure" link
Click on "Block layout"
Click on "Place block" next to "Disabled"
click on "Place block" for Exposed form bike-page_1 views
Region: "Sidebar first"
Click on "Save block"
Click on "Save blocks"

Click on "Back to site"