Mit Transloadit einfach Wallpaper für jedes Gerät erstellen
Ein neues Wallpaper für die eigenen Geräte auszuwählen, ist immer eine kleine Herausforderung. Und nichts ist ärgerlicher, als das perfekte Wallpaper zu entdecken und dann festzustellen, dass es nicht ganz passt. Falls Ihnen das schon einmal passiert ist, helfen wir Ihnen gern! Sehen Sie sich an, wie Sie mit der Leistungsfähigkeit von Transloadit die Größe jedes Wallpapers so ändern, dass es auf jedem Gerät perfekt sitzt.
Template
Wie es (zum Teil) im Sprichwort heißt: „Lehre einen Mann zu fischen, und du ernährst ihn ein Leben lang.“ Deshalb zeigen wir Ihnen, wie Sie eine Website bauen, die die Größe jedes Wallpapers automatisch an jede Bildschirmgröße anpasst 🎣
Der erste Schritt zu unserer Website besteht darin, ein Template in Transloadit anzulegen. Ein
Template ist eine Reihe von Assembly Instructions, die Transloadit später nutzt,
um unser Wallpaper mit fillcrop als
Größenänderungsstrategie auf die richtigen Abmessungen zu bringen.
Unten sehen Sie das Template, das wir heute verwenden.
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"crop_thumbed": {
"use": ":original",
"robot": "/image/resize",
"height": "${fields.height}",
"width": "${fields.width}",
"imagemagick_stack": "v3",
"resize_strategy": "fillcrop"
},
"exported": {
"use": ["crop_thumbed"],
"robot": "/s3/store",
"credentials": "S3_CREDENTIALS",
"result": true
}
}
}
Ihnen fällt vielleicht auf, dass wir ${fields.height} und ${fields.width} verwenden. Das sind Felder, die
sich dynamisch an ein Template übergeben lassen, sodass wir das Verhalten zur Laufzeit anpassen
können. Allgemeiner gesprochen handelt es sich um Assembly Variables, und davon gibt es eine
ganze Reihe, die Sie in Ihren Assemblies einsetzen können. Mehr über die verschiedenen
Einsatzmöglichkeiten von Assembly
Variables erfahren Sie hier.
Bevor Sie öffentlich ausliefern, verwenden Sie serverseitig generierte Signaturen
und validieren Sie die angeforderten Abmessungen auf Ihrem Server. Halten Sie das Auth Secret aus
dem Browser-Code heraus. Das folgende Browser-Beispiel zeigt das Upload- und Vorschauverhalten mit
Ihrem eigenen Template und Ihrem Auth Key. Ersetzen Sie S3_CREDENTIALS durch den Namen Ihrer gespeicherten
Template-Zugangsdaten; fügen Sie keine S3-Secrets in das Beispiel ein.
HTML & CSS
Wir tauchen dieses Mal nicht so tief in HTML und CSS ein wie sonst, aber sehen Sie sich beides unten gern an, falls Sie es in Ihr eigenes Projekt kopieren möchten.
<head>
<link href="https://releases.transloadit.com/uppy/v3.7.0/uppy.min.css" rel="stylesheet" />
</head>
<div class="content">
<h1>Wallpaper Resizer</h1>
<div class="button-list" id="preview-buttons"></div>
<label>Choose a photo <input id="photo-input" type="file" accept="image/*" /></label>
<p>You can also drop a photo over the frame</p>
<div id="preview-box"><img id="preview-image" alt="Resized wallpaper preview" hidden /></div>
<div id="progress-bar"></div>
<div class="button-list">
<a id="download" hidden>View wallpaper</a>
<button id="clear">Clear</button>
</div>
</div>
#preview-box {
border: 1px solid black;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 384px;
max-width: 100%;
aspect-ratio: 16 / 9;
overflow: clip;
position: relative;
}
#preview-image {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-family: Helvetica;
}
.button-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
JavaScript
Jetzt kommen wir zu meinem Lieblingsteil jedes Blogbeitrags – dem Integrationscode.
Platzieren Sie dieses Skript nach dem HTML in einem Tag vom Typ <script type="module">. Ersetzen Sie die
Platzhalter für Auth Key und Template ID durch Ihre eigenen Werte.
import {
Uppy,
DropTarget,
Informer,
ProgressBar,
Transloadit,
} from 'https://releases.transloadit.com/uppy/v3.7.0/uppy.min.mjs'
const uppy = new Uppy({
restrictions: {
allowedFileTypes: ['image/*'],
maxNumberOfFiles: 1,
},
autoProceed: true,
})
.use(DropTarget, {
target: '#preview-box',
})
.use(Informer, {
target: 'body',
})
.use(ProgressBar, {
target: '#progress-bar',
fixed: true,
})
.use(Transloadit, {
waitForEncoding: true,
assemblyOptions: () => ({
params: {
auth: { key: 'YOUR_AUTH_KEY' },
template_id: 'YOUR_TEMPLATE_ID',
},
fields: { height: cropHeight, width: cropWidth },
}),
})
.on('transloadit:complete', setPreviewImage)
const previewBox = document.getElementById('preview-box')
const previewImage = document.getElementById('preview-image')
let cropHeight = 1080
let cropWidth = 1920
const resolutions = [
[1920, 1080],
[1080, 1920],
[2560, 1080],
[1080, 2560],
[1366, 768],
[768, 1366],
]
const previewScale = 0.2
resolutions.forEach(appendButton)
document.getElementById('clear').addEventListener('click', clearPreview)
document.getElementById('photo-input').addEventListener('change', (event) => {
const file = event.currentTarget.files[0]
if (file == null) return
clearPreview()
try {
uppy.addFile({ name: file.name, type: file.type, data: file })
} catch {
uppy.info('Choose one image file and try again.', 'error', 5000)
}
event.currentTarget.value = ''
})
function setPreviewImage(assembly) {
const url = assembly.results.exported?.[0]?.ssl_url
if (typeof url !== 'string') {
uppy.info('No wallpaper was returned. Please try again.', 'error', 5000)
return
}
previewImage.hidden = false
previewImage.src = url
const downloadButton = document.getElementById('download')
downloadButton.href = url
for (const file of uppy.getFiles()) uppy.removeFile(file.id)
downloadButton.hidden = false
}
function clearPreview() {
previewImage.hidden = true
previewImage.removeAttribute('src')
const downloadButton = document.getElementById('download')
downloadButton.hidden = true
downloadButton.removeAttribute('href')
for (const file of uppy.getFiles()) uppy.removeFile(file.id)
}
function appendButton(resolution) {
const buttonTextEl = document.createElement('button')
buttonTextEl.className = 'button'
buttonTextEl.innerText = `${resolution[0]}x${resolution[1]}`
buttonTextEl.setAttribute('data-width', resolution[0])
buttonTextEl.setAttribute('data-height', resolution[1])
buttonTextEl.addEventListener('click', setPreviewBoxDimensions)
document.getElementById('preview-buttons').appendChild(buttonTextEl)
}
function setPreviewBoxDimensions(e) {
cropHeight = Number(e.currentTarget.getAttribute('data-height'))
cropWidth = Number(e.currentTarget.getAttribute('data-width'))
previewBox.style.width = `${cropWidth * previewScale}px`
previewBox.style.aspectRatio = `${cropWidth} / ${cropHeight}`
clearPreview()
}
Gehen wir den Code Zeile für Zeile durch.
Da wir eine Website bauen, beginnen wir natürlich damit, den besten Dateiuploader der Welt zu
importieren: Uppy. Zuerst müssen wir eine neue Instanz von Uppy erzeugen und anschließend
alle Plugins initialisieren. Für die heutige Demo nutzen wir das
Drop-Target-Plugin, das
Informer-Plugin, das
Progress-Bar-Plugin und schließlich das
Transloadit-Plugin. Wichtig ist, dass wir autoProceed auf
true setzen, damit unsere Datei zu Transloadit hochgeladen wird, sobald wir ein Bild über der Vorschau ablegen.
Danach deklarieren wir einige Variablen und Konstanten für unsere späteren Funktionen sowie ein
Array mit Auflösungen. Für jede Auflösung können wir später die Funktion appendButton aufrufen, um
eine Schaltfläche für jede Bildschirmgröße zu erstellen, die wir abdecken möchten.
Funktionen
Sehen wir uns nun die einzelnen Funktionen an, auf die wir verweisen.
Die Funktion setPreviewImage wird durch das Uppy-Event transloadit:complete aufgerufen – dieses wird immer dann
ausgelöst, wenn die Assembly bei Transloadit abgeschlossen ist. Anschließend sehen wir uns das Assembly
JSON unseres Ergebnisses an und lesen ssl_url der Datei aus unserem S3-Bucket aus. Danach können
wir die Sichtbarkeit des Vorschaubilds setzen und ihm das richtige Bild zuweisen.
Da wir ein Vorschaubild setzen, möchten wir es auch wieder entfernen! Genau dafür gibt es die
passend benannte Funktion clearPreview. Sie erledigt zwei sehr einfache Aufgaben: Sie blendet das
Element des Vorschaubilds aus und entfernt alle ausstehenden Dateien aus Uppy. Sobald ein Ergebnis
angezeigt wird, gibt setPreviewImage auch die fertige Datei frei, sodass ein weiteres Foto abgelegt
werden kann, ohne vorher auf Clear zu drücken.
Das Transloadit-Plugin wird nur einmal installiert. Seine Funktion assemblyOptions liest zu Beginn
jedes Uploads die ausgewählten ganzzahligen Abmessungen und sendet sie zusammen mit den Parametern
als Felder. Ein Wechsel der Auflösung installiert das Plugin daher nicht erneut und leitet die
Pixelwerte auch nicht aus den skalierten Vorschauabmessungen ab. Über das Dateifeld lässt sich ein
Foto außerdem ohne Drag-and-drop auswählen.
Als Nächstes folgt appendButton! Die Funktionsweise ist hier ziemlich selbsterklärend. Wir erstellen
ein Button-Element aus einem der Auflösungspaare. Bemerkenswert ist, dass wir zwei Datenattribute
hinzufügen, data-width und data-height, damit wir diese Werte später etwas einfacher aus der
Schaltfläche auslesen können.
Zu guter Letzt kommt setPreviewBoxDimensions. Hier lesen wir die zuvor erwähnten Datenattribute aus und
nutzen sie, um die Größe unserer Vorschaubox auf dasselbe Seitenverhältnis zu ändern, nur etwas
verkleinert, damit sie auf die Seite passt.
Endergebnisse
Kombinieren Sie HTML, CSS und das Modul-Skript, konfigurieren Sie Ihr Template und stellen Sie die Seite lokal bereit.
Wählen Sie eine Auflösung, wählen Sie ein Foto aus oder legen Sie es ab, und öffnen Sie das entstandene Wallpaper, um es aus Ihrem Browser zu speichern. Das in der Größe angepasste Bild passt zum ausgewählten Gerät, vom Samsung-Galaxy-Smartphone bis zum ultrabreiten Desktop-Monitor.
Und damit sind wir am Ende des heutigen Blogbeitrags angelangt! Wenn Sie schon gespannt auf den nächsten Beitrag warten, melden Sie sich unbedingt für den Newsletter an, um Updates zu den neuesten Entwicklungen bei Transloadit sowie Tech-Artikel zu erhalten, die wir interessant finden.