Overriding templates
EXT:academic_jobs is using Fluid as template engine.
This documentation won't bring you all information about Fluid but only the most important things you need for using it. You can get more information in the section Fluid templates of the Sitepackage tutorial. A complete reference of Fluid ViewHelpers provided by TYPO3 can be found in the ViewHelper Reference
Change the templates using TypoScript constants
As any Extbase based extension, you can find the templates in the directory
Resources/.
If you want to change a template, copy the desired files to the directory where you store the templates.
We suggest that you use a sitepackage extension. Learn how to Create a sitepackage extension.
# TypoScript constants
plugin.tx_academicjobs {
view {
templateRootPath = EXT:mysitepackage/Resources/Private/Extensions/myextension/Templates/
partialRootPath = EXT:mysitepackage/Resources/Private/Extensions/myextension/Partials/
layoutRootPath = EXT:mysitepackage/Resources/Private/Extensions/myextension/Layouts/
}
}
Change the labels of the job properties
The job list and the job detail view render the properties of a job through one
loop, in Resources/Private/Partials/Job/Item.html respectively
Resources/Private/Partials/Job/Information.html. The loop takes every
label from Resources/Private/Language/locallang.xlf, which follows three
rules:
jobs.<property>is the row label of a property, for examplejobs.orwork Location jobs..link jobs.<property>.<value>is the label of a value of a select property:jobs.totype. 1 jobs.andtype. 3 jobs.toemployment Type. 1 jobs..employment Type. 2 - Two properties are rendered without their stored value and therefore carry
a label that is a full statement:
jobs.andinternationals Welcome jobs.. They are rendered only when the flag is set.alumni Recommend
The link property is the one exception to the first rule: it renders the row
label jobs. and, as the text of the anchor, jobs..
Override any of them the way you override a label of an extension, without copying the partial:
# TypoScript setup
plugin.tx_academicjobs._LOCAL_LANG {
default.jobs.linkText = To the application form
de.jobs.linkText = Zum Bewerbungsformular
}
Every label of the extension, and the path of each content element, is listed in Labels.
Replace the icon of a job property
The same loop renders an icon in front of every property. Each property has an
identifier of its own, tx- and the property name in kebab
case, for example tx- for work.
The loop lists every property it shows together with the name of its icon:
<f:for
each="{
employmentStartDate: 'employment-start-date',
companyName: 'company-name',
…
}"
as="iconName"
key="item"
>
<ab:icon identifier="tx-academicjobs-info-{iconName}"/>
…
</f:for>
The contact block renders tx- and
tx- in front of the phone number and the
e-mail address. The extension also registers
tx-, tx- and
tx-, which no shipped
template renders, so an override that adds one of these properties to the loop
gets an icon without registering one.
The icons are the shared Font Awesome Free glyphs of
EXT:academic_base, several properties share one. They are inlined
and drawn in current: they take the colour of the surrounding text and
are as large as its font, so they need no CSS of their own.
These are frontend icons. They are registered in
Configuration/ and rendered with the ab:
ViewHelper of EXT:academic_base. Replace one by registering a file
of your own under its identifier in the Configuration/
of your site package, which has to depend on the extension so that its entry is
read last. The other properties keep their icons, also those that show the same
glyph:
<?php
use FGTCLB\AcademicBase\Imaging\IconProvider\CurrentColorSvgIconProvider;
return [
'tx-academicjobs-info-work-location' => [
'provider' => CurrentColorSvgIconProvider::class,
'source' => 'EXT:mysitepackage/Resources/Public/Icons/Location.svg',
],
];
Current inlines a file drawn in current, like
the shipped icons. A file in other colours is registered with the
\TYPO3\ of TYPO3, which
renders it as an image of 16 by 16 pixels.
An entry in Configuration/Icons.php does not reach the job views. An
override of Job/, Job/ or
Job/ renders these icons with ab: and declares
xmlns: in its
<html>
tag. With core: it shows TYPO3's not-found icon, see
Breaking: The job icons are renamed and moved to the frontend icons.
The content element icon and the job record icon both draw the Font Awesome
Free briefcase of the shared set,
EXT:, see
Third-party icons.
The image of a job
The job list item renders the job image through the shared partial
Academic/ of EXT:, whose arguments and presets
are documented in the Templates chapter of that extension.
It asks for the preset card with the crop variant default. This extension
defines no crop variants, so default stays free-ratio and an employer logo is
not cut; an SVG logo is passed through unprocessed whatever the preset says.
Two consequences for an override:
- Overriding
Job/alone changes where the image sits, not how it is rendered. To change the markup, the breakpoints or the widths, place anItem. html Academic/of your own in the partial root path above.Image. html -
The partial root path of
EXT:is registered below the constant above, so the copy wins. A view of your own that rendersacademic_ base Job/has to list that path itself, or the rendering fails on a partial it cannot resolve. Pick a key of your own rather than the one this extension uses, and list it underItem. html pathstoo if your page object is aPAGEVIEW, which reads nopartial:Root Paths # TypoScript setup page.10 { partialRootPaths.-1700000001 = EXT:academic_base/Resources/Private/Partials/ paths.-1700000001 = EXT:academic_base/Resources/Private/ }Copied!
Change the fields of the new job form
Every field of the New job form is rendered by a partial below
Job/: Textfield., Textarea.,
Select., Checkbox., Date and
Upload., each wrapped by Field, and the alert
above the form by Errors.. Override these names. They render the
shared form partials of EXT:academic_base, described in its
Templates chapter, and pass Job/ on as
the wrapper, so an override of Job/ changes the
label and the required mark of every field at once.
Add a field to the new job form
The New job form renders the partial
Job/ between the job properties and the
submit button. The partial the extension ships renders nothing, so a field such
as a captcha is added by placing a Job/ of
your own in the partial root path above, without copying
Templates/ or Partials/. The
partial receives every variable of the form template.
Name such a field outside the job argument of the form. The field below is
submitted as tx_ and is not mapped to the
job. A field bound to the job with property must name a property the job
model has: the property mapping rejects any other one and the submission fails.
<html
lang="en"
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true"
>
<div class="ace-field ace-text-wrap">
<label class="ace-label" for="job-form-captcha">Captcha</label>
<f:form.textfield name="captcha" id="job-form-captcha" class="ace-control ace-text" />
</div>
</html>
The partial only renders the field. The extension neither checks its value nor dispatches an event before the job is stored, so a site checks a captcha answer before the request reaches the plugin, in a middleware for example.