I recently begin to use cdn to speed up images. The origin img src is something like /images/effect.png , I want to add a prefix to all article content image src.
div.entry-content p > img {
content:attr(src,'http://cdn.example.com'+src)
}
I know that the best solution is to change all articles. Another solution is to use javascript to do it(but it seems still to download origin img).
I just want to use pure css.
(update 1)
I'm using jekyll as backend. Because I use markdownpad to write articles, it can only preview img with  , so I donnot want to use {% img url %}.
Can anyone help me add img src a prefix?
CSS absolutely can't do this. Maybe <base> would do it, but that would affect your intrasite links and JS/CSS URLs as well.
You have to change them all manually. Sorry. Hope you've got a template engine on your backend.
Related
Each time I try to add an image to visual studio code I keep having to inspect and get the entire image source code.
I would like to just use /images/down-chevron.png.
Any help?
Thanks!
Example of my code:
<img src="file:///C:/Users/tashe/Downloads/CODING%20CAGES/Cleant%20Dental%20services/images/up-chevron.png" id="upArrow" onclick="upArrow()">
<img src="file:///C:/Users/tashe/Downloads/CODING%20CAGES/Cleant%20Dental%20services/images/down-chevron.png" id="downArrow" onclick="downArrow(
</div>
You're almost there. Just replace the "file:///C:/Users/tashe/Downloads/CODING%20CAGES/Cleant%20Dental%20services" with a dot from the src attribute and you'll be good to go.
<img src="./images/down-chevron.png" >
In VS Code, depending on your autocomplete settings, each time you write src, should give you options for autocomplete including the images folder.
You could store the images you'd like to use in a folder called img inside of the folder where your HTML and css live. Then for the img tag in the HTML you could use something like
<img src="./img/down-chevron.png">
The ./ lets you navigate through the working tree. Using ../ would go back two directories if needed.
when I create the pdf of my page with DOMPDF, I would like to exclude something not really important or needed into the pdf file, for example the links.
Is there a way to ignore the tags?
thanks!
You can use a sanitizer like DOMPurify and configure it to disallow a tags.
// leave all safe HTML as it is and add <a> elements to block-list
var clean = DOMPurify.sanitize(dirty, {FORBID_TAGS: ['a']});
You can make them disappear by using css properties
a { display:none; }
...
When I save content through django-tinymce it adds its own inline styles. However I'd like to remove this behaviour and just save the content in plain html. Can you please help me on this issue?
You can use any of tinyMCE configs like this:
Put this to your Django settings.py
(this will tell tinyMCE which elements are allowed`)
DJANGO settings.py
TINYMCE_DEFAULT_CONFIG = {
'theme': "advanced",
'valid_elements' : 'a[href|target=_blank],strong/b,div[align],br,p'
}
And push Clean Button in TinyMCE.
All TinyMCE configs is here:
Try also look at invalid_elements and invalid_styles
P.S. It would have more sense to set:
'invalid_elements': 'p[styles], span'
to remove all styles But It didn't work.
Hope it helps.
You could try writing your own implementation of a save function using
getContent({format: 'text'})
I'm no Djanjo expert but it sounds like the problem is being caused by them, and not TinyMCE itself.
My problem is i wanna have some comment or disable some text inside value of href attribute of anchor tag.
I mean look like this:
Jquery.com
And when i click url redirect to stackoverflow.com and behave with domain.com like a comment or don't have any effect to link. Value in square bracket just like a comment inside url :[domain.com]
Can i do this without using jquery or javascript just like // or /**/ for normal comment inside code.
Please help me and thanks for reading.
Comments in HTML are this way :
<!-- [domain.com] -->
but that won't work in your case.
Why do you need to leave the [domain.com] if you want it to be effectless ?
Anyway, you could do something like that :
Jquery.com
and JS:
$('a.linkWithComment').click(function(e) {
$(this).attr('href', $(this).attr('href').replace(/\[(.*)\]/g,''));
});
Here's a JSFiddle for it : http://jsfiddle.net/kJDUB/
BUT be aware that this is absolutely not a recommended behaviour: SEO is probably broken, and there a many solutions to achieve same behaviour while being cleaner (like HTML5 tags : Jquery.com
and you can still reach the domain.com ...)
Consider this CSS Property:
background: url(http://images.something.com/background.png) left top repeat-x;
Is there a way to dynamically specify the URL being used in the external file (Meaning the URL is sort of automatically generated rather than hard-coded in the CSS file) ?
Thanks.
Dynamic CSS Background URLs
There is another cool trick.
You could add a
.php
to the file's name so it will be Hypertext Preprocessed next time, someone calls it.
Now you can easily do (in your CSS file):
<?php $num = rand(1, 3); ?>
background: url(http://images.something.com/background<?php echo $num; ?>.png) left top repeat-x;
This will switch randomly the background-image between
background1.png, background2.png and background3.png
P.S. Dont forget to update your <link> to your css.php file.
background: url(http://images.something.com/getimage.html?image=random) left top repeat-x;
And in the getimage.html, check if request[image] == "random". Using whatever server-side language you desire, respond with an arbitrarily or randomly selected image.
Yes.
You can call a server-side page, and based on variables, it can put in different CSS there.
If you just mean with html/css -- there is very little you can do dynamically.
You can also set background images using Javascript (there are a large quantity of possibilities), but HTML and CSS are, by nature, static languages.