I'm trying to put an image into the variables.scss so I can call them relatively easier than writing the whole path down. The goal is that I can call --companyname-logo into a (html element preferred) or in css and that my image from /assets/icon/logo.png gets called and shown.
variables.scss
$assetPath: "/assets/";
:root{
--company-logo: url(#{$assetPath}icon/logo.png);
}
I also tried to put the $assetPath variable into the :root brackets but changed nothing for me.
html (I'll list up on each line what I tried)
<ion-img src="--company-logo"> </ion-img>
<ion-img [src*="#{--company-logo}"]> </ion-img>
<ion-img [src]=--company-logo></ion-img>
<ion-img [src]="--company-logo"></ion-img>
Any sugesstions?
Related
I am having an issue when using <#nested in FreeMarker
If I do:
<div style="background: white;">
<#nested "header">
<#nested "info">
<#nested "form">
</div>
<div>NOT WHITE</div>
Even the div with NOT WHITE text has a white background. The div itself also gets nested inside the previous div for some reason. Can someone help me here?
Probably your actual nested content (which you don't show in your question) has an unclosed div. Thus the </div> you have after <#nested "from"> closes that unclosed div, and so the div that sets the white background stays open.
Am having a AEM6 html component, am getting the values from dialog and using it inside the component via the .js file and using the return properties.
I could able to get the authored values but it is getting null or empty when am using it inside the onclick method. Please find below the code snippet below.
<div data-sly-unwrap data-sly-use.test="test.js"></div>
<a href="#" class="${test.testId}" id="${test.testId}" onClick="toggleDraw('${test.testId}')" >
The content I authored is getting displayed in class and Id, but it is not displaying in the onClick method.
Below is the Output am getting after authoring.
<a href="#" class="get-a-quote" id="get-a-quote" onClick="toggleDraw('')" >
Output I needed is :
<a href="#" class="get-a-quote" id="get-a-quote" onClick="toggleDraw('get-a-quote')" >
This should do the trick:
<a data-sly-test.variable123="toggleDraw('${test.testId}')" href="#" class="${test.testId}" id="${test.testId}" onclick="${variable123 # context='attribute'}" >
You need to put the function call in a variable because of the nested single quotes. And you need to manually set the context in this case. If "attribute" does some escaping you do not like, you could use "unsafe" - this will end in all escaping mechanisms being disabled. That might or might not be a security issue for your application.
HTH
I'm using tne sling component /libs/wcm/foundation/components/image.
I need to use the rendering image as css background.
<img src="${image.src} /> -> OK: works
<div style="background-image: url('${image.src}')">my text</div> -> KO: does not work.
The result is <div style="background-image: url('')">my text</div>
I tried it on Chrome, FF and IE.
Can anyone help me solve this problem ?
Thanks
Sightly automatically escapes the values to prevent Cross Site Scripting issues, when do display context is specified. For CSS Strings, use the display context styleString so that it encodes characters that would break out of the string.
<div style="background-image: url('${image.src # context='styleString'}')">my text</div>
For more information on display context, refer to Sightly docs
Please try this:
style="background-image:url('${image.src # context='unsafe'}')"
In my application, I have to fix all the closing tags of the <img> tag as shown below. Instead of closing the <img> with a >, it should close with />.
Is there any easy way to search for all the <img> in this text and fix the > ?
(If it is closed with a /> already then there is no action required).
Other question, if there is no "width" or "height" to the <img> specified, what is the best way to solve the issue?
Download all the images and get the corresponding attributes of width and height, then add them back to the string?
The correct <img> tag is the one that closes with /> and have the valid width & height.
<img align="left" hspace="5" width="150" src="http://s3.dlnws.com/images/products/images/749000/749208-large" alt="" title="">
Apple today unleashed a number of goodies, including giving iMacs and Mac Pros more oomph with new processors and increased storage options. We have those deals today, along with many more items for the Mac lover. Along with the refreshed line of iMacs and Mac Pros, we’ll also look at a number of software deals [...]
<p><img src="http://feedads.g.doubleclick.net/~a/DL_-gOGSR1JMzKDbErt1EG3re3I/0/di" border="0" ismap><br>
<img src="http://feedads.g.doubleclick.net/~a/DL_-gOGSR1JMzKDbErt1EG3re3I/1/di" border="0" ismap></p><img src="http://feeds.feedburner.com/~r/cultofmac/bFow/~4/Mq5iLOaT50k" height="1" width="1">
Regular expressions will solve the problem with closing your tags correctly - make sure whatever you're using to edit your code supports regular expression searching, and then search for something like this (assuming that all of your unclosed image tags end with a ">):
\<img (.*?)"\>
and replace it with this:
<img $1" />
As far as the bit about the width and height attributes, if you're trying to display the images at their regular width and height, you shouldn't need them. The only time you should need width and height is if you're displaying the image at a different size than the original image's size, which doesn't appear to be the case here.
Wordpress wraps images with captions in a div with a class of .wp-caption.
I'm looking for a way to select images that don't have this div so I can wrap them in different div. (to keep a consistent border around all the images)
<div class="blog-post-content">
<div id="attachment_220" class="wp-caption alignleft" style="width: 310px">
<img class="size-medium wp-image-220" src="/path/to/image" alt="" width="300" height="280" />
<p class="wp-caption-text">Caption Text</p>
</div>
<p>This is the body of the post</p>
</div>
To test my selector, I'm just trying to add a green border. I can handle the .wrap() once the selector is working.
The most promising of my attempts is:
$('.blog-post-content img').parent('div:not(".wp-caption")').css('border', '2px solid green');
... but no luck.
How about this: (untested)
$('.blog-post-content img').filter(function(){
return !$(this).parents('div').hasClass('wp-caption');
}).css('border', '2px solid green');
try:
$('.blog-post-content img').parent(':not("div.wp-caption")')
Not if what Matti says abotu the a element in the hierarchy then the above wont work.
I know this question was asked a long time ago, but I would like to suggest the following:
$('.blog-post-content img').closest('div:not(".wp-caption")')
Untested, but I think that should work, and is shorter than the answer above that works. Using closest means the a is ignored.