Uncaught DivisionByZeroError in Environment.php

[mtbluedog]

Hi,
I don't know if this is a bug in Flynt or Twig or problem with code else, but I don't know where to start to track down the cause, so I opened this discussion. I inherited this site that uses Flynt and ACF.

The error occurs when all ACF fields are not filled out for a Component in the post editor and the draft is saved; these ACF fields are marked required in the post editor, but I can't find in ACF Field Groups or in the Component templates where they are set to be required.

Can someone offer help on where I should be looking or what I should be doing?

I'm using Local localwp.com and PHP 8.2.27

Fatal error: Uncaught DivisionByZeroError: Division by zero in /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/vendor/twig/twig/src/Environment.php(418) : eval()'d code:86
Stack trace: #0 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/vendor/twig/twig/src/Template.php(405): __TwigTemplate_fc74fb8c3ab8323232953407cc67bc4e45415e45978832caf37b9378155ff075->doDisplay(Array, Array)
#1 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/vendor/twig/twig/src/Template.php(378): Twig\Template->displayWithErrorHandling(Array, Array)
#2 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/vendor/twig/twig/src/Template.php(390): Twig\Template->display(Array)
#3 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/vendor/twig/twig/src/Extension/CoreExtension.php(1223): Twig\Template->render(Array)
#4 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/lib/Utils/TwigExtensionFlynt.php(52): twig_include(Object(Twig\Environment), Array, 'Components/Bloc...', Array, true, false, false)
#5 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/vendor/twig/twig/src/Environment.php(418) : eval()'d code(55): Flynt\Utils\TwigExtensionFlynt->renderComponent(Object(Twig\Environment), Array, 'BlockImageText')
#6 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/vendor/twig/twig/src/Template.php(405): __TwigTemplate_fdb0334483be0145d33edde885ed610c6f56359429d3ce2deccec2f6ed272530->doDisplay(Array, Array)
#7 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/vendor/twig/twig/src/Template.php(378): Twig\Template->displayWithErrorHandling(Array, Array)
#8 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/vendor/twig/twig/src/Template.php(390): Twig\Template->display(Array)
#9 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/vendor/twig/twig/src/TemplateWrapper.php(45): Twig\Template->render(Array, Array)
#10 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/vendor/timber/timber/lib/Loader.php(79): Twig\TemplateWrapper->render(Array)
#11 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/vendor/timber/timber/lib/Timber.php(334): Timber\Loader->render('templates/theCo...', Array, false, 'default')
#12 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/vendor/timber/timber/lib/Timber.php(383): Timber\Timber::compile('templates/theCo...', Array, false, 'default', true)
#13 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/inc/theContentFix.php(46): Timber\Timber::fetch('templates/theCo...', Array)
#14 /Users/macuser/Local Sites/mtlocal/app/public/wp-includes/shortcodes.php(434): Flynt\Utils\FileLoader::Flynt\TheContentFix{closure}(Array, '', 'flyntTheContent')
#15 [internal function]: do_shortcode_tag(Array)
#16 /Users/macuser/Local Sites/mtlocal/app/public/wp-includes/shortcodes.php(273): preg_replace_callback('/\[(\[?)(flyntT...', 'do_shortcode_ta...', '[flyntTheConten...')
#17 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/plugins/relevanssi/lib/utils.php(222): do_shortcode('[flyntTheConten...')
#18 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/plugins/relevanssi/lib/indexing.php(1568): relevanssi_do_shortcode('[flyntTheConten...')
#19 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/plugins/relevanssi/lib/indexing.php(600): relevanssi_index_content(Array, Object(WP_Post), '3', false)
#20 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/plugins/relevanssi/lib/indexing.php(865): relevanssi_index_doc(73958, true, 'visible', true)
#21 /Users/macuser/Local Sites/mtlocal/app/public/wp-content/plugins/relevanssi/lib/indexing.php(938): relevanssi_publish(73958, true)
#22 /Users/macuser/Local Sites/mtlocal/app/public/wp-includes/class-wp-hook.php(326): relevanssi_insert_edit(73958)
#23 /Users/macuser/Local Sites/mtlocal/app/public/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters(NULL, Array)
#24 /Users/macuser/Local Sites/mtlocal/app/public/wp-includes/plugin.php(517): WP_Hook->do_action(Array)
#25 /Users/macuser/Local Sites/mtlocal/app/public/wp-includes/post.php(5831): do_action('wp_after_insert...', 73958, Object(WP_Post), true, Object(WP_Post))
#26 /Users/macuser/Local Sites/mtlocal/app/public/wp-includes/post.php(5124): wp_after_insert_post(Object(WP_Post), true, Object(WP_Post))
#27 /Users/macuser/Local Sites/mtlocal/app/public/wp-includes/post.php(5212): wp_insert_post(Array, false, true)
#28 /Users/macuser/Local Sites/mtlocal/app/public/wp-admin/includes/post.php(453): wp_update_post(Array)
#29 /Users/macuser/Local Sites/mtlocal/app/public/wp-admin/post.php(227): edit_post()
#30 {main} thrown in /Users/macuser/Local Sites/mtlocal/app/public/wp-content/themes/flynt-theme/vendor/twig/twig/src/Environment.php(418) : eval()'d code on line 86

Flynt/Components/BlockImageText/functions.php:

namespace Flynt\Components\BlockImageText;

use Flynt\FieldVariables;

function getACFLayout()
{
    return [
        'name' => 'blockImageText',
        'label' => 'Block: Image Text',
        'sub_fields' => [
            [
                'label' => __('General', 'flynt'),
                'name' => 'generalTab',
                'type' => 'tab',
                'placement' => 'top',
                'endpoint' => 0,
            ],
            [
                'label' => __('Image Position', 'flynt'),
                'name' => 'imagePosition',
                'type' => 'button_group',
                'choices' => [
                    'imageLeft' => '<i class=\'dashicons dashicons-align-left\' title=\'Image on the left\'></i>',
                    'imageRight' => '<i class=\'dashicons dashicons-align-right\' title=\'Image on the right\'></i>'
                ]
            ],
            [
                'label' => __('Image', 'flynt'),
                'name' => 'image',
                'type' => 'image',
                'preview_size' => 'medium',
                'instructions' => __('Image-Format: JPG, PNG, SVG.', 'flynt'),
                'required' => 1,
                'mime_types' => 'jpg,jpeg,png,svg'
            ],
            [
                'label' => __('Image Overlap Next Section', 'flynt'),
                'name' => 'image_overlap',
                'type' => 'true_false',
                'default_value' => 0,
                'ui' => 1
            ],
            [
                'label' => __('Content', 'flynt'),
                'name' => 'contentHtml',
                'type' => 'wysiwyg',
                'delay' => 1,
                'media_upload' => 0,
                'required' => 1,
            ],
            [
                'label' => __('Options', 'flynt'),
                'name' => 'optionsTab',
                'type' => 'tab',
                'placement' => 'top',
                'endpoint' => 0
            ],
            [
                'label' => '',
                'name' => 'options',
                'type' => 'group',
                'layout' => 'row',
                'sub_fields' => [
                    FieldVariables\getTheme()
                ]
            ]
        ]
    ];
}

Flynt/Components/BlockImageText/index.twig:

<div class="flyntComponent componentSpacing {{ options.theme }}" is="flynt-block-image-text">
  <div class="container">
    <div class="box box--{{ imagePosition }}">
      <div class="box-inner box-inner--content">
        {{ contentHtml|e('wp_kses_post') }}
      </div>
      <div class="box-inner box-inner--image{% if image_overlap %} fixed--overlap{%  endif %}">
        <figure class="figure">
          {% if image.post_mime_type == 'image/svg+xml' %}
            <img
              class="image lazyload"
              src="{{ placeholderImage(500, (500 * 0.75)|round) }}"
              data-src="{{ image.src }}"
              alt="{{ image.alt|e }}">
          {% else %}
            <img class="figure-image lazyload"
              src="{{ image.src|resizeDynamic(500) }}"
              srcset="{{ placeholderImage(500, 500 / image.aspect) }}"
              data-srcset="
                {{ image.src|resizeDynamic(1920) }} 1920w,
                {{ image.src|resizeDynamic(1320) }} 1320w,
                {{ image.src|resizeDynamic(1280) }} 1280w,
                {{ image.src|resizeDynamic(1035) }} 1035w,
                {{ image.src|resizeDynamic(860) }} 860w,
                {{ image.src|resizeDynamic(750) }} 750w,
                {{ image.src|resizeDynamic(500) }} 500w,
                {{ image.src|resizeDynamic(375) }} 375w"
              data-sizes="auto"
              alt="{{ image.alt|e }}">
            {% endif %}
          {% if image.caption %}
            <figcaption class="figure-caption">{{ image.caption|e }}{% if image.meta('photographer_name')  %}
                {% if image.meta('photographer_link')  %}<a href="{{ image.meta('photographer_link') }}" target="_blank">{% endif %}
                <span class="photographer_name">(photo by {{ image.meta('photographer_name') }})</span>
                {% if image.meta('photographer_link')  %}</a>{% endif %}
              {% endif %}</figcaption>
          {% endif %}
        </figure>
      </div>
    </div>
  </div>
</div>

[timohubois]

@mtbluedog It sounds like there’s a division by zero happening in one of the .twig files—likely someValue / someValue, where the denominator is 0. Are you using a custom component or a modified Flynt core component?

A quick fix would be to add an if condition to prevent the calculation when the denominator is zero. However, without seeing the exact .twig file, it’s hard to provide more specific guidance.

[mtbluedog]

Thanks for the quick reply! I don't know if BlockImageText has been modified.
I added the .twig file and functions.php files above.

Is 500, (500 * 0.75) and/or placeholderImage(500, 500 / image.aspect) the problem?

[timohubois]

@mtbluedog it think 500 / image.aspect is the problem. May checking if the image exists help in your case:

flynt/Components/BlockImageText/index.twig

Line 3 in a934c44

{% if image %}

[mtbluedog]

Thanks! That was the problem in two different components. I really appreciate it!

But I have a third component twig file that throws the same error, but I can't figure it out; the code is rather complex. Would you be willing to take a look? Or is that amount of support beyond the scope of discussions here?

[aaronmeder]

Best to just share the code of the whole component ;-)

[mtbluedog]

Thanks, these are the fles; I get the same Division by zero error, even though it appears that all fields have an if statement.

functions.php

namespace Flynt\Components\BlockImage;

use Flynt\FieldVariables;
use Flynt\Utils\Options;
use Timber\Timber;

const POST_TYPE = 'post';

add_filter('Flynt/addComponentData?name=BlockImage', function ($data) {
    $postType = POST_TYPE;

    $featured = Timber::get_posts([
        'post_status' => 'publish',
        'post_type' => $postType,
        'posts_per_page' => 1,
        'tax_query' => array(
            array(
                'taxonomy' => 'post_tag',
                'field'    => 'slug',
                'terms'    => 'featured'
            )
        ),

    ]);

    $data['featured'] = $featured[0];
    $data['featured_background'] = get_the_post_thumbnail_url( $featured[0]->ID );
    return $data;
});

function getACFLayout()
{
    return [
        'name' => 'blockImage',
        'label' => 'Top Section',
        'sub_fields' => [
            [
                'label' => __('General', 'flynt'),
                'name' => 'generalTab',
                'type' => 'tab',
                'placement' => 'top',
                'endpoint' => 0,
            ],
            [
                'label' => __('Image', 'flynt'),
                'name' => 'image',
                'type' => 'image',
                'preview_size' => 'medium',
                'instructions' => __('Image-Format: JPG, PNG, GIF.', 'flynt'),
                'mime_types' => 'gif,jpg,jpeg,png'
            ],
            [
                'label' => __('Mobile Image', 'flynt'),
                'name' => 'mobile_image',
                'type' => 'image',
                'preview_size' => 'medium',
                'instructions' => __('Image-Format: JPG, PNG, GIF.', 'flynt'),
                'mime_types' => 'gif,jpg,jpeg,png'
            ],
            [
                'label' => __('Horizontal Alignment', 'flynt'),
                'name' => 'horizontal',
                'type' => 'select',
                'allow_null' => 0,
                'multiple' => 0,
                'ui' => 0,
                'ajax' => 0,
                'default_value' => 'center',
                'choices' => [
                    'left' => ' Left',
                    'center' => ' Center',
                    'right' => ' Right',
                ],
            ],
            [
                'label' => __('Vertical Alignment', 'flynt'),
                'name' => 'vertical',
                'type' => 'select',
                'allow_null' => 0,
                'multiple' => 0,
                'ui' => 0,
                'ajax' => 0,
                'default_value' => 'center',
                'choices' => [
                    'top' => ' Top',
                    'center' => ' Center',
                    'bottom' => ' Bottom',
                ],
            ],
            [
                'label' => __('Headline', 'flynt'),
                'name' => 'headline',
                'type' => 'text'
            ],
            [
                'label' => __('SubHeadline', 'flynt'),
                'name' => 'subheadline',
                'type' => 'text'
            ],
            [
                'label' => __('Text Alignment', 'flynt'),
                'name' => 'textAlignment',
                'type' => 'button_group',
                'choices' => [
                    'textLeft' => '<i class=\'dashicons dashicons-editor-alignleft\' title=\'Align text left\'></i>',
                    'textCenter' => '<i class=\'dashicons dashicons-editor-aligncenter\' title=\'Align text center\'></i>',
                    'textRight' => '<i class=\'dashicons dashicons-editor-alignright\' title=\'Align text right\'></i>'
                ]
            ],

            [
                'label' => __('Options', 'flynt'),
                'name' => 'optionsTab',
                'type' => 'tab',
                'placement' => 'top',
                'endpoint' => 0
            ],
            [
                'label' => '',
                'name' => 'options',
                'type' => 'group',
                'layout' => 'row',
                'sub_fields' => [
                    FieldVariables\getTheme(),
                    [
                        'label' => __('No Margin', 'flynt'),
                        'name' => 'no_margin',
                        'type' => 'true_false',
                        'default_value' => 0,
                        'ui' => 1
                    ],
                    [
                        'label' => __('News Center', 'flynt'),
                        'name' => 'news_center',
                        'type' => 'true_false',
                        'default_value' => 0,
                        'ui' => 1
                    ],
                     [
                         'label' => __('Solid Color Background', 'flynt'),
                         'name' => 'solid_color_background',
                         'type' => 'true_false',
                         'default_value' => 0,
                         'ui' => 1
                     ]
                ]
            ],
            [
                'label' => __('Notification', 'flynt'),
                'name' => 'notificationTab',
                'type' => 'tab',
                'placement' => 'top',
                'endpoint' => 0,
            ],
            [
                'label' => __('Active', 'flynt'),
                'name' => 'notificationActive',
                'type' => 'true_false',
                'default_value' => 0,
                'ui' => 1
            ],
            [
                'label' => __('Headline', 'flynt'),
                'name' => 'notificationHeadline',
                'type' => 'text'
            ],
            [
                'label' => __('Description', 'flynt'),
                'name' => 'notificationDescription',
                'type' => 'text'
            ],
             [
                 'label' => __('Link Text', 'flynt'),
                 'name' => 'notificationLinkText',
                 'type' => 'text'
             ],
             [
                 'label' => __('Link', 'flynt'),
                 'name' => 'notificationLink',
                 'type' => 'text'
             ],
        ]
    ];
}

index.twig

<div class="flyntComponent flyntComponent--{{ options.size }} {{ options.theme }} {{ options.no_margin == true ? '' : 'componentSpacing' }}" is="flynt-top-section">
  <div class="backgroundImageContainer{% if options.solid_color_background == true  %} solid_color_background{% endif %}">
    <div class="container">
      {% if options.news_center %}
        <div class="row">
          <div class="col-md-7">
            <div class="content--{{textAlignment}}">
              <h1>News Center</h1>
              <h3>{{ featured.title }}</h3>
              <h5>{{ featured.subheadline }}</h5>
              <a href="{{ featured.link }}" class="learn-more-button">
                <span>Learn More</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="30.895" height="10.723" viewBox="0 0 30.895 10.723">
                  <g id="Componente_3_51" data-name="Componente 3 – 51" transform="translate(1.5)">
                    <path id="Trazado_115" data-name="Trazado 115" d="M943,5328.771h19.892" transform="translate(-943 -5323.409)" fill="none" stroke="#fffefa" stroke-linecap="round" stroke-width="3"/>
                    <path id="Trazado_125" data-name="Trazado 125" d="M4.765.345a.689.689,0,0,1,1.194,0L10.63,8.47a.689.689,0,0,1-.6,1.032H.69a.689.689,0,0,1-.6-1.032Z" transform="translate(29.395 0) rotate(90)" fill="#fffefa"/>
                  </g>
                </svg>
              </a>
            </div>
          </div>
        </div>
        {% else %}
          <div class="row">
            <div class="col-md-{% if notificationActive %}7{% else %}12{% endif %}">
              <div class="content--{{textAlignment}}">
                {% if headline %}<h1>{{ headline }}</h1>{% endif %}
                {% if subheadline %}<h3>{{ subheadline }}</h3> {% endif %}
              </div>
            </div>
            {% if notificationActive %}
            <div class="col-md-5">
              <div class="notificationWrapper">
                  <a href="{% if notificationLink %}{{ notificationLink }}{% endif %}" class="notificationBlock">
                    <div class="notificationTop">
                      {% if notificationHeadline %}<h4 class="sans">{{ notificationHeadline }}</h4>{% endif %}
                      {% if notificationDescription %}<p>{{ notificationDescription }}</p>{% endif %}
                    </div>
                    <div class="notifiicationBottom">
                      <div class="learn-more-button">
                        {% if notificationLinkText %}<span>{{ notificationLinkText }}</span>{% endif %}
                        <svg xmlns="http://www.w3.org/2000/svg" width="30.895" height="10.723" viewBox="0 0 30.895 10.723">
                          <g id="Componente_3_51" data-name="Componente 3 – 51" transform="translate(1.5)">
                            <path id="Trazado_115" data-name="Trazado 115" d="M943,5328.771h19.892" transform="translate(-943 -5323.409)" fill="none" stroke="#fffefa" stroke-linecap="round" stroke-width="3"/>
                            <path id="Trazado_125" data-name="Trazado 125" d="M4.765.345a.689.689,0,0,1,1.194,0L10.63,8.47a.689.689,0,0,1-.6,1.032H.69a.689.689,0,0,1-.6-1.032Z" transform="translate(29.395 0) rotate(90)" fill="#fffefa"/>
                          </g>
                        </svg>
                      </div>
                    </div>
                  </a>
              </div>
            </div>
            {% endif %}
          </div>
        {% endif %}
    </div>

    {% if image.meta('photographer_name') or image.caption  %}
    <div class="photographer_caption">
      <svg xmlns="http://www.w3.org/2000/svg" width="16.758" height="14.364" viewBox="0 0 16.758 14.364">
        <path id="Path_15460" data-name="Path 15460" d="M27.386,26l-.9,2.394H24.394A2.389,2.389,0,0,0,22,30.788V37.97a2.389,2.389,0,0,0,2.394,2.394h11.97a2.389,2.389,0,0,0,2.394-2.394V30.788a2.389,2.389,0,0,0-2.394-2.394H34.269L33.371,26Zm2.992,4.189a4.189,4.189,0,1,1-4.189,4.189A4.2,4.2,0,0,1,30.379,30.189Zm0,1.8a2.394,2.394,0,1,0,2.394,2.394A2.38,2.38,0,0,0,30.379,31.985Z" transform="translate(-22 -26)" fill="#fff"/>
      </svg>
      {% if image.caption  %}<span class="caption">{{ image.caption }}</span>{% endif %}
      {% if image.meta('photographer_name')  %}
        {% if image.meta('photographer_link')  %}<a href="{{ image.meta('photographer_link') }}" target="_blank">{% endif %}
        <span class="photographer_name">(photo by {{ image.meta('photographer_name') }})</span>
        {% if image.meta('photographer_link')  %}</a>{% endif %}
      {% endif %}
    </div>
    {% endif %}
    {% if options.solid_color_background == false  %}
    <div class="gradientOverlay"></div>
    {% endif %}

    {% set gif = image.post_mime_type == 'image/gif' %}
    {% if options.solid_color_background == true  %}
      <img class="transparent_logo_background" src="{{ theme.link }}/assets/images/transparent_logo_background.png" alt="">
    {% else %}
      {% if options.news_center  %}
        <img class="figure-image {{ not gif ? 'lazyload' }}{{ mobile_image ? ' desktop-image' }}"
             src="{{ featured_background }}"
             style="object-position: {{ horizontal }} {{ vertical }}"
             alt="{{ image.alt|e }}">
             {% if mobile_image %}
                     <img class="figure-image {{ not gif ? 'lazyload' }} mobile-image"
             src="{{ featured_background }}"
             style="object-position: {{ horizontal }} {{ vertical }}"
             alt="{{ image.alt|e }}">
             {% endif %}
      {% else  %}
        <img class="figure-image {{ not gif ? 'lazyload' }}{{ mobile_image ? ' desktop-image' }}"
        src="{{ not gif ? image.src|resizeDynamic(800) : image.src }}"
        style="object-position: {{ horizontal }} {{ vertical }}"
        {% if not gif %}
          srcset="{{ placeholderImage(800, 800 / image.aspect) }}"
          data-srcset="
            {{ image.src|resizeDynamic(1920) }} 1920w,
            {{ image.src|resizeDynamic(1440) }} 1440w,
            {{ image.src|resizeDynamic(1320) }} 1320w,
            {{ image.src|resizeDynamic(1024) }} 1024w,
            {{ image.src|resizeDynamic(800) }} 800w,
            {{ image.src|resizeDynamic(600) }} 600w,
            {{ image.src|resizeDynamic(375) }} 375w"
          data-sizes="auto"
        {% endif %}
        alt="{{ image.alt|e }}">
        {% if mobile_image %}
        <img class="figure-image {{ not gif ? 'lazyload' }} mobile-image"
        src="{{ not gif ? mobile_image.src|resizeDynamic(800) : mobile_image.src }}"
        style="object-position: {{ horizontal }} {{ vertical }}"
        {% if not gif %}
          srcset="{{ placeholderImage(800, 800 / mobile_image.aspect) }}"
          data-srcset="
            {{ mobile_image.src|resizeDynamic(1920) }} 1920w,
            {{ mobile_image.src|resizeDynamic(1440) }} 1440w,
            {{ mobile_image.src|resizeDynamic(1320) }} 1320w,
            {{ mobile_image.src|resizeDynamic(1024) }} 1024w,
            {{ mobile_image.src|resizeDynamic(800) }} 800w,
            {{ mobile_image.src|resizeDynamic(600) }} 600w,
            {{ mobile_image.src|resizeDynamic(375) }} 375w"
          data-sizes="auto"
        {% endif %}
        alt="{{ image.alt|e }}">
        {% endif %}
      {% endif %}
    {% endif %}
  {% if image.meta('photographer_name') or image.caption  %}
    <div class="container" style="z-index: 2;">
      <div class="mobile_photographer_caption">
        <svg xmlns="http://www.w3.org/2000/svg" width="16.758" height="14.364" viewBox="0 0 16.758 14.364">
          <path id="Path_15460" data-name="Path 15460" d="M27.386,26l-.9,2.394H24.394A2.389,2.389,0,0,0,22,30.788V37.97a2.389,2.389,0,0,0,2.394,2.394h11.97a2.389,2.389,0,0,0,2.394-2.394V30.788a2.389,2.389,0,0,0-2.394-2.394H34.269L33.371,26Zm2.992,4.189a4.189,4.189,0,1,1-4.189,4.189A4.2,4.2,0,0,1,30.379,30.189Zm0,1.8a2.394,2.394,0,1,0,2.394,2.394A2.38,2.38,0,0,0,30.379,31.985Z" transform="translate(-22 -26)" fill="#fff"/>
        </svg>
        {% if image.caption  %}<span class="caption">{{ image.caption }}</span>{% endif %}
        {% if image.meta('photographer_name')  %}
          {% if image.meta('photographer_link')  %}<a href="{{ image.meta('photographer_link') }}" target="_blank">{% endif %}
          <span class="photographer_name">(photo by {{ image.meta('photographer_name') }})</span>
          {% if image.meta('photographer_link')  %}</a>{% endif %}
        {% endif %}
      </div>
    </div>
    {% endif %}
  </div>
</div>

[aaronmeder]

Hey @mtbluedog

I cannot see a "division by zero" error when I try to use this component - however I might be missing some data it pulls in.

Most likely I would still guess it's related to one of the two lines where you use: srcset="{{ placeholderImage(800, 800 / image.aspect) }}". If image.aspect is zero it will return that exact error. That happens sometimes when you pass a "normal" Wordpress image (not a Timber/Image) to the component because that will lack the "aspect" attribute, if I am correct.

You can try if it fixes your issue when you set the line to srcset="{{ placeholderImage(800, 800 / image.aspect|default(1) ) }}" (add the |default(1) filter to image.aspect) - make sure you do that in all places where you use / image.aspect. Otherwise I would try to {{ dump(image) }} to see what data you are actually getting, instead of printing out the image in twig.

Component Structure
Just wanted to let you know, that you seem to be using the "old" Flynt v1 syntax for Components. Unless you are still using that on purpose I would suggest to use the new markup by using the <flynt-component name="BlockImage"></flynt-component> custom-element. See the code for BlockImage (or any other components).
It will have great benefits when working with Javascript in the components, since it takes care to only load the component scripts when needed.

See Web Components & "Javascript Modules" sections in the readme for more infos.

[mtbluedog]

Thanks for the extensive answer! I inherited this site, and I think it was built about 5 years ago, so that's why the Flynt version is old, I think. I'm still learning Twig and PHP.

The issue did turn out to be |default(1). BlockImage needed that, but there was also a Component that wasn't being used in the post editor (nor could be selected for use), called BlockImageOld, and that's what needed the image.aspect|default(1) to fix the error when using BlockImage. The file postComponents.php was calling BlockImageOld, even though BlockImageOld doesn't appear in the dropdown in post editor. I added image.aspect|default(1) to BlockImageGrid, as well.

Thanks much. I'm sure I will have other questions in the future.

[aaronmeder]

Glad to hear it worked out well @mtbluedog
Ah yes it makes sense then that the old component syntax is used.

Main differences in v2 is that the flynt-component custom-element is used for all components and jQuery isn't used anymore. Very good for speedy sites with good core web vitals.

You can define in the postComponents or pageComponents file what components appear when editing a page/post, but as you mentioned components can the used anywhere in your theme's page templates and layouts 😎

Happy weekend!
Aaron