[[structure-content-display]]

=== Changing Content Display

[role="summary"]
How to make content items more presentable.

(((Content display,changing)))
(((Content display,managing)))
(((Content,displaying)))

==== Goal

Make the content items more readable, accessible, and visibly attractive by
reordering the fields, hiding labels, and tuning the output of the fields.

==== Prerequisite knowledge

* <<planning-data-types>>
* <<structure-view-modes>>

==== Site prerequisites

The Vendor content type must exist, it must have Main Image and Vendor URL
fields, and your site must have at least one Vendor content item. See
<<structure-content-type>>, <<structure-fields>>, and <<content-create>>.

==== Steps

. Find and view a Vendor content item you created in <<structure-fields>>.
Notice that there are several things that could be done to improve how the 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.
  * The image should be smaller.

. To fix the first two problems, and update some additional settings, in the
_Manage_ administrative menu, navigate to _Structure_ > _Content types_
(_admin/structure/types_). Then click _Manage display_ in the dropdown button
for the Vendor content type.
+
--
// Content types list on admin/structure/types, with operations dropdown
// for Vendor content type expanded.
image:images/structure-content-display_manage_display.png["Manage display",width="100%"]
--

. Under the _Label_ column, select _Hidden_ for Main image. Do the same
for Vendor URL.
+
--
// Manage display page for Vendor content type
// (admin/structure/types/manage/vendor/display), with labels for Main
// Image and Vendor URL hidden, and their select lists outlined in red.
image:images/structure-content-display_main_image_hidden.png["Selecting _main image title_ as _hidden_",width="100%"]
--

. Click the gear for the Vendor URL field. Clear the _Trim link text length_
setting.  Links will no longer have a trim length. Check the _Open link in new
window_ checkbox. Now, when the link is clicked, it will open in a new browser
window. Click _Update_.
+
--
// Vendor URL settings form, with trim length cleared, and open link in
// new window checked.
image:images/structure-content-display_trim_length.png["Link trim length",width="100%"]
--

. Drag the cross arrows next to the field items to reorder as Main image,
_Body_, Vendor URL, and _Links_.
+
--
// Manage display page for Vendor content type, with order changed.
image:images/structure-content-display_change_order.png["Changing order of fields",width="100%"]
--

. Click _Save_.

. Find the Vendor content item from step 1 again, and verify that the updates
have been made.

. Repeat similar steps to manage the display of the Recipe content type
fields.

==== Expand your understanding

* Make the main image smaller. See <<structure-image-style-create>>.

* If you do not see the effect of these changes in your site, you might need
to clear the cache. See <<prevent-cache-clear>>.


==== Related concepts

<<structure-image-styles>>

==== Additional resources

* https://www.drupal.org/node/774798[_Drupal.org_ community documentation page "Specify how fields are displayed"]
* https://www.drupal.org/node/774744[_Drupal.org_ community documentation page "Rearrange the order of fields"]
* https://www.drupal.org/node/1577752[_Drupal.org_ community documentation page "View modes"]


*Attributions*

Written by https://www.drupal.org/u/AnnGreazel[Ann Greazel] and
https://www.drupal.org/u/batigolix[Boris Doesborg].
