im using themes in an app im doing, and need a global css/img/js folder
i have tried using app/webroot as this folder, but cant get any css from a theme to show the images.
I have a setup like :: /app/views/themed/my_theme/webroot/css/file.css
With some css that looks like:
...
body{
background-image: url('../img/file.jpg');
}
...
if i have the image in /app/views/themed/my_theme/webroot/img/file.jpg everything works 100% but when i put the image in /app/webroot/img/file.jpg it will not show. i have tried all sorts of combinations for the
i have also tried using a plugin dir like app/plugins/my_plugin/webroot/img/file.jpg but the various paths ive tried will not show the image either.
any ideas how i can get the image to show? i dont mind if its for webroot/ or in plugins/xyz/, just as long as i can use the same image in many different themes with out having to duplicate the images
when the image is in /webroot/img i can use the full path like url(http://locahost/my_app/img/file.jpg) and it works.
things that dont work
url("img/file.jpg")
url("/img/file.jpg")
url("../img/file.jpg")
url("/../img/file.jpg")
url("../../img/file.jpg")
thanks.
In your CSS file
body{
background-image: url('/img/file.jpg');
}
This will use the root area to find the image in /app/webroot/img/file.jpg
CSS has urls for images relative to the path it is placed in.
CSS files from my_theme are linked like site.com/theme/my_theme/css/style.css in the browser. So if you want to use an image from app/webroot/img in your theme's CSS, use url(../../../img/image.png)
I have not tried that but the cookbook says:
If you want to keep your theme assets
inside app/webroot it is recommended
that you rename app/webroot/themed to
app/webroot/theme.
Related
I have my images folder under public folder. I use it in jsx like this:
<img src="/images/twitter.png" alt="twitter" />
This works.
But I have a problem in CSS's url.
background-image: url(/images/twitter.png); // compiler can't resolve this file.
The above doesn't work now. How do I make this work? I am not using webpack and don't want to use it for now.
Where is your css file located?
Is it in the same folder since you are writing the route identical to your code?
Answer: Check the route of your img.png relative to your css file. It can be the only problem.
I need to remove the part of image, css and js urls so that I would keep everything that goes after "."
For example,
https://test.com/en/images/footer-inst-icon.svg
I would like to have only "svg" in another column
Here is the link to the file https://docs.google.com/spreadsheets/d/1VJPQzkgZCTaKCgRbstVFDCwycZFfCbSL1ENXPYcioNo/edit#gid=0
Try below formula (see your sheet)-
=ArrayFormula(TRIM(RIGHT(SUBSTITUTE(A2:A,".",REPT(" ",100)),100)))
You can also use REGEXEXTRACT() like
=ArrayFormula(REGEXEXTRACT(A2:A,"\w+$"))
I am using Lokesh Dhakar's Lightbox on my page. I renamed the css and js folders to be _css and _js on my server and all works except I also renamed the "img" folder to be "_img", and the image icons (close, loading, prev and next) don't work. Are you not able to have this folder be named something other than "image" or "img"? Thanks.
I did exactly that, changed the name. Just make sure in CSS and JS and you have the correct links to the new folder.
I'm using Contentful for storing content for articles and React markdown for parsing and it works very well. But i don't know what what exat to do when it comes to alignment of images like two images side by side.
Is there there a way to see in the markdown how many images are renderad? Then i could do alignment based on how many images there is in the markdown
You could style images using the next-sibling selector.
Perhaps something like this:
img + img { /* styles for any image directly after another image */ }
You can insert some HTML (which is not the ideal solution) in the markdown like <img='img' class='align-left' /> you can also have a separate field of type asset list and you get these image separately and add them to your HTML
#font-face seems quote straightforward to setup in my CSS, and yet, my defined font is not being used. This is in a CakePHP 2.2 webapp, and despite trying all sorts of CSS URL path combinations, external CSS -v- inline CSS and single quotes/no quotes/double quotes in the CSS; nothing's working.
Here's the CSS:
<style>
#font-face {
font-family:TerminatorTwo;
src: url(../files/TerminatorTwo.ttf) format('truetype');
}
div {font-family: TerminatorTwo}
</style>
My app has the default CakePHP folder structure, so the CSS is in app/webroot/css and the font (just the .ttf) is in app/webroot/files
Instead of the div part in the CSS, I've tried inline style definition on a specific div. Didn't work. the code as seen doesn't work, and it doesn't work wherever I try adding quotes in the CSS, as I've seen in other examples elsewhere. All this has been trie din the latest versions of IE8 (yes, 8, yuck), Firefox and Chrome. Oh, and Chrome for Android.
I've messesd around with the path too, but to no avail.
Utterly frustrated. It's inherently so simple!
The font file is probably not loaded due to an invalid path. It's better to use the HtmlHelper for in these cases, as relative paths are bound to get messed up in a Cake install. Use the url() method to point to the files directory.
#font-face {
font-family:TerminatorTwo;
src: url(<?php echo $this->Html->url('/files/TerminatorTwo.ttf'); ?>) format('truetype');
}
Cake will make sure the URL points to the files directory in /app/webroot at all times.
Alternatively you could ditch the inline CSS and use an external stylesheet to avoid the issue with correct paths in Cake. In that case, if the CSS file is in the app/webroot/css directory, you could use the ../files/TerminatorTwo.ttf notation.