Drupal 8 User Guide: 6.11. Changing Content Display



Changing Content Display
with Amber Matz In this tutorial, we’ll walk through
the process of changing how content on our site is displayed. By the end of this tutorial,
you will understand how to make content items
more readable, accessible, and visibly attractive
by reordering the fields, hiding labels, and tuning
the output of the fields. To follow along, you should
understand the concepts of entities, fields, view modes, and formatters. On your demo site,
the Vendor content type must exist and include the Main Image
and Vendor URL fields that we added in a separate tutorial. Also, at least one Vendor content
item should be created with all fields filled in, so that we can test
the display settings. See the written version of this tutorial for links to the prerequisites. Find and view a Vendor content item you created in Section 6.3, Adding
Basic Fields to a Content Type. From the Manage administrative
menu, click on Content. Then, if necessary,
filter by the Vendor content type. Click on a title to view the content. Notice there are several things that could be done to improve
how this page looks. The Main Image and Vendor URL
fields should not have labels. The order of the fields
should be changed so that the image comes first. And, this image needs to be smaller. To fix the first 2 problems
and update some additional settings, in the Manage administrative menu, navigate to Structure,
then Content types. This is the path
admin/structure/types. Then click Manage display
in the drop-down button for the Vendor content type. In the label column,
select Hidden for Main Image. Let’s do the same for Vendor URL. Click the gear for
the Vendor URL field. Clear the Trim link text length setting. Links will no longer have
a trim length. Click the Open link
in new window checkbox. Now, when a link is clicked,
it will open in a new browser window. Click Update. To reorder the display of the fields, click and drag the cross arrows next
to field items such as Main Image. Let’s drag that to the top.
Then Body, Vendor URL, then Links. Click Save. Let’s verify the changes
we’ve made so far. Navigate back to Content from
the Manage administrative menu and click on a vendor item. The order of our fields
appears as expected. The field labels no longer display,
and this vendor URL link isn’t trimmed. If I click on it,
it opens in a new window. The main image is still too big, and we’ll tackle
that in the next lesson. See the written version
of this tutorial for links to that and other related tutorials to expand your understanding
of this topic. On your own, configure the display
of the Recipe content type. Be sure to create a
Recipe content item to view and test your configuration. In this tutorial, we made
the content items more readable, accessible,
and visibly attractive by reordering fields, hiding labels,
and tuning the output of the fields.

Leave a Reply

Your email address will not be published. Required fields are marked *