Drupal 8 views theming

We need to theme our generated views outpage i.e page or block . So that we can customize the layour as per our requirements . Follow below tutorials for drupal 8 views themeing .

  1. Create a views and add required fields
  2. set Format: Unformatted list
    Under Format Settings uncheck ‘Add views row classes’
    views-latest-products

  3. copy view name machine name ,found on view edit screen url. From below ex view machine name is ‘latest_products’
  4. http://localhost/drupal_8.2.2/admin/structure/views/view/latest_products

  5. Now create a twig template file of below name inside your current theme folder
  6. views-view-fields–latest_products.html.twig

  7. Open this file inside your editor and put your markup then print required fields as shown below
  8. <div class="product_list">
    
    <b>{{ fields.title.content }}</b>
    <div style="clear: both;"></div>
    {{ fields.field_image2.content }}
    <div style="clear: both;"></div>
    Cost Rs. {{ fields.field_cost.content }}
    
    </div>
    

  9. Note:
  10. All available fields machine name can found under Content type manage fields page. In my drupal, i found from this below page
    http://localhost/drupal_8.2.2/admin/structure/types/manage/products/fields

    views-manage-fields

  11. Put required css inside your theme css file . In my case i have default bartik theme enabled, So i put below css in core/themes/bartik/css/layout.css
  12. .product_list{
    width:130px;
    height:160px;
    border:1px solid #CCCCCC;
    border-radius:12px;
    float:left;
    padding:2%;
    margin:1%;
    }
    
    .product_list:hover{
    background:#f4f4f4;
    }
    
  13. Now save your view , clear cache then access view page , ex below url
    http://localhost/drupal_8.2.2/latest-products
  14. You should see your new custom formatted layout .
    In this way we can theme any view whether it is block or page .

views-output

Online Web Development Training,Video Tutorials