As with many websites, pictures are an vital a part of Drupal Development Service design for my artwork gallery listings web site, Drupal Development Service Gallery Information. Drupal Development Service tough half is that Drupal Development Service web site is filled with user-generated content material, so not all of Drupal Development Service listings have pictures connected. The place there is not a picture, we use a placeholder – partly for our ’tiles’ design sample, but in addition as a result of Drupal Development Service picture is an integral a part of Drupal Development Service design for a person itemizing on giant screens. On a small display, this placeholder picture takes up quite a lot of area, and does not add a lot, so I wished to cover it at a sure breakpoint. It took me some time to get my head round how one can get into Drupal Development Service proper place to have the ability to do that in 8, following my previous standby of sprinkling my code with dpm statements (changed in D8 with kint). I ought to actually have cracked out XDebug, but it surely does sluggish issues down fairly a bit, and I used to be too lazy to uncomment just a few traces in php.ini. On this case it will have positively made sense, as a result of Drupal Development Service kint output was so giant that it slowed my browser right down to a crawl – most likely as a result of I hadn’t beforehand learn this Straightforward article. Having checked out Drupal Development Service variables in scope inside template_preprocess_field, I noticed that Drupal Development Service related object was an occasion of Drupal Development Service class FileFieldItemList, which extends EntityReferenceFieldItemList. This can be a good instance of the place a very good IDE like PHPStorm can actually assist – having discovered Drupal Development Service class, I might shortly navigate to its mother or father, and see its strategies – on this case Drupal Development Service related one was referencedEntities() Drupal 10 Upkeep and Assist Service /** * Implements hook_preprocess_field(). */ operate mytheme_preprocess_field(&$variables, $hook) { change ($variables[‘element’][‘#field_name’]) { // Machine identify of Drupal Development Service subject case ‘field_image’ Drupal 10 Upkeep and Assist Service // If that is Drupal Development Service default picture, add a category. $pictures = $variables[‘element’][‘#items’]->referencedEntities(); if (empty($pictures)) { $variables[‘attributes’][‘class’][] = ‘image__default’; } break; } } As soon as that class has been added, we are able to apply CSS to it – in my case it is in a SASS mixin that will get utilized to a couple completely different parts Drupal 10 Upkeep and Assist Service @mixin image-main { &.image__default img { @embrace breakpoint($mobile-only) { show Drupal 10 Upkeep and Assist Service none; } } } This is an instance on Drupal Development Service reside web site of a list with no picture uploaded, and by comparability, a list with a picture – as you may see, Drupal Development Service design would not work on giant screens if Drupal Development Service placeholder picture wasn’t there, however on small screens Drupal Development Service placeholder simply takes up area with out giving Drupal Development Service person something value . Drupal Development Service resolution is not excellent, as a result of Drupal Development Service browser will nonetheless obtain Drupal Development Service picture, even when it is set to show Drupal 10 Upkeep and Assist Service none, as Tim Kadlec wrote about some time in the past. However it’ll do for a facet venture… Tags Drupal 10 Upkeep and Assist Service  8 Drupal Development Service Gallery Information theming All tags Drupal 10 Growth and Assist