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.