Is there any way I can include a display: none within the style of the module
<ImageOverlay url = {url} bounds = {[[-56, -100], [12.52, - 25.24]]}/>
Related
I'm creating labels for polygons with the following code:
L.marker(polygon.getBounds().getCenter())
.bindTooltip('County Name', {permanent: true, direction: 'center'})
.addTo(mymap);
However, the result isn't exactly what I'd call centered. Like the majority of the tooltip is on the right side of the marker whereas I'd expect the marker to be smack dab in the middle of the tooltip.
Any ideas as to what I can do to improve the situation?
If I can get this working I'll hide the marker by doing {opacity: 0} but if I do that now it'll look off center without a frame of reference.
If you want to add labels to the polygon you can use instead customised Tooltip.
In your Javascript code :
let custom_popup = L.popup()
.setLatLng(polygon.getBounds().getCenter())
.setContent('County name')
.addTo(map);
Then you can customise to make it look like a Marker using CSS :
.leaflet-popup-close-button // we remove the X to close the popup
{
display: none;
}
.leaflet-popup-tip // We remove the arrow pointing at the coordinates
{
display: none;
}
.leaflet-popup-content // We center the text inside the Tooltip
{
text-align: center;
}
Here's the result :
I have a simple question. I have a custom content area on my page called "left". Its added to the NodeType "Page" as a childNode in the yaml file:
'TYPO3.Neos.NodeTypes:Page':
properties:
[...]
childNodes:
'left':
type: 'TYPO3.Neos:ContentCollection'
In my TypoScript I added it to the page.body.content part:
page.body.content {
main = PrimaryContent {
nodePath = 'main'
}
left = ContentCollection {
nodePath = 'left'
}
}
I can add content to this new content area and it shows up in the frontend. Everything works just fine. Now I want to check if the ContentCollection of the current documentNode is empty and if this is the case I want to render the ContentCollection of the 'left' nodePath of the parent documentNode.
In other words: Subpages should render content of their parents if they dont have content on their own withing the defined content area.
How do I achieve this?
left = ContentCollection {
#override.node = ${q(node).children('left').children().count() == 0 ? q(node).parent().get(0) : node}
nodePath = 'left'
}
Is untested but should work just fine.
Note that this only goes one level up. If you need to fallback to more levels this needs to be done a bit differently.
I would like to set a default value for an image width in TYPO3 Neos.
Right now an editor may insert any image and the »width« value will be equal to the original size by default.
Example
First question:
I would like to set a default of 400 pixel instead. But the width field is no distinct node property, but an attribute of »image«. How do I set default values for attributes in Neos?
Second question:
What would I need to do, to completely hide the pixel based value field and offer an selection instead? Like „Option 1: Small teaser (150px), Option 2: Regular content image (400px), Option 3: Large image (980px)“.
Should I somehow remove the »width« attribute and add a new property node? Or may I change the type of the attribute somehow?
you can extend and configure default NodeType (TYPO3.Neos.NodeTypes:ImageMixin) for ImageEditor in Neos CMS.
Follow this steps:
Step 1:
Create new configuration file NodeTypes.Mixins.yaml in your sitepackage (for example: /Packages/Sites/YourSitePackageName/Configuration/NodeTypes.ImageMixin.yaml)
Step 2:
Copy default configuration for ImageMixin from Neos CMS Core (/Packages/Application/TYPO3.Neos.NodeTypes/Configuration/NodeTypes.Mixin.yaml) and remove properties which you doesn't like to extend/configure/override (for example: alternativeText and title). At the end you must have similar code:
`# Image mixin
'TYPO3.Neos.NodeTypes:ImageMixin':
abstract: TRUE
ui:
inspector:
groups:
image:
label: i18n
position: 5
properties:
image:
type: TYPO3\Media\Domain\Model\ImageInterface
ui:
label: i18n
reloadIfChanged: TRUE
inspector:
group: 'image'
position: 50`
Step 3: If you like to hide pixel base value fields (width, height) and crop button, you must add following editor options to image property:
position: 50
editorOptions:
features:
crop: FALSE --> hides crop button
resize: FALSE --> hides pixel based value fields
You can read more about this in Neos Documentation.
Step 4: For selection of predefined image sizes we add custom property imageSize (you can use other name) with following configuration:
imageSize:
type: string
ui:
label: 'Select Image Size'
reloadIfChanged: TRUE
inspector:
group: 'image'
position: 60
editor: 'TYPO3.Neos/Inspector/Editors/SelectBoxEditor'
editorOptions:
values:
small:
label: 'Small teaser (150x150)'
regular:
label: 'Regular content image (400x270)'
large:
label: 'Large image (980x500)'
allowEmpty: TRUE
This configuration add an select field with custom image sizes.
Step 5: Now we need to override default Image NodeType in TypoScript. Add following code to your Root.ts (/Packages/Sites/YourSitePackageName/Resources/Private/TypoScript/Root.ts2) (maybe you use other typoscript file).
prototype(TYPO3.Neos.NodeTypes:Image) {
// overwrite template for images
templatePath = 'resource://Vendor.YouSitePackageName/Private/Templates/NodeTypes/Image.html'
// define maximumWidth for images
maximumWidth = TYPO3.TypoScript:Case {
smallCondition {
condition = ${q(node).property('imageSize') == 'small'}
renderer = 150
}
regularCondition {
condition = ${q(node).property('imageSize') == 'regular'}
renderer = 400
}
largeCondition {
condition = ${q(node).property('imageSize') == 'large'}
renderer = 980
}
fallback {
condition = ${q(node).property('imageSize') == ''}
renderer = 400
}
}
// define maximumHeight for images
maximumHeight = TYPO3.TypoScript:Case {
smallCondition {
condition = ${q(node).property('imageSize') == 'small'}
renderer = 150
}
regularCondition {
condition = ${q(node).property('imageSize') == 'regular'}
renderer = 270
}
largeCondition {
condition = ${q(node).property('imageSize') == 'large'}
renderer = 500
}
fallback {
condition = ${q(node).property('imageSize') == ''}
renderer = 270
}
}
allowCropping = true
}
TYPO3.TypoScript:Case works like switch-function in PHP. We use this function for maximumWidth and maximumHeight. After create an condition for every option. In this condition we check which image size is selected and then write custom pixel value for width and height. With fallback condition you can define default value if image size is empty or was not selected.
The final solution may look as follows:
Example: Select Image Size
I hope this solution was helpful.
In FCE I dont want to use default TYPO3 elements like header, link etc. So I hide it with the following ts config:
TCEFORM.tt_content {
header.types.templavoila_pi1.disabled = 1
header_position.types.templavoila_pi1.disabled = 1
header_link.types.templavoila_pi1.disabled = 1
header_layout.types.templavoila_pi1.disabled = 1
date.types.templavoila_pi1.disabled = 1
subheader.types.templavoila_pi1.disabled = 1
}
After this unwanted fields are not shown. But when I save and close the content in backend, title part of the page content shows [No title].
Here is the screen short of page content:
So I desided to keep default heading field by removing the line:
header.types.templavoila_pi1.disabled = 1
from the tsconfig. How to prevent rendering of heading field?
Mark it as hidden. Edit your content (CASE#1) and from Type choose the last one named hidden.
or overwrite the header css config and set it to
display:none;
My backend template for my base template includes backend styling for the headline [no title]
<style>
.sortable_handle {
color: transparent;
}
.tpm-title-cell {
display: none;
}
</style>
###content###
In TYPO3v7 and v8, you can influence the content preview header by registering a hook for
$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']['cms/layout/class.tx_cms_layout.php']['tt_content_drawItem']
and resetting the $headerContent variable in your hook.
See https://stmllr.net/blog/customizing-preview-widgets-in-the-typo3-page-module/
My objective is to load dynamically various landscape panoramic images into the jScrollPane container and reinitialise so that the scrollbar would be re-calculated based on the current img dimensions.
My problem is that although I'm injecting the img src and then calling the api.reinitialise() method, it's not updating. Therefore the img loads, but the scrolling pane is still the same width.
I'm assume it has something to do with jScrollPane not being able to retrieve the new img dimensions in time to reinitialise with the right width.
HTML
<div class="px-content">
<img src="" />
</div>
JS
var scrollPane = $('.px-content').jScrollPane({hideFocus: true, showArrows: true, autoReinitialise: true});
var api = scrollPane.data('jsp');
var loadImage = function(id){
var image, $paneContent, $img;
imageSource= this.get(id); // returns an image URL
$paneContent = this.jspAPI.getContentPane();
$img = $paneContent.find('img').attr('src', imageSource);
api.reinitialise();
}
loadImage(0); // loads correctly
loadImage(1); // loads img correctly, but pane doesn't refresh to new width
Any ideas? Happy to try anything.
Seb.