When I use the bin/watch-storefront.sh my custom font does not load properly.
My fonts are defined like the default font in a own file like
/* /MyTheme/src/Ressources/app/storefront/src/scss/vendor/_outfit-fontface.scss */
...
#font-face {
font-family: 'Outfit';
src: url('#{$app-css-relative-asset-path}/font/Outfit/Outfit-SemiBold.woff2') format('woff2'),
url('#{$app-css-relative-asset-path}/font/Outfit/Outfit-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
...
When I run bin/console theme:compile && bin/console assets:install The fonts get loaded just fine on the regular website.
The URL of the font files is like https://my-site.de/theme/f9cf8c2bbd24d1ca2941b5120cde3278/assets/font/Outfit/Outfit-Regular.woff2
But when I run the hot-proxy via bin/watch-storefront the compiled CSS font path is like http://my-site.de:9998/bundles/storefront/assets/font/Outfit/Outfit-Bold.woff2
I looked into the directories and my fonts are not located in storefront/assets but in mythemeplugin/assets
The wrong path seems to be exported to /var/theme-entry.scss where it already sets the $app-css-relative-asset-path to
$app-css-relative-asset-path: '/bundles/storefront/assets'; $sw-asset-public-url: '';
I tried to replace the variable $app-css-relative-asset-path with a hard-coded ../assets/ in my *-fontface.scss but this will cause a compile error in the hot-proxy.
What can I do to make the fonts load properly in the hot-proxy and the normal site?
See this issue on GitHub with a possible workaround.
Adding to the description, you'll have to change the type of your style property in theme.json to an object:
{
// ..
"style": {
"app/storefront/src/scss/overrides.scss": [],
"#Storefront": [],
"app/storefront/src/scss/base.scss": {
"resolve": {
"my-theme-env": "app/storefront/env/default"
}
}
},
// ...
}
I have the IIPImage server running and I am trying to display a deepzoom image but fail
This is how I am doing it :
var tileSource =
{
Image:
{
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "http://127.0.0.1/fcgi-bin/iipsrv.fcgi?
DeepZoom=E:/DeepZoomFile/10580_12079_1121935_stitch_files/",
Format: "jpg",
Overlap: "2",
TileSize: "256",
Size:
{
Height: "38290",
Width: "17953"
}
}
};
And the important line is :
Url: "http://127.0.0.1/fcgi-bin/iipsrv.fcgi?DeepZoom=E:/DeepZoomFile/10580_12079_1121935_stitch_files/"
I am getting errors from the browser that "fail to load tile image"
Any help or example of how should I do it ?
Thanks
No . It doesn't work with a suffix of DZI
I've just installed Grunt and grunt-svgstore and am using it to compile my folder of SVG's into one application.svg where each icon has a unique id that I can reference using:
It works fine for some icons, but for others, part of their shapes turn black. In the case of the ruby logo I am linking to above, it shows like: http://cl.ly/image/0X2J0f3i0C1X/Screen%20Shot%202014-08-03%20at%2011.02.47.png
The actually SVG file can be found here: http://cl.ly/2k012T020d2S/ruby-logo.svg
If I open the ruby-logo.svg file in illustrator, it looks fine. I have rexported it, ensured all settings are correct and it still happens.
Any suggestions?
Thanks,
Neil
Solved by adding the following styles to the application.svg import at the top of my document:
width: 0;
height: 0;
visibility: hidden;
Use the "style" option instead..
eg:
svgstore: {
options: {
prefix : 'icon-', // This will prefix each ID
svg: {
viewBox : '0 0 100 100',
xmlns: 'http://www.w3.org/2000/svg',
style: 'display:none;' // This line might help you!
},
cleanup: ['fill','stroke']
},
default: {
files: {
'<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.svg': '<%= app_files.svgIcons %>'
}
}
},
I'm not able to compile the "main" bootstrap.less into '<%= pkg.name %>.css'. I'm getting this error running grunt less:
Running "less:dist" (less) task
>> ParseError: Syntax Error on line 643 in bower_components\bootstrap\less\mixins.less:643:25
>> padding-right: (#grid-gutter-width / 2);
>> &:extend(.clearfix all);
>> }
Warning: Error compiling LESS. Use --force to continue.
Aborted due to warnings.
My configuration for less task is fairly simple:
less: {
options: {
strictMath: true
},
dist: {
files: {
'dist/assets/css/<%= pkg.name %>.css': [
'<%= bootstrap_less %>/bootstrap.less',
'src/assets/less/style.less'
]
}
}
},
// Arbitrary properties used in task configuration templates.
bower_components: 'bower_components',
bootstrap_less: '<%= bower_components %>/bootstrap/less'
Error line in mixins.less (not modified by me in any way):
// Centered container element
.container-fixed() {
margin-right: auto;
margin-left: auto;
padding-left: (#grid-gutter-width / 2);
padding-right: (#grid-gutter-width / 2);
&:extend(.clearfix all);
}
Please also not I'm new to Grunt and maybe I'm missing something.
Perhaps your version of less is outdated? :extend() is a new-ish feature of Less.
We're already creating dynamic HighCharts for our webpages--these have a few javascript dependencies and a chart-generation script. We'd like to start creating PDFs of these charts using the new HighCharts/Node/PhantomJS suite HighCharts has rigged up (see press release). Our image-gen node server would run on a separate box/vm. How can we do this without having to maintain two separate codebases for the same chart? I'm not too familiar with Node yet, so I'm not sure how requesting the scripts with a web request would work. I'm guessing a lot of HighCharts users that want to start generating some of their charts as images server-side will run into a similar issue with managing two related codesets...
In essence, we already have have this:
Webserver -> JSON (data) + foo.js + bar.js + foo.html -> webpage with dynamic charts.
We'd like to build:
Web-server -> JSON (data) + separate Node Server + foo.js + bar.js -> images available via web request
Obviously some redundancy. How can we manage the dependencies?
While node is awesome, I felt that approach was needlessly complex, with having to many moving parts that could break. So I did the super simple solution of creating files dynamically. The only problem i faced was deleting the temporary file after adding it to the pdf. It would break the PDF from rendering. And setting the directory to /tmp, crashed phantomjs. The best idea i came up with currently is putting the tempory generated files, in a temp directory, then deleting everything in that directory every night, with a cronjob.
I post this out of code simplicity. It should be in a function, to maintain code re-usability.
<?php
$TmpInFileName = 'tmp/graph_'.md5($CurrentDate.rand(666,9482845713)).'.js';
$TmpGraphFileName = 'tmp/pnggraph_'.md5($CurrentDate.rand(2666,54713)).'.png';
$Data = "
{
chart: {
zoomType: 'xy',
width: 700,
height: 520
},
credits: {
enabled: false
},
colors: [
'#2f7ed8',
'#910000',
'#8bbc21',
'#1aadce',
'#492970',
'#f28f43',
'#77a1e5',
'#c42525',
'#a6c96a'
],
title: {
text: 'Sample Graph - created at ".date('m/d/Y g:i:s a')."',
style: {
fontSize: '16px',
}
},
xAxis: [{
categories: ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30']
}],
yAxis: [{
labels: {
format: '{value}',
style: {
fontSize: '14px',
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Y axis',
style: {
fontSize: '16px',
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Sec Yaxis',
style: {
fontSize: '16px',
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value}',
style: {
fontSize: '14px',
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'first',
type: 'spline',
yAxis: 1,
data: [0, -119.9502311075212, -119.96203992145706, -119.98172620218355, -119.71898290168028, -119.97023935590325, -119.95230287195413]
},
{
name: 'second',
type: 'spline',
yAxis: 1,
data: [0, -119.24222667756482, -119.60905809195222, -119.63522965403729, -119.11011466187935, -119.63643171374981, -119.54969080301575]
},{
name: 'third',
type: 'column',
data: [10, 11, 9, 7, 5, 2, 7]
},{
name: 'fourth',
type: 'column',
data: [0, -0.7080044299563895, -0.35298182950484147, -0.34649654814626274, -0.6088682398009269, -0.33380764215343106, -0.40261206893838164]
}]
}";
try {
$myfile = fopen($TmpInFileName, "w") or die("Unable to open file!");
fwrite($myfile, $Data);
fclose($myfile);
} catch (Exception $e) {
echo 'Error: '.$e.' <br />';
}
$URL_Command = "phantomjs /highcharts/exporting-server/phantomjs/highcharts-convert.js -infile $TmpInFileName -outfile $TmpGraphFileName -width 600";
exec($URL_Command);
echo '<img src="'.$TmpGraphFileName.'" alt="Could not load img: '.$TmpGraphFileName.'">';
?>
I hope this helps. I couldn't find a good solution that didn't involve Node.JS or Java to do this. I wanted a pure PHP solution.
We decided to pass the entire highcharts config object (e.g. Highcharts.chart(configObj)) to the node server as a URL-encoded string. We had to put a few rendering functions over on the node server, but it wasn't too bad. We also stuck some of the rendering functions in the string config object. Not the most beautiful result, but it worked.