Merge pull request #427 from gordlin/image-size

Allow height and width configuration in image panels
ramp4-pcar4 · Dec 11, 2024 · 151ed37 · 151ed37
2 parents cb26d3e + 311d450
commit 151ed37
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/src/components/image-editor.vue b/src/components/image-editor.vue
@@ -74,6 +74,57 @@
                             @change="onImagesEdited"
                         />
                     </div>
+
+                    <div class="lg:flex gap-2">
+                        <div class="mt-4 w-full">
+                            <label class="text-left" :for="'imgHeight' + index"
+                                >{{ $t('editor.image.label.height') }}:</label
+                            >
+                            <input
+                                :id="'imgHeight' + index"
+                                class="editor-input w-full"
+                                type="text"
+                                v-model="element.height"
+                                @change="onImagesEdited"
+                            />
+                        </div>
+
+                        <div class="mt-4 w-full">
+                            <div class="flex flex-row gap-1 justify-start items-center">
+                                <label class="text-left" :for="'imgWidth' + index"
+                                    >{{ $t('editor.image.label.width') }}:</label
+                                >
+                                <span
+                                    :content="$t('editor.image.label.widthWarning')"
+                                    v-tippy="{ placement: 'top', hideOnClick: false, animateFill: true }"
+                                    tabindex="0"
+                                >
+                                    <svg
+                                        class="fill-current"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                                        width="16"
+                                        height="16"
+                                        viewBox="0 0 416.979 416.979"
+                                        xml:space="preserve"
+                                    >
+                                        <g>
+                                            <path
+                                                d="M356.004,61.156c-81.37-81.47-213.377-81.551-294.848-0.182c-81.47,81.371-81.552,213.379-0.181,294.85   c81.369,81.47,213.378,81.551,294.849,0.181C437.293,274.636,437.375,142.626,356.004,61.156z M237.6,340.786   c0,3.217-2.607,5.822-5.822,5.822h-46.576c-3.215,0-5.822-2.605-5.822-5.822V167.885c0-3.217,2.607-5.822,5.822-5.822h46.576   c3.215,0,5.822,2.604,5.822,5.822V340.786z M208.49,137.901c-18.618,0-33.766-15.146-33.766-33.765   c0-18.617,15.147-33.766,33.766-33.766c18.619,0,33.766,15.148,33.766,33.766C242.256,122.755,227.107,137.901,208.49,137.901z"
+                                            />
+                                        </g>
+                                    </svg>
+                                </span>
+                            </div>
+                            <input
+                                :id="'imgWidth' + index"
+                                class="editor-input w-full"
+                                type="text"
+                                v-model="element.width"
+                                @change="onImagesEdited"
+                            />
+                        </div>
+                    </div>
                 </ImagePreview>
             </template>
         </draggable>

diff --git a/src/lang/lang.csv b/src/lang/lang.csv
@@ -136,6 +136,9 @@ editor.changeLang.modal,"Are you sure you want to switch languages? Unsaved chan
 editor.frenchConfig,View French Config,1,Afficher la configuration en français,1
 editor.englishConfig,View English Config,1,Afficher la configuration en anglais,1
 editor.returnToLanding,Return to Landing,1,Retour à la page d’accueil,1
+editor.image.label.height,Height,1,Hauteur,0
+editor.image.label.width,Width,1,Largeur,0
+editor.image.label.widthWarning,Maximum width is 2/3 (66%) of screen on desktop and 100% on mobile. Larger widths will be ignored.,1,La largeur maximale est de 2/3 (66%) de l'écran sur un ordinateur de bureau et de 100% sur un appareil mobile. Les largeurs supérieures seront ignorées.,0
 editor.image.delete,Delete Image,1,Supprimer l'image,1
 editor.image.label.drag,Drag your images here,1,Faites glisser vos images ici,1
 editor.image.label.caption,Caption,1,Légende,1