I defined with typoscript the baseURL with the following code:
page.config.baseURL = http://www.website.nl/
Now I want to use the baseURL in the html template for a reference to a image. How can I add this url to the template? Tried the following but is not working.
<img src="{baseURL}images/sicma.png" width="70" height="28" alt="sicma">
Put it into a constant first:
baseURL = http://www.website.nl/
then use it in setup
page.config.baseURL = {$baseURL}
temp.logo = TEXT
temp.logo.value = <img src="{$baseURL}images/sicma.png" width="70" height="28" alt="sicma">
Of course, you have to assign temp.logo to the template.
But isn't baseURL precisely there so you don't have to write absolute paths?
Related
I'm implementing a fancybox into my project and I'm writing a script to automatically wrap an anchor around the images with the url to the image and a "data-fancybox" attribute to let the fancybox script do its thing. However, I'm only getting the url to the very first image, since they all share the same class. There is a dynamic figure id that seems to be the one to get.
My question is - how do I use this figure id to fetch the appropriate img src?
The html is like this:
<figure id="XXXXXXX">
<div>
<img src="image.jpg" />
</div>
</figure>
... other stuff ...
<figure id="YYYYYYY">
<div>
<img src="image2.jpg" alt="">
</div>
</figure>
My code right now is as follows (which works, but only returns the first image url):
$(document).ready(function() {
var src = $("figure img").attr("src");
var a = $("<a/>").attr( { href:src , "data-fancybox":"" } );
$("figure img").wrap(a);
});
I know I can use
var id = $("figure").attr("id");
to get the id I need, but I'm pretty new to coding so I'm not sure how I implement this and use it to get the correct url. Any help is appreciated!
If your goal is to make your images clickable, then you can do smth like this:
$('figure img').each(function() {
$(this).parent().css({cursor: 'pointer'}).attr('data-fancybox', 'gallery').attr('data-src', this.src);
});
DEMO - https://jsfiddle.net/1jznsL7x/
Tip: There is no need to create anchor elements, you can add data-fancybox and data-src attributes to any element and it will work automagically.
i have a chart like below
<canvas
height="100"
width="100"
baseChart
[chartType]="'bar'"
[datasets]="chartData"
[colors]="colors"
[labels]="chartLabels"
[options]="chartOptions"
[legend]="true"
(chartClick)="onChartClick($event)">
</canvas>
and has handle to it like
#ViewChild(BaseChartDirective)
public chart: BaseChartDirective;
This all works fine. except now i need to add a new chart on the same html page but i do not know how to create another handle to the another chart canvas. BaseChartDirective seems to be generic. how is it connecting to the canvas ?
You can use ViewChildren like this:
#ViewChildren(BaseChartDirective) charts: QueryList<BaseChartDirective>;
and then access the first and second chart like this:
public myMethod(): void {
// First canvas
const firstCanvas = this.charts.toArray()[0];
// Second canvas
const secondCanvas = this.charts.toArray()[1];
}
Please notice that
#ViewChildren(BaseChartDirective) charts: QueryList<BaseChartDirective>;
is exactly the same as
#ViewChildren(BaseChartDirective)
public charts: QueryList<BaseChartDirective>;
I want to implement responsive image rendering according to the different scale (media) in TYPO3 using sourceCollection?
<picture>
<source src="fileadmin/_processed_/imagefilenamename_595cc36c48.png"
media="(max-device-width: 600px)" />
<source src="fileadmin/_processed_/imagefilenamename_42fb68d642.png"
media="(max-device-width: 600px) AND (min-resolution: 192dpi)" />
<img src="fileadmin/_processed_/imagefilenamename_595cc36c48.png" alt="" />
</picture>
I can render it using TypoScript but how can i use this in my own extension?
Thanks in advance.
The most straight-forward way is to use TypoScript. In the example below we use the same configuration I use for tt_content to render News items.
First of all you need to define a TypoScript object that uses the file that is passed to the object. Then you copy the configuration that is used for tt_content.
lib.responsiveImage {
default = IMAGE
default {
file.import.current = 1
altText.data = field:altText
titleText.data = field:titleText
layoutKey = picturefill
layout.picturefill < tt_content.image.20.1.layout.picturefill
sourceCollection < tt_content.image.20.1.sourceCollection
}
}
(You may need to change the example to another layout if you don't want to use picturefill.)
Then, in Fluid, you pass the image to TypoScript. The example below maps the uri of a FileReference:
<f:alias map="{image: {uri: '{f:uri.image(src:\'{mediaElement.uid}\', treatIdAsReference:\'1\')}', altText: mediaElement.originalResource.alternative, titleText: mediaElement.originalResource.title}}">
<f:cObject typoscriptObjectPath="lib.responsiveImage.default" data="{image}" currentValueKey="uri" />
</f:alias>
You can also define other configuration, e.g.
lib.responsiveImage {
default = IMAGE
default {
[...]
}
newsDetail < .default
newsDetail {
[different configuration for type newsDetail]
}
}
I need to add Facebook tracking code to a specific page in Drupal 7. I was wondering if there was a way to add the code to the html.tpl.php file where there is some code that calls for it to be added to a specific page.
I tried adding the code to a block which would live on the page, but the code is being stripped out (disable rich text, add code and save)
This is the code I am trying to add
<!-- Facebook Conversion Code for Ecuador landing page leads -->
<script>(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', '6026961635755', {'value':'0.00','currency':'USD'}]);
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6026961635755&cd[value]=0.00&cd[currency]=USD&noscript=1" /></noscript>
After I save it this is what I am getting
<!-- Facebook Conversion Code for Ecuador landing page leads --><noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=6026961635755&cd[value]=0.00&cd[currency]=USD&noscript=1" /></noscript>
Facebook Tracking Pixel module provides an easy to use interface that enables you to include the conversion code to the page(s) you select.
It applies the 'new' Facebook pixel code, the one that Facebook recommends using.
Drupal project page:
https://www.drupal.org/project/facebook_tracking_pixel
When you create a static block for text format (drop-down bellow body field) select "plain text" so drupal shouldn't filter out some tags. Under visibility settings you can specify on what pages this block should be shown. For more powerful mechanism for specifying on what page to display the block look for "context" module.
I have a construction:
<div id="div">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
<image x="2cm" y="2cm" width="5cm" height="5cm" id="img" xlink:href="pic.jpg"></image>
</svg>
</div>
I want to get pic.jpg url and I need to begin from the most outer div, not exactly from the source <image> element:
var div = document.getElementById("div");
var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];
var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0];
var url = img.getAttribute('xlink:href'); // Please pay attention I do not use getAttributeNS(), just usual getAttribute()
alert(url); // pic.jpg, works fine
My question is what is the right way to get such kind of attributes from element like SVG and its children?
Because before I tried to do this way and it also worked fine in Chrome (I didn't try other browsers):
var svg = div.getElementsByTagName('svg')[0]; // I do not use NS
var img = svg.getElementsByTagName('image')[0];
var url = img.getAttribute('xlink:href'); // and do not use getAttributeNS() here too
alert(url); // pic.jpg, works fine
But when I tried to use getAttributeNS() I got blank result:
var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];
var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0];
// Please pay attention I do use getAttributeNS()
var url = img.getAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href');
alert(url); // but I got black result, empty alert window
The correct usage is getAttributeNS('http://www.w3.org/1999/xlink', 'href');