Gallery FCE as example how to use fal images in Flux Content Elements

Gallery.html

<div xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
	xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
	xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
 
	<f:layout name="Content" />
 
	<f:section name="Configuration">
		<flux:form id="gallery" wizardTab="MG">
			<flux:field.inline.fal name="settings.images" multiple="TRUE" maxItems="20" />
		</flux:form>
	</f:section>
 
	<f:section name="Preview">
		<b><f:translate key="flux.gallery" /></b>
	</f:section>
 
	<f:section name="Resources">
	</f:section>
 
	<f:section name="Item">
		<li><a href="{image.url}" title="{f:if(condition: image.description, then: '{image.title}: ', else: '{image.title}')}{image.description}" rel="gallery"><f:image treatIdAsReference="TRUE" src="{image.id}" alt="{image.title}" title="{f:if(condition: image.description, then: '{image.title}: ', else: '{image.title}')}{image.description}" width="170c" height="170c" /></a></li>
	</f:section>
 
	<f:section name="Main">
		<div id="gallery">
			<div class="gallery_list">
				<ul>
					<f:for each="{v:content.resources.fal(field: 'settings.images')}" as="image">
						<f:render section="Item" arguments="{_all}" />
					</f:for>
				</ul>
			</div>
		</div>
	</f:section>
	
</div>

Shouldnt it be: flux:form id="certificatebox" options="{group: 'MG'}"

In the section "Item" i would like to use image.link instead of image.url so the link goes to the selected page instead to the image itself.
The problem is the link gets rendered like this http://www.site.com/12 <- when i select the page with id 12.
I could do href="?id={image.link}" ... but i'd really like to have URLs processed by realurl (with the page's name instead of the ID).

how do i show the images in the preview grid in the backend?