Multiple Images in TemplaVoila Template, TYPO3 6+ - image

You can find many snippets online for the DataStructure of a TemplaVoila FCE, to let it render multiple images in one field. This doesn't work on TYPO3 6+. The whole object just doesn't pop up, but TemplaVoila is also not throwing an error.
The Typoscript of the DS looks like this:
10 = COA
10 {
10 = HTML
10 {
value.field = field_carousel
value.split {
token = ,
cObjNum = 1
1 {
10 = IMAGE
10 {
file {
import.current = 1
import = uploads/tx_templavoila/
maxW = 1920
}
}
}
}
}
}
The field-name is correct. As you can see here: https://snipt.net/mawe/f/ it works actually on TYPO3 4.7.x. Though, on 6+ it seems to break something. The output remains blank.
The field-type is image (I tried it with fixed width/height and without). If I keep the original TypoScript, it just shows the first image in my list, which is the correct behaviour:
10 = IMAGE
10 {
file {
import = uploads/tx_templavoila/
import.current = 1
import.listNum = 1
maxW = 1920
}
}
Anyone knows, how to solve this problem? The final result has to be something like this (I need to wrap it into those div containers as well):
<div class="item">
<img src"..." alt="" title="" />
</div>
<div class="item">
<img src"..." alt="" title="" />
</div>
...

cObj HTML is deprecated: TYPO3 lib HTML and TEXT code
So simply change your code to:
10 = COA
10 {
10 = TEXT
10 {
value.field = field_carousel
value.split {
token = ,
cObjNum = 1
1 {
10 = IMAGE
10 {
file {
import.current = 1
import = uploads/tx_templavoila/
maxW = 1920
}
}
}
}
}
}

Related

Nativescript-Vue Issue with Panning Elements around

So I am building a photo group creator in Nativescript-vue. I have the pan working and the view is rendering correctly. But my issue is when a user starts to pan the image outside the container it's in, the image goes 'behind' the container. And I need it to render ontop of everything. I have tried 'z-index' with css and still no go.
The idea is, there is a group of photos (un-grouped group). And the user will be able to click-and-drag a photo in the group down to an 'empty' group. And this in turn would create a new group. Or if there were other groups the user would be able to drag an image and add it to an existing group.
Any help or suggestions, thank you in advance!
This is my Vue Component
<template>
<StackLayout orientation="vertical" ref="mainContainer">
</StackLayout>
</template>
<script>
import * as StackLayout from 'tns-core-modules/ui/layouts/stack-layout';
import * as Image from 'tns-core-modules/ui/image';
import _ from 'underscore';
export default {
name: "photo-groupings",
props:{
photoList:{
type: Object,
required: true
}
},
mounted(){
let ungrouped = this.createGroupElement();
let newGroupElement = this.createGroupElement();
console.log(_.keys(this.photoList));
for(let pht of _.keys(this.photoList)){
console.log(pht);
console.log(this.photoList[pht]);
ungrouped.addChild(this.createImageChild(this.photoList[pht]))
}
this.$refs.mainContainer.nativeView.addChild(ungrouped);
this.$refs.mainContainer.nativeView.addChild(newGroupElement)
},
data(){
return {
photoGroups:{},
groupElements:{},
prevDeltaX: 0,
prevDeltaY: 0
}
},
methods:{
createImageChild(src){
let tempImg = new Image.Image();
tempImg.src = src;
tempImg.width = 100;
tempImg.height = 100;
tempImg.stretch = "aspectFill";
tempImg.borderRadius = 10;
tempImg.borderWidth = 2;
tempImg.borderColor = "forestgreen";
tempImg.margin = 5;
tempImg.on('pan', this.handlePan);
return tempImg;
},
createGroupElement(){
let tempGroup = new StackLayout.StackLayout();
tempGroup.orientation = "horizontal";
tempGroup.margin = 5;
tempGroup.borderColor = "black";
tempGroup.borderRadius = 5;
tempGroup.borderWidth = 1;
tempGroup.minHeight = 110;
return tempGroup;
},
handlePan(args){
if (args.state === 1) // down
{
this.prevDeltaX = 0;
this.prevDeltaY = 0;
console.log(args.view.getLocationRelativeTo(args.view.parent));
console.log(args.view.parent.getLocationInWindow());
}
else if (args.state === 2) // panning
{
args.view.translateX += args.deltaX - this.prevDeltaX;
args.view.translateY += args.deltaY - this.prevDeltaY;
this.prevDeltaX = args.deltaX;
this.prevDeltaY = args.deltaY;
}
else if (args.state === 3) // up
{
console.log("Pan release")
}
}
}
}
</script>
<style scoped>
</style>
Example Image of the images rendering 'behind'
The best way here would be creating a ghost element.
You should not move the original image but hide the original image when you detect drag, create a ghost of original image and insert it on the parent layout. When user drops the ghost image, destroy the ghost and move original image to destination.

How to start a HTML 5 video from a particular position in laravel 5

i new start a video in a specific position when the web is loading, i get the position using a eloquent var coming from the controler.
I also use jquery for other functions in the same view.
I have checked the variables arrive correctly so I do not know where is the error.
The strange thing is this method only works if I show a alert popup before in firefox. (not work in chrome or other browser).
This is my code:
<video id="video" style="display:none; width:100%; height:100%;" autoplay>
<source src="/files/convert/videos/{{$moviesNow->url}}" type="video/mp4" />
Su navegador no soporta el tag video.
</video>
<script>
var vid = document.getElementById("video");
var time = {{$difTime}};
var isPlaying = {{$playNow}};
var moviesArr = [];
};
var j = jQuery.noConflict();
j(document).ready(function() {
if(time >= 0 && isPlaying == 1){
//vid.currentTime = time;
}
});
function setCurTime() {
vid.currentTime = time;
};
</script>
Also i trying use:
document.getElementById('video').addEventListener('loadedmetadata', function() {
this.currentTime = time;
}, false);
But the problem is not solved.
The loadedmetadata event is helpful, but it doesn't ensure that the section of video you are trying to access is seekable yet. You could try a simpler solution using Media Fragments:
Just add #t=120 to the end of the video url to have it auto-forward to that spot. Like this:
video {
height: 180px;
width: 320px;
}
<video src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4#t=120" controls autoplay></video>

Typo3 Record localization

I am struggling with Typo3 / Typoscript.
I want to localize a website to two languages in total (German as default, and English). Using the following typoscript I could localize my standard text records:
lib.main = CONTENT
lib.main {
table = tt_content
select {
pidInList = this
languageField = sys_language_uid
orderBy = sorting
}
renderObj.stdWrap.dataWrap = <section id="tt_content_{field:uid}"><article>|<hr class="clearer"/></article></section>
}
However, no images / media records and their captions are overwritten/localized. I already have these settings in my Typoscript:
config.sys_language_overlay = 1
config.sys_language_softExclude = tt_content:image
config.sys_language_softMergeIfNotBlank = tt_content:image
config.sys_language_mode = strict
The images (and files) and captions are still default German; no translation / localization. Even if I altered the localized record with different files, only the default was visible. Is there another point where I can force localization? Another snippet using the image is a caption wrap (which another one created):
plugin.tx_presets_pi1 {
rendering {
file.import.data = file:current:uid_local
caption {
wrap = <p class="center image-caption">|</p>
}
}
}
Could someone suggest a solution?
I have the feeling that it is a FAL problem (and a reported bug...?!) Thanks for your generous help :)
Localize file or image references: A simpler example for the above solution:
lib.image < styles.content.get
lib.image {
renderObj = FILES
renderObj {
references {
table = tt_content
uid.data = field:uid
fieldName = image
}
renderObj = IMAGE
renderObj {
file.import.data = file:current:publicUrl
altText.data = file:current:alternative
titleText.data = file:current:title
}
}
}
[globalVar = GP:L > 0]
# Reference to localized image (including localized title and alternative)
lib.image.renderObj.references {
uid.data =
l18n_parent.data = field:uid
}
[global]
I had a similar problem: A (parallax) background image with a textbox inside. The content of the textbox is rendered from the images title, description, alternative text and link.
The trick is:
Use l18n_parent instead of uid for relating to the image reference relation if language is > 0 [globalVar = GP:L > 0]. So you get the localization of the images.
This can easily be adapted for sliders as well.
# Image with title, alternative text, description and link, replace 101 with your colPos
lib.bgImageWithTextbox < styles.content.get
lib.bgImageWithTextbox {
select.where = colPos = 101
stdWrap.required = 1
renderObj = FILES
renderObj {
references {
table = tt_content
uid.data = field:uid
fieldName = image
}
renderObj = COA
renderObj {
# Render container with image as background
10 = IMG_RESOURCE
10 {
file.import.data = file:current:publicUrl
file.treatIdAsReference = 1
stdWrap.wrap >
stdWrap.dataWrap (
<div class="g-section-padding-medium js-parallax" data-image-src="/|" data-speed="0.75">
<div class="c-box-background-image">
<h3>{file:current:title}</h3>
<p>{file:current:description}</p>
)
}
# Render textbox with typolink (internal, external, target = _blank etc.)
20 = TEXT
20 {
data = file:current:alternative
typolink.parameter.data = file:current:link
typolink.wrap = |
}
# Close image container
30 = TEXT
30.value (
</div>
</div>
)
}
}
}
[globalVar = GP:L > 0]
# Translation of image texts
lib.bgImageWithTextbox.renderObj.references {
uid.data =
l18n_parent.data = field:uid
}
[global]

Adding and removing images with d3js

* problem solved please ignore *
I'm trying to remove and add images with D3.js, and I cannot figure out how to add. Grateful for an idea where I'm going wrong. Here is the jsfiddle and code below:
html
<h3>Click on the images - they should be replaced by new ones</h1>
<div id="image_gallery">
<img class="image_gallery" src="http://imgs.xkcd.com/comics/weather.png" width="200" height="300"/>
<img class="image_gallery" src="http://imgs.xkcd.com/comics/rejection.png" width="200" height="300"/>
</div>
javascript
var data = [
["http://imgs.xkcd.com/comics/protocol.png", "http://imgs.xkcd.com/comics/walmart.png"],
["http://imgs.xkcd.com/comics/theft.png", "http://imgs.xkcd.com/comics/questions_for_god.png"]
];
var image_gallery = d3.select("#image_gallery").on("mousedown", function () { transition();});
var index = 0;
function transition() {
image_gallery.remove();
for (var i = 0; i < data[index].length; i++) {
image_gallery.append("img").attr("class", "image_gallery").attr("src", data[index][i])
.attr("width", 200).attr("height", 300);
}
index++;
d3.select("body").append("h3").text("but they aren't");
}
OK figured it out. image_gallery.remove() needs to be image_gallery.selectAll("img").remove()...

YUI 2.9 TreeView

I am able to render a tree using YAHOO.widget.TreeView yui 2.9.
Using pre made tags
<ul> <li> Products </li> </ul>
I am able to get the label i.e Products using node.label
YAHOO.util.Event.on('allProductSaveButton','click',function() {
var hiLit = rightProductTree.getNodesByProperty('highlightState',1);
if (YAHOO.lang.isNull(hiLit)) {
YAHOO.log("None selected");
} else {
var labels = [];
for (var i = 0; i < hiLit.length; i++) {
var node = hiLit[i];
if(node.children.length<=0) {
labels.push(hiLit[i].label); }
}
alert("Highlighted nodes:\n" + labels.join("\n"), "info", "example");
}
});
I want to insert id of the Products in the html and get the id of label as well. so where should I place id attribute inside or where?
I am not sure you can set your own id on the markup. TreeView is one of the oldest widgets in YUI 2 and it uses a particularly funny markup because the supported CSS styles in those days were quite pathetic, thus, what part of that funny markup are you going to apply that id to?
If what you want is to give a tree-node an identifier that you can later use to retrieve it, then use custom properties. Then, calling getNodesByProperty will allow you to retrieve the node by the value of that extra property.
I got a solution. I inserted the label element inside the span element that was inside the li element i.e
<ul>
<li> <span> <label id="444" > Product </label> </span>
</li>
</ul>
then using YAHOO.util.Dom I traversed and got the id attribute of label element.
YAHOO.util.Event.on('GroupsProductSaveButton', 'click', function() {
var hiLit = rightProductTree2.getNodesByProperty('highlightState', 1);
if (YAHOO.lang.isNull(hiLit)) {
alert("None selected");
} else {
var labels = [];
for (var i = 0; i < hiLit.length; i++) {
var node = hiLit[i];
if(node.children.length<=0) {
labels.push(YAHOO.util.Dom.get(hiLit[i].contentElId).getElementsByTagName('label')[0].getAttribute("value")); }
}
alert("Highlighted nodes:\n" + labels.join("\n"), "info", "example");
ProductGroupDWR.displaySelectedNodes(labels, function(data) {
});
}
});

Resources