imp(playground): display (adaptable) preview only when possible

Kocal · Dec 5, 2023 · 5e9edb5 · 5e9edb5
1 parent 05520e1
commit 5e9edb5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/src/Form/Type/PlaygroundType.php b/src/Form/Type/PlaygroundType.php
@@ -15,10 +15,11 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
     {
         $builder
             ->add('url', TextType::class, [
+                'required' => true,
                 'label' => 'Page URL',
-                'required' => false,
             ])
             ->add('format', ChoiceType::class, [
+                'required' => true,
                 'label' => 'Format',
                 'empty_data' => 'image',
                 'choices' => [

diff --git a/templates/home/index.html.twig b/templates/home/index.html.twig
@@ -10,19 +10,27 @@
                {{ form_start(form, { attr: { novalidate: 'novalidate' }}) }}
                    {{ form_row(form.url) }}
                    {{ form_row(form.format) }}
-                   <button type="submit" class="btn btn-primary">Create</button>
+                   <button type="submit" class="btn btn-primary">
+                       Create
+                   </button>
                {{ form_end(form) }}
            </div>
-           <div class="col">
-               <iframe width="100%" style="aspect-ratio: 1200 / 630" src="{{ image_url }}" class="shadow-sm"></iframe>
+           {% if form.url.vars.data %}
+               <div class="col">
+                   {% if form.format.vars.data == 'image' %}
+                       <img src="{{ image_url }}" width="100%" style="aspect-ratio: 1200 / 630" class="shadow-sm"></img>
+                   {% else %}
+                       <iframe src="{{ image_url }}" width="100%" style="aspect-ratio: 1200 / 630" class="shadow-sm"></iframe>
+                   {% endif %}
 
-               <hr>
+                   <hr>
 
-               <div class="form-group">
-                     <label for="image_url">Open Graph Image URL (preview) </label>
-                     <input type="text" class="form-control" id="image_url" value="{{ image_url }}" readonly>
+                   <div class="form-group">
+                       <label for="image_url">Open Graph Image URL (preview) </label>
+                       <input type="text" class="form-control" id="image_url" value="{{ image_url }}" readonly>
+                   </div>
                </div>
-           </div>
+           {% endif %}
        </div>
     </div>
 {% endblock %}