Uploading files

You can upload images and PDF files in the statements and answers you edit. To do this, drag a file onto the edit field. This will produce some HTML code, for example:

<!-- See https://dignitas.ro/help/image-upload for ways of customizing the uploaded file. -->
<a href="attachment/48/full.png" class="expand">
  <img src="attachment/48/200.png" alt="uploaded file">
</a>

You don't need to change this code if you don't want to. It works and you can verify that by pressing the visibility button to preview it. But if you wish you can edit the code to change the image layout. Here is what the various elements do.

The commentinsert_link

<!-- See https://dignitas.ro/help/image-upload for ways of customizing the uploaded file. -->

You can delete this comment. The system only prints it as a reminder of this help page.

The linkinsert_link

<a href="attachment/48/full.png" class="expand">...</a>

Don't delete this element. The href attribute is the link to the file you have just uploaded, while the expand class tells the system to expand the image to the entire screen when you click it.

The thumbnailinsert_link

<img src="attachment/48/200.png" alt="uploaded file">

This code describes the size of the thumbnail, its position and more. You can customize these values:

• 200 is the size of the thumbnail in pixels. Use the values 100, 200, 300, 400 to specify the width or x100, x200, x300, x400 to specify the height. The other dimension will adjust automatically to preserve the aspect ratio.
• alt="..." is the alternate text to print if the image cannot be shown (for example, if the user has a screen reader or if the connection is very slow).
• To have a tooltip displayed on mouse hover, add the title="..." attribute.

Centering the imageinsert_link

To center the image, wrap the code in a <div> like this:

<div class="text-center">
  <a href="attachment/48/full.png" class="expand">
    <img src="attachment/48/200.png" alt="uploaded file">
  </a>
</div>

Text flow around the imageinsert_link

If you want text to flow to the left or the right of the image, use one of the classes float-start or float-end like this:

<a href="attachment/48/full.png" class="expand float-start">

or

<a href="attachment/48/full.png" class="expand float-end">

Controlling the expanded image sizeinsert_link

By default, the expanded image is resized to fit the screen. For some images (especially those containing text), resizing is not desirable. You can request that the image be expanded at its original size using the original-size class like this:

<a href="attachment/48/full.png" class="expand original-size">

Linking to a specific page in a PDF fileinsert_link

You can link to a specific page in a PDF file by adding #page=X to the URL, for example https://example.com/path/file.pdf#page=45.