So I'm having a weird problem since migrating a Winter CMS website from my development hosting to a client's server in that all of the images have disappeared.
I had been using, for example,
<img src="{{ url('') }}/themes/assets/images/logos/logo.png" alt="Logo" class="img-fluid" />
to display images, which worked fine on my development server. After migration, however, the src attribute of all image tags became src(unknown). I have been told to use
<img src="{{ 'assets/images/logos/logo.png' | theme }}" >
Which also causes src(unknown). However, when testing, if I use
<p>{{ 'assets/images/logos/logo.png' | theme }}</p>
I can see the correct path for the image. Does anyone know why this won't work when used as a src attribute, but works fine in <p> tags?
On the off-chance that anyone experiences the same problem, I found that disabling the Offline.ResponsiveImages plugin solved the issue.
This can't explain why 2 of the 3 environments performed better, but I hope it helps someone one day.
Related
I have a FAQ page i have created with many questions and answers in the form of
<div>
<h4 id="anchor-name">question</h4>
<p>answer</p>
</div>
This works as expected if i have a button or clickable link in the form of
Click here to go to anchor
which takes me directly to my question with that id (expected behaviour)
The problem is when i try to access this from a URL from another tab by doing something like
https://my-app-url/#/FAQ/#anchor-name
it redirects me to my FAQ page but not to my question. Instead, it just loads the FAQ and stays on the top.
Some context:
frontend is in react
the first # in the url https://my-app-url/#/FAQ/#anchor-name is mandatory. Apparently if i just go with https://my-app-url/FAQ/#anchor-name it never loads the page
I have tried enclosing the <div> tags and the <h4> tags by an <a> tag but it didn't work. In those cases what i did was
<div>
<a href="#anchor-name">
<h4 id="anchor-name">question</h4>
<p>answer</p>
</a>
</div>
What i wish to know and cannot seem to find it by doing research a lot is:
Is it possible to access this anchor via URL from an external link by using react-router library?
Could it be that by using react the html way to anchor is not working as expected?
Is my first # in the URL interfering with the anchor linking feature?
You don't need that last / right before the #anchor-tag.
so the URL would be:
https://my-app-url/#/FAQ#anchor-name
For anyone who might be interested, I fixed this issue. The problem was fixed by replacing HashHistory with BrowserHistory. With HashHistory, the URL gets an # that interferes with anchors. By using BrowserHistory, that # is never there so the issue is gone. Hopes this helps.
I'm tryng to use the tag cloud control from Ext.Library 9.0.1 (20160428). The cloud is generated with the correct values form the category view but all the links are missing.
I suspect I'm missing something stupid and my question will look a little bit silly but... I've already lost some hours on this without getting any result.
This is the code for the tagcloud:
<xe:tagCloud id="tagCloud1" sliderVisible="true">
<xe:this.cloudData>
<xe:dominoViewCloudData categoryColumn="0" viewName="indice"LinkTargetPage="/risultati.xsp" linkRequestParam="nometag">
</xe:dominoViewCloudData>
</xe:this.cloudData>
</xe:tagCloud>
This is what I get in a browser (just an example, all the lines look similar):
<li style="display:inline">
<a role="link" title="11 Entries" class="tagCloudSize9">Miscellaneous</a>
</li>
As you can see there is no link to anything, so the user can't click the cloud label.
Any advice will be appreciated
Thanks in advance
It seems it was only a cache-related trouble. I've restarted my server and it started to work as expected.
Just wondering why and how to avoid in the future...
I'm developing an eCommerce platform for one of my customers, I have to implement a retina-responsive logo (vector format, svg), everything is working fine on Firefox, Chrome and IE but not Safari (iOS & OS X), many scratches are appearing, here is a screenshot:
http://i.imgur.com/mpGdXD8.png?1
Regarding the code:
<div class="row">
<div id="header_logo" class="col-xs-12 col-sm-{4+$warehouse_vars.logo_width}{if isset($warehouse_vars.logo_position) && !$warehouse_vars.logo_position} col-sm-push-{4-$warehouse_vars.logo_width/2} centered-logo {/if}">
<a href="{if $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
<img class="logo img-responsive" src="{$img_dir}/logo.svg" data-fallback="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}" />
</a>
</div>
The e-commerce solution is based on Prestashop 1.6.0.14.
The logo was initially built using Photoshop then vectorised with Inkspace.
Many Thanks for your help.
I created for you the Logo, with Inkscape:
http://www.mediafire.com/download/5adsdwl9a3zeidu/Mytech_Logo.svg
Download it and test it, should work.
Usually when you vectorize with inkscape it creates many layers with different colors, this makes the file very large, compare the file size of your logo, and the one that i sent to you, that one have around 10KB, and some times vectorized files could lack in some browsers, caused for all those layers and the background transparency, probably IE9 have this problem too, or some other browsers.
Instead try to create it directly with Inskcape, the vectorize method is not usually the best option, if you want to implement it on the web, as i told you before:
Creates very large files.
Also if you use the option "smooth", It will seem with blured borders.
And if you don't use it the edges will seem rough, of that way it loses the retina concept, at the end there won't be a difference between a .jpg and .svg file.
Hope been helpful!
I am using Kentico 7 as the CMS to create the website. I am searching for a Rolling Banner web part, to put on the home page as the head banner, which can:
Be responsive.
Have caption area.
have navigation button on left and right.
would be nice to have instruction for me to insert to Kentico 7.
Must works in IE8, Firefox and Chrome.
I have tried to use Camera Slider but it does not work in IE8.
Checkout Slick.
It's a pretty easy to implement slider that has good browser support, with good documentation, and can be responsive if you pass it the right arguments.
I typically place the wrapper for my rotators in the HTML Envelope of a repeater, then use build a transformation for my slides, like this:
<!--Envelope before-->
<div class="slick-wrapper">
<!--Transformation-->
<div class="slide">
<img src="{% GetImageMethod() %}">
</div>
<!--Envelope after---->
</div>
However, keep in mind that IE 8 does not support media queries, so you'll want to use a JS feature detection library like Modernizr
I am using your dc js in node js for rendering dc chart via server but i am facing many problems.
First I found all result of the svg in variable, but i want to know how to render chart in web browser.
When i write that SVG tags to file like "index.html" trying to run that file to browser, Chart is displayed but filter is not wroking
How we can use dc.js with node.js in browser?
I have tried many ways to get result, but i am not successed. If you have any tutorial or any guid Please let me know
I have not experimented with using dc.js on the server side with node, but you should be able to write the svg tag into an html document.
For example, if you browse the DOM of a live site like http://dc-js.github.io/dc.js/ in the DOM, using the Elements tab of Chrome's Developer Tools, you'll see something like this:
<div class="row">
<div id="yearly-bubble-chart" class="dc-chart">
<strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss)
<a class="reset" href="javascript:yearlyBubbleChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
<svg width="990" height="250"><g>
...
Note: I don't think you can get the interactive features of dc.js using it this way.