Sry in advance, new here.
I need to generate watermarks on every image with jw_watermarks ext.
With the following code the original image gets involved - everything is fine:
<a title="{file.title}" data-description="{file.description}" href="{jw:watermark(watermarkSrc: '/fileadmin/Watermark.png', watermarkOpacity: '1', watermarkBackgroundColor: 'FFFFFF', watermarkBackgroundOpacity: '0', watermarkOffset: 0, watermarkPositionVertical: 'bottom', src: file.uid, treatIdAsReference: 1, width: settings.media.popup.width, height: settings.media.popup.height)}">
<f:render partial="Media/Rendering/Image" arguments="{file: file, dimensions: dimensions, settings: settings}" />
</a>
But I need to extend the jw_watermarks ext. to all generated images. Tried to work on the media-ViewHelper by extending the srcset, but I am not able to adapt the viewhelper to all generated images.
<f:media
class="img-responsive"
file="{file}"
width="{dimensions.width}"
height="{dimensions.height}"
alt="{file.alternative}"
title="{file.title}"
additionalAttributes="{srcset: '{f:uri.image(image: file, maxWidth: 768)} 768w,
{f:uri.image(image: file, maxWidth: 990)} 990w,
{f:uri.image(image: file, maxWidth: 1200)} 1200w,
{f:uri.image(image: file, maxWidth: 1440)} 1440w,
{f:uri.image(image: file, maxWidth: 1900)} 1900w',
sizes: '(min-width: 1200px) 50vw, 100vw'}"
/>
The docs are saying:
The viewhelper can be used like the f:uri.image ViewHelper.
The following additional arguments can be used to add the watermark:
watermarkSrc
watermarkTreatIdAsReference
watermarkImage
So, it should work by simply replacing {f:uri.image(image: file, maxWidth: 768)} by {jw:watermark(watermarkSrc: '/fileadmin/Watermark.png', watermarkOpacity: '1', watermarkBackgroundColor: 'FFFFFF', watermarkBackgroundOpacity: '0', watermarkOffset: 0, watermarkPositionVertical: 'bottom', image: file, maxWidth: 768)} and so on.
Related
I have this part of code in MUI datagrid Columns definitions:
field: "roles", headerName: t("admin.users.gridColumns.roles"), flex: 1, minWidth: 256,
renderCell: (params) => (
<Box sx={{display:'flex',flexWrap:'wrap'}}>
{params.value.map((role)=><Chip key={role.id} sx={{marginRight: '.5em'}} label={role.name} variant="outlined" color="primary" size="small" />)}
</Box>)
This works great and result in something like this:
The problem is that I cant use filters, sort and the most important quicksearch on that column (for example search for all with admin role)
Is there a way to do that? I Tried something with valueGetter, but nothing works for me.
Planning to use view helpers in my JMVC application. Tried to implement select_tag helper function in my ejs file but failed to obtain required results.
Below is the code
In Controller :
this.choice= [{value: 1, text: 'First Choice'},
{value: 2, text: 'Second Choice'} ];
this.element.html(initView({choice:this.choice}));
In Ejs file :
<%= select_tag('elementId', 1, this.choice) %>
Reference
https://code.google.com/p/embeddedjavascript/wiki/ViewHelpers
Do we need to steal any packages ? is there any sample code ?
To get access to the helpers I did three things...
I updated the first line of file jquerypp/view/helpers/helpers.js from:
steal('jquerypp/view/ejs').then(function($){
to
steal('jquerypp/view/ejs').then(function(){
I stole 'jquerypp/view/helpers' in the controller.
Finally, in the ejs instead of
<%= select_tag('elementId', 1, this.choice) %>
I used
<%== select_tag('elementId', 1, this.choice) %>
to force ejs to render the select block as part of the page instead of rendering an escaped quoted version.
I guess, you have to include this file: https://code.google.com/p/embeddedjavascript/source/browse/trunk/src/view.js
There are all helpers. So steal it :)
I need to place a background image in a Google Chart. I've seen solutions which suggest including the chart in a parent div and setting a background image for the parent div. However, if I do that then the background image will also cover the area outside the chart where the axis labels and legend, etc are displayed. I want my image in the chart area itself only.
Alternatively, is there any way to retrieve the chart options so that I could use chartArea.top, chartArea.left, chartArea.width and chartArea.height to overlay an image on the chart in the correct place?
Many thanks, Chris
You can get information about where your chart is drawn in the following manner:
var graph = new google.visualization.LineChart(...);
graph.draw(data, ...);
var boundingBox = graph.getChartLayoutInterface().getChartAreaBoundingBox();
var pixelsFromLeft = boundingBox.left;
You can then use this information to draw a div on the correct position.
Just to contribute to Sjoerd's answer, the full code can look like this:
In Html, as jaime suggested in this stack overflow question:
<div id='brand_div'>
<div id='chart_div'></div>
</div>
In css, as suggested in the same answer:
#brand_div{
background: url(<SOME-URL>) no-repeat;
}
In javascript, using Sjoerd's suggestion:
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'X', 'Y', 'Temperature'],
['', 80, 167, 120],
['', 79, 136, 130],
['', 78, 184, 50],
['', 72, 278, 230],
['', 81, 200, 210],
['', 72, 170, 100],
['', 68, 477, 80]
]);
var options = {
colorAxis: {colors: ['yellow', 'red']},
width: 450,
height: 300,
title: 'My Daily Activities',
backgroundColor: 'none' // this is important!
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options);
// this two lines are the ones that do the magic
var boundingBox = chart.getChartLayoutInterface().getChartAreaBoundingBox();
$('#brand_div').css('background-position', boundingBox.left + "px " + boundingBox.top + "px").css('background-size', boundingBox.width + "px " + boundingBox.height + "px");
}
All this code was also written using the example in google chart's documentation and my answer to this stack overflow question
I am trying to put on SVG the special character ( 2 ) ( --> ² ) with no result. Is there a way to put unicode characters on SVG ?
Here is an example code using highcharts 2.1.6
<div id="container" style="height: 300px"></div>
$(function() {
var renderer = new Highcharts.Renderer(
$('#container')[0],
400,
300);
renderer.text(100, 100, 100, 100, 5).attr({
'stroke-width': 2,
zIndex: 3,
rotation: 170,
text: 'sdfsdf²'
}).add();
});
Thanks a lot.
I am using a fancy box iframe to create an overlay to display the contents of another page. I have a webhierarchicaldatagrid and on clicking a template column link the overlay is created. It seems to be working only for the first row of the grid and for all the other rows it is just opening the page without any overlay.Is there anything which I am missing in the code. Below is the code I am using:
<ig:TemplateDataField Key="Sipoc" Width ="06%">
<ItemTemplate>
<a class="iframe" id="ifrm" href="<%# String.Format("Sipoc.aspx?proj_id={0}&func_id={1}&subfunc={2}&jurisdiction_id={3}&proj_name={4}&owner_id={5}", Eval("Proj_Type_ID"), Eval("Function_Name"), Eval("Sub_Function_Name"), Eval("Jurisdiction_Name"),Eval("Proj_Type_Name"),Eval("Proj_Type_Owner_ID")) %>">
<asp:Image ID="Image1" ImageUrl='<%# Convert.ToString(Eval("Sipoc")) == "True"? "Sipoc.jpg": " " %>' runat="server" Visible='<%# Convert.ToString(Eval("Sipoc")) == "True"? true: false %>' ></asp:Image>
</a>
</ItemTemplate><header Text="Sipoc" />
</ig:TemplateDataField>
$(document).ready(function () {
$("#ifrm").fancybox({
'width': '100%',
'height': '100%',
"padding": 0,
"overlayShow": true,
"overlayOpacity": 0.5,
"zoomSpeedIn": 500, // has nothing to do with AJAX-ZOOM
"zoomSpeedOut": 500, // has nothing to do with AJAX-ZOOM
"hideOnContentClick": false, // important
"centerOnScroll": false,
"imageScale": true,
"easingIn": "swing",
"easingOut": "swing"
});
});