Changing Content Display
0 (0 Likes / 0 Dislikes)
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.