Hi everyone,

I'm not pretty sure, if this question is correctly placed within the theming-forum – but since I hope, the fix for it is a little bit of Twig-Magic, I thought it would be =)

Since my forum- and even Google-search takes me more than one day without solving my problem now, I decided to ask you directly.

I'm writing a module that extends the default user with some user-fields – and especially a field for placing the user logo (since some users of my Drupal-instance will be companies). Installing these fields throughout the installation of the module succeeds – also programmatically uploading a default image and mapping this file to the field doesn't create any problems. For the user editing his profile, the default-image even shows up within the edit form.

The only thing, I've really problems with: if an user doesn't overwrite the logo, so if the default logo should appear, the twig template doesn't show up anything than a broken image-symbol ...

So ... I've brought you some Code-Snippets.

First of all: the field-configuration field.field.user.user.field_module_logo.yml:

langcode: en
status: true
dependencies:
  config:
    - field.storage.user.field_module_logo
  module:
    - content_translation
    - image
    - user
third_party_settings:
  content_translation:
    translation_sync:
      file: '0'
      alt: '0'
      title: '0'
id: user.user.field_module_logo
field_name: field_module_logo
entity_type: user
bundle: user
label: Logo
description: ''
required: false
translatable: true
default_value: {  }
default_value_callback: ''
settings:
  file_directory: 'pictures/logos/[date:custom:Y]-[date:custom:m]'
  file_extensions: 'png jpg jpeg'
  max_filesize: '512 KB'
  max_resolution: 500x500
  min_resolution: 250x160
  alt_field: true
  alt_field_required: false
  title_field: true
  title_field_required: false
  handler: 'default:file'
  handler_settings: {  }
field_type: image

Than: field.storage.user.field_module_logo.yml:

langcode: de
status: true
dependencies:
  module:
    - file
    - image
    - user
id: user.field_module_logo
field_name: field_module_logo
entity_type: user
type: image
settings:
  uri_scheme: public
  default_image:
    uuid: null
    alt: ''
    title: ''
    width: null
    height: null
  target_type: file
  display_field: false
  display_default: false
module: image
locked: false
cardinality: 1
translatable: true
indexes:
  target_id:
    - target_id
persist_with_no_fields: false
custom_storage: false

Then my php-snippet that uploads the default-image and mapps it to the field (module.install within the module_install()-function):

// ... 

$config_factory = \Drupal::configFactory();
$field = $config_factory->getEditable('field.field.user.user.field_module_logo');

$default_image = $field->get('settings.default_image');

// Dynamically set the user default image on the field
$filename = 'default_image.png';

$data = file_get_contents( drupal_get_path('module', 'module') . '/img/' . $filename );
$file = file_save_data($data, file_default_scheme() . '://' . 'default_images/' . $filename, FILE_EXISTS_REPLACE);

$default_image['uuid']   = $file->uuid();
$default_image['alt']    = 'Default Image';
$default_image['title'] = 'You are hovering the default image ...';
$default_image['width']  = 500;
$default_image['height'] = 500;

$field->set('settings.default_image', $default_image)->save(true);

// ...

And finally the Twig-Snippet, I placed within the user.html.twig of the module:

<div class="logo">
	{% set the_image = user. field_module_logo.0 %}
	<img style="max-width: 200px; max-height: 200px;" src="{{ file_url(the_image.entity.uri.value) }}" alt="{{ the_image.alt }}" title="{{ the_image.title }}">
</div>

As mentioned above: if the user, one wants to view, has uploaded a logo-file within its profile, this logo will be rendered correctly. If not, there will show up this broken Image-Snippet:

<div class="logo">
	<img style="max-width: 200px; max-height: 200px;" src="/" alt="" title="">
</div>

It would be great if you could help me finding a proper solution – or give me a hint what I'm doing wrong ...
Thank you!
Cheers,
Martin

Comments

macwinnie’s picture

From my point of view, the following Twig-Fix isn't very clean coded, since I expect the default image to replace a non-existent image ... but it works for me ...

<div class="logo">
	{% set the_image = user. field_module_logo.0 %}
	{% if the_image %}
		<img style="max-width: 200px; max-height: 200px;" src="{{ file_url(the_image.entity.uri.value) }}" alt="{{ the_image.alt }}" title="{{ the_image.title }}">
	{% else %}
		<img style="max-width: 200px; max-height: 200px;" src="{{ file_url('public://default_images/default_image.png') }}" alt="Default Image" title="You are hovering the default image ...">
	{% endif %}
</div>

If someone knows a clean way to solve this, it would be awesome to know it =)

Thank you!
Cheers,
Martin