You have been redirected from an outdated version of the article. Below is the content available on this topic. To view the old article click here.

Image

Image is the base type for all types that need image handling functionality.

Image extends File and provides the following additional properties.

Name | Type | Description
– | – | –
width | Integer | The width of this image in pixels
height | Integer | The height of this image in pixels
tnSmall | Image | The small thumbnail of this image, not larger than 100x100
tnMid | Image | The medium thumbnail of this image, not larger than 300x300
imageData | String, input only | A special property that can be used to Create an Image from a Base64 string
isThumbnail | Boolean | A read-only value that indicates whether this Image is a thumbnail image
isImage | Boolean | A read-only value that will always be true for all Image types and their subtypes

Search results for "Image"

Example Implementation

<div id="qrimage-wrapper">
<img id="qrimage" style="margin-left: calc(50% - 100px);">
<div>To use two factor authentication, scan this QR code with an authenticator app on your smartphone.</div>

<div class="text-sm mt-6">
<div>
<b>Android: </b>
<a class="cursor-pointer hover:text-blue-400 text-blue-700" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en&gl=US">Google Authenticator</a> on Google Playstore
</div>
<div>
<b>Apple iOS: </b>
<a class="cursor-pointer hover:text-blue-400 text-blue-700" href="https://apps.apple.com/us/app/google-authenticator/id388497605">Google Authenticator</a> on App Store
</div>
</div>
</div>

<form action="#" id="twoFactorForm">
<input id="twoFactorToken" type="hidden" value="${request.token}">
<div class="my-6">
<label class="block text-sm font-medium leading-5 text-gray-700">Two Factor Code</label>
<input id="twoFactorCode" class="appearance-none block w-full px-3 py-2 bg-blue-100 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5">
</div>
<button type="submit" id="login-button" class="w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-indigo active:bg-blue-700 transition duration-150 ease-in-out">Login</button>
</form>

<script>
document.addEventListener('DOMContentLoaded', () => {

// get all required elements
const qrimageWrapper = document.getElementById('qrimage-wrapper');
const token = document.getElementById('twoFactorToken').value;
const codeInput = document.getElementById('twoFactorCode').value;
const loginButton = document.getElementById('login-button');

let qrdata = (new URLSearchParams(location.search)).get('qrdata');

if (!qrdata) {
// remove qr code placeholder if user is not shown qr code
qrimageWrapper.remove();
} else {
// transform url-safe qr code to regular base64 to display as image
qrimageWrapper.querySelector('#qrimage').src = 'data:image/png;base64, ' + qrdata.replaceAll('_', '/').replaceAll('-', '+');
}

document.getElementById('twoFactorForm').addEventListener('submit', async (event) => {

event.preventDefault();

loginButton.disabled = true;

const response = await fetch('/structr/rest/login', {
method: 'POST',
body: JSON.stringify({
twoFactorToken: token,
twoFactorCode: codeInput
})
});

if (response.ok) {

loginButton.textContent = 'Login successful';
window.location.href = '/';

} else {

let buttonText = 'Login failed - is device time correct?';

let reason = response.headers.get('reason');

if (reason === 'wrongTwoFactorCode') {
buttonText = 'Two Factor Code is not correct';
}

loginButton.disabled = false;
loginButton.textContent = buttonText;

window.setTimeout(function() {
loginButton.textContent = 'Login';
loginButton.disabled = false;
}, 2000);
}
});
});
</script>

Simple Data Model

We now create a new datatype Project by typing “Project” into the “New type” field (New type) and hitting the “Add” button (Add). When done, it takes a couple of seconds for the schema to update.

Create Example Data

Now that we’ve created our project type, we can create database objects of this type by heading over to the Data area by clicking on Data tab in the main menu. Filter the type list in the left column by entering Project to get the list of existing projects (should be empty at the moment). Click on the “Create new Project” button (Create new Project) to create a new project. This creates a new entry in the table. The table lists properties of the new project including some system attributes like an id, name or owner. For now we will only be using the name property which can be set by clicking into the respective cell in the table and typing in the desired name. We create three projects with the names “Project 1”, “Project 2” and “Project 3”.

The next step is to add images or other files to the application. This follow-up section provides a brief introduction to Structr’s virtual file system and its available system data types. After that, we show how to add editing functionality to the application. using Structr’s integrated edit mode that allows users to edit the content of a web page inline.

Pagination Menu

For previewing special files such as images, it can be more convenient to browse through the items in the form of tiles, instead of a list. The buttons List, Tiles and Images allow you to change the way the items are displayed, as shown below:

Admin

The indices can either be rebuild globally via the Rebuild Index button (Rebuild Index) which rebuilds database indexes for all nodes and relationships, or selectively via the Select Node Type Option (Select Node Type Option) and the Re-Index Nodes button (Re-Index Nodes), or the Select Relationship Type Option (Select Relationship Type Option) and the Re-Index Relationships button (Re-Index Relationships).