Node values not retrieving properly in .theme and Twig files

Question

I created a content type and have a couple of fields: a heading, links, and images. After creating a node out that content type, I want to pull parts of the node into my homepage. And for that, I used the following in my .themename.theme.

use Drupal\node\Entity\Node;

function amarula_preprocess_page(&$variables) {

    $nid = 62; 
    $node = \Drupal::entityTypeManager()->getStorage('node')->load($nid); 

    $variables['field_vanilla_heading'] = $node->field_vanilla_heading->value;
    $variables['field_vanilla_main_content'] = $node->field_vanilla_main_content->value;
    $variables['field_vanilla_home_link'] = $node->field_vanilla_home_link->value;
    $variables['field_vanilla_home_thumbnail'] = $node->field_vanilla_home_thumbnail->value;
}

I get the value of the field_vanilla_heading in my page--front.html.twig

<h1>{{ field_vanilla_heading }}</h1>

But, the rest of the fields are giving problems.

For the main content {{ field_vanilla_main_content }}, which is long text with summary, I am seeing all the HTML in the page. How can I escape this in twig?

For the rest of the fields, kint tells me that they are null, which is not true:

{{ kint(field_vanilla_home_link) }}
{{ kint(field_vanilla_home_thumbnail) }}

Below is the list of all the field settings:

I can already get the node ID. But how can I get all the values of the node accordingly?

Answer 1

not sure if you still need an answer, but the problem is how you want to retrieve the values from the fields. I get confused all the time, so I usually check out what the column name in the database is of the value I want to get from the field.

Links:

$node->field_vanilla_home_link->uri;
$node->field_vanilla_home_link->title;

Images are a bit more complicated, maybe there are more ways, but this is how I usually do it:

$entity = $node->field_vanilla_home_thumbnail->entity;
    if ($entity) {
      $variables['field_vanilla_home_thumbnail'] = $entity->getFileUri();
    }

OR with this you could load different image styles (don't forget to import ImageStyle class):

ImageStyle::load('thumbnail')->buildUrl($entity->getFileUri());

For the image alt:

$node->field_vanilla_home_thumbnail->alt

And I guess you know how to use those values in twig to print links and images (just basic html) :)

Edit: For your problem with your long text with summary, you can filter the markups with "raw":

{{ field_vanilla_main_content | raw }}