paragraph_view_modes.md

fafnirical [Oct 9th at 10:42 PM] I generally think of Drupal view modes ("teaser", "full page", "search result", etc.) as purely contextual, telling the components what context the display context is for the component. Layout is partially derived from that, but I think of it as more a filter on what gets displayed

For the question of how to display something (in the contexts where it's displayed), I'd generally use a non-rendered field on the component, usually a Boolean or List field (edited)

24 replies jsheffers [1 day ago] Meaning a select list that has options “Image left” “Image right”

jsheffers [1 day ago] In my case?

jsheffers [1 day ago] That doesn’t render, but get’s passed to the component?

fafnirical [1 day ago] Yeah. In your template you'd have something like

{% set layout = paragraph.field_layout.value|default('image-left') %}

<div {{ attributes.addClass('mycomponent--layout-' ~ layout|clean_class) }}>
  ...
</div>

(I think that's the right syntax... I've been doing WordPress + Timber for the last month, so I can't quite remember Drupal's Twig syntax 😧)

But you'd never output {{ content.field_layout }} (or {{ paragraph.field_layout }}) on its own like you would with the other, rendered fields (edited)

jsheffers [1 day ago] Right

jsheffers [1 day ago] So when you need both, a view mode selector (to alter the data) and some type of alteration field (“image left”) would you make those conditional? Because in my case image left, image right won’t make sense for every display

jsheffers [1 day ago] For example if I choose the “Image full width Background” option

jsheffers [1 day ago] Whether that image is left or right is irrelevant, but it would still show on my paragraph edit form (edited)

fafnirical [1 day ago] You might be able to form_alter the paragraph edit form to hide the field when it wouldn't make sense for the selected view mode

In that case, setting a default in the template would be good (or conditionally rendering the class, if you prefer that way) (edited)

jsheffers [1 day ago] Right, or just move it to a different paragraph type (edited)

Also sent to the channel markconroy [1 day ago] Here's what I do (well these days it's a little tidier, but you'll get the idea)

https://mark.ie/blog/web-development/integrating-drupal-text-image-paragraph-bundle-patternlab

jsheffers [20 hours ago] Hey Mark, when I do what you did in your example, the image outputs as plain text

jsheffers [20 hours ago] | raw seems to fix it (edited)

jsheffers [20 hours ago] In pattern lab at least

markconroy [17 hours ago] Here’s what I do these days:

{#
  This pattern is used to create the HTML for the "Image with Text" paragraph
  bundle.
#}

{%
set classes = [
  'iwt',
  "layout-contained",
  "padding-horizontal",
  alignment,
]
%}

<div{{ attributes.addClass(classes) }}>

  <div class="iwt__inner">
    <div class="iwt__image">
      {{ it_image }}
    </div>

    <div class="iwt__text">
      {{ it_text }}
    </div>
  </div>

</div>

{% block content_variable %}
  {#
    This allows the cache_context to bubble up for us, without having to
    individually list every field in
    {{ content|without('field_name', 'field_other_field', 'field_etc') }}
  #}
  {% set catch_cache = content|render %}
{% endblock %}

markconroy [17 hours ago]

alignment: left

it_text: '<h2>Makes Every Library <strong>Your Local Library</strong></h2><p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>'
it_image: '<img src="http://placeimg.com/600/600/nature">'

markconroy [17 hours ago]

.iwt__inner {
  @include breakpoint($bp--medium) {
    @include flex-default;
    justify-content: space-between;
    align-items: center;
  }
}

.left > .iwt__inner {
  flex-direction: row;
}
.right > .iwt__inner {
  flex-direction: row-reverse;
  .iwt__text {
    @include breakpoint($bp--xlarge) {
      margin-right: $base-line-height * 3;
      margin-left: 0;
    }
  }
}

.iwt__image {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.iwt__image img {
  width: 100%;
  max-width: $bp--medium;
  border-radius: 50%;
  @include breakpoint($bp--medium) {
    max-width: 300px;
    height: auto;
  }
}

.iwt__text {
  flex: 1;
  margin-top: $base-line-height;
  @include breakpoint($bp--medium) {
    margin-top: 0;
  }
  @include breakpoint($bp--xlarge) {
    margin-right: 0;
    margin-left: $base-line-height * 3;
  }
}

markconroy [17 hours ago] Drupal Paragraph Template

{% if paragraph.field_p_it_alignment.value %}
  {% set alignment = paragraph.field_p_it_alignment.value %}
{% endif %}

{% set it_image = content.field_p_it_image %}

{% set it_text = content.field_p_it_text %}

{% include "@building-blocks/image-with-text/image-with-text.twig" %}

markconroy [17 hours ago] You should not need any |raw in any of that.

markconroy [17 hours ago] If you do, check you PL config.json file.

jsheffers [17 hours ago] Would it be the autoescape option?

markconroy [17 hours ago] Sounds like it might be.

jsheffers [17 hours ago] :thumbsup: disabling that worked

jsheffers [17 hours ago] thanks!!!