Layover text background Image

maschad · June 16, 2016, 5:00am

I am completely new to NEOS. I have no idea how to go about implementing a custom element which is an image with layover text like this , any help? thanks

stolle · June 16, 2016, 5:58am

Hey @maschad,

did you already found this? http://neos.readthedocs.io/en/stable/HowTos/CreatingContentElement.html

mad · June 16, 2016, 9:36am

Hello @maschad [quote=“maschad, post:1, topic:1194”]
completely new to NEOS
[/quote]
I strongly recommend two things to come in touch:

https://www.mittwald.de/neos-e-book-template-entwicklung

The ebook_neos_template.pdf : Neos - Schritt für Schritt -> Site-Package-Erstellung einfach erklärt
Really good to understand practical step by step tutorial to create your own one-page-agency-website with Neos’ ContentElements, templates and so on. Also with Github development-step packages to compare your own code with. Good for learn the basics and more - not only from theoretical documentation-page.
Drawbacks:

You have to sign-on for Newsletter. But in my mind, this is worth more than.
Only in German Language. But your PrintScreen is from German-Page, so German will be OK.

#1: Don’t hesitate about the first part. It is a bit technical, Neos is nice also without VirtualBox und Vagrant. 2-4 are really helpful.

With the combination «Mittwald Tutorial and punkt.de blog-Pages», you should have the ability to come in touch with Neos on a nice and handy way, design your own Content-Elements, Templates and so on. Also your desire, to create an image with layer-text is easy to accomplish, I guess.

Hope will help

stefkey · June 16, 2016, 11:17am

This forum (thank you) and this link helps me: https://neos.readthedocs.io/en/stable/HowTos/CreatingContentElement.html (same link like stolle post above, sorry)

I think your problem is not a neos problem, its a css problem.

And i think you can use the standard image node, or you can copy this node for second image node with special css because for layover text you need css-code! (you can try the caption of image)

Thats my special solution. Here you can write text “in the photo” instead in the insopector:
Change the “WS.FullWidth”!

css:

.sj-fullwidth {
	height: 400px;
	background: no-repeat center center fixed; 
  	-webkit-background-size: cover;
	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}
.sj-text-over-picture {
	text-align: right;
}
.sj-text-over-picture h2 {
	color: #fff;
	font-size: 42px;
	line-height: 74px;
	margin:0;
}
.sj-text-over-picture {
	position: relative;
	color: #fff;
	font-size: 22.4px;
	line-height: 28px;
	font-weight: 200;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.sj-fullwidth span {
	background-color: rgba(1, 125, 65, 0.7);	
}
.sj-fullwidth h2 span { padding: 11px; }
.sj-fullwidth p span { padding: 0px 1px; }

NodeTypes.yaml:

'WS:FullWidth':
  superTypes:
    'TYPO3.Neos:Content': TRUE
  ui:
    label: 'Volle Breite'
    group: 'general'
    inspector:
      groups:
        image:
          label: 'Image'
          icon: 'icon-image'
          position: 1
  properties:
    headline:
      type: string
      defaultValue: 'Replace by your headline value ...'
      ui:
        label: 'Headline'
        inlineEditable: TRUE
    text:
      type: string
      ui:
        label: 'Text'
        reloadIfChanged: TRUE
    image:
      type: TYPO3\Media\Domain\Model\ImageInterface
      ui:
        label: 'Image'
        reloadIfChanged: TRUE
        inspector:
          group: 'image'

root.ts2:

prototype(WS:FullWidth) < prototype(TYPO3.Neos:Content) {
        templatePath = 'resource://WS.fshsite/Private/Templates/TypoScriptObjects/FullWidth.html'

        headline = ${q(node).property('headline')}
        text = ${q(node).property('text')}
        image = ${q(node).property('image')}
}

FullWidth.html:

{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<div class="sj-fullwidth" <f:if condition="{image}">style="background-image: url({media:uri.image(image: image)});"</f:if>>
 	<div class="container sj-text-over-picture">
		<h2>{neos:contentElement.editable(property: 'headline', tag: 'span')}</h2>
               	<p>{neos:contentElement.editable(property: 'text', tag: 'span')}</p>
	</div>
</div>

stefkey · June 16, 2016, 11:20am

How can I put code in this forum with spaces before lines? grrrr

maschad · June 16, 2016, 3:08pm

Thanks much but I actually don’t speak German , but I will still check out the links with Google translate

mad · June 16, 2016, 4:26pm

I do always a copy → paste from IDE/texteditor.

[code]
#for css paste between

[before free line - than->] paste value
```[/code]

[code]
#for html
```html
[before free line - than->] paste value
```[/code]

[code]
#for ts2
```ruby
[before free line - than->] paste value
```[/code]

See also in https://meta.discourse.org/t/syntax-highlighting-of-code-blocks/7242/3
Sometimes the online-editor from discourse has a bit problem with, than you have to ensure there is first a clean free space-line between the three hight apostrophes, before you paste the clipboard.

maschad · June 17, 2016, 1:21am

Thank you so much for your quick and helpful response!

maschad · June 17, 2016, 3:54am

When I try to render this code I receive the following error

mad · June 17, 2016, 7:24am

Hey @maschad,
looks like you don’t use an existing image-nodeType. Do ensure the image is existing in your Fluid-Template FullWidth.html

It is very important in Neos to have exactly tab set in your yaml-file. One tab too few then the Object looks like it exist for your eyes, but not for Neos.
Maybe I’m totally wrong, because I can’t see your code, but most of the time I had errors like this because wrong defined tabs in yaml-file.

If you have to check it, sometimes an

    <f:debug title="Results should not be «NULL»">{image}</f:debug>

will help you. Output should look like:

If it looks like this:

you have to rifle through your yaml-definition (Tabs: as described above) or maybe a problem in your root.ts2 or wrong properties definition.

Copy&paste is often the hell, if you select code out from this Neos-forum. In the Discourse-Editor, Tabs are sometimes fortune. But without your code, maybe I’m on wrong path.

Neverless, hope it will help you to find the «bug» in your code
Cheers Martin

stefkey · June 17, 2016, 9:30am

@mad Danke vielmals! Und wieder was gelernt

@maschad: I had edit the code above. Now there are spaces, I hope its all correct spaces in .yaml

maschad · June 17, 2016, 9:21pm

Thanks again for your thorough response but I still can’t quite figure out what it is, here is my code.
Layover.html

{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}
<div class="sj-fullwidth" style="background-image: url({media:uri.image(image: image)});">
	<f:debug title="Results should not be «NULL»">{image}</f:debug>
	<div class="container sj-text-over-picture">
		<h2>{neos:contentElement.editable(property: 'headline', tag: 'span')}</h2>
		<p>{neos:contentElement.editable(property: 'text', tag: 'span')}</p>
	</div>
</div>

Layover.ts2

prototype(Country.Germany:Layover) < prototype(TYPO3.Neos:Content) {
    templatePath = 'resource://Country.Germany/Private/Templates/NodeTypes/Layover.html'

    headline = ${q(node).property('headline')}
    subheadline = ${q(node).property('subheadline')}
    text = ${q(node).property('text')}
    image = ${q(node).property('image')}
}

NodeTypes.Layover.yaml

'Country.Germany:Layover':
  superTypes:
    'TYPO3.Neos:Content': TRUE
  ui:
    label: 'Text layover Image'
    group: 'general'
    inspector:
      groups:
        image:
          label: 'Image'
          icon: 'icon-image'
          position: 1
  properties:
    headline:
      type: string
      defaultValue: 'Replace by your headline value ...'
      ui:
        label: 'Headline'
        inlineEditable: TRUE
    text:
      type: string
      ui:
        label: 'Text'
        reloadIfChanged: TRUE
    image:
      type: TYPO3\Media\Domain\Model\ImageInterface
      ui:
        label: 'Image'
        reloadIfChanged: TRUE
        inspector:
          group: 'image'

and here is the current error :

stefkey · June 17, 2016, 9:49pm

same error now!

Catchable Fatal Error: Argument 1 passed to TYPO3\Media\Domain\Service\AssetService_Original::getThumbnailUriAndSizeForAsset() must implement interface TYPO3\Media\Domain\Model\AssetInterface, null given, called in /var/www/neos/neos_2/Data/Temporary/Development/Cache/Code/Flow_Object_Classes/TYPO3_Media_ViewHelpers_Uri_ImageViewHelper.php on line 91 and defined in /var/www/neos/neos_2/Data/Temporary/Development/Cache/Code/Flow_Object_Classes/TYPO3_Media_Domain_Service_AssetService.php line 54

christianm · June 18, 2016, 4:54pm

You need to check if {image} is null before using the media viewhelper. When you first insert the element there is no image, so it is normal that it is null. Use <f:if> to check it.

stefkey · June 18, 2016, 4:58pm

oh many thanks!!! Great, i understand.

@maschad: I have corrected the FullWidth.html above. You can check it.

maschad · June 18, 2016, 6:42pm

Thanks so much for your help!