I am using Symfony2 with twig to generate HTML, however the HTML I am generating is not intended for a web browser, instead it will be passed to a library that converts HTML to a PDF document.
There are two related issues I am facing.
Issue 1. This PDF will have images included, I don't want these images to be visible directly from the internet (e.g. I don’t want these images to appear under webroot). Usually I put assets in “site/src/path-to-bundle/Resources/public/assets” however, I don't want this image to be visible on the web. Can anyone suggest a good folder to put “assets” in that are not meant to be accessible via the web. (Just trying to be consistent with Symfony2 naming techniques and how other programmers would usually do this)
Issue 2. Since the HTML I am generating is intended for the HTML to PDF generator, it is most practical to refer to images with absolute paths on the file system (web paths or URLs are not suitable in this situation).
For example
<!-- This is the correct HTML code that is needed in this situation -->
<img src="/home/user/absoulte-file-system-path-to/image.png" />
<!-- These are actually incorrect in this situation -->
<img src="assets/image.png" />
<img src="http://www.somedomain.com/assets/image.png" />
I would like to know how to get the absolute path to the image mentioned above (I don’t mind if this is done in the Twig template or in the controller)
in you app/config/config.yml
twig:
globals:
root_path: %kernel.root_dir%
and you can refer to asset with relative path to your root project
<img src="{{ root_path }}/../secret-folder/image.png" />
Related
I have folder structure of /src/app/some-module/some-component and src/public/images/user.png. Now, when I am wiling to show an image in my some-component I have to give the path as ../../../public/images/user.png which seems to be too naive and wasteful effort once the number of images increase.
Do we have a routing mechanism or relative path in place in angular2 to serve static files. I am using the Angular2 with webpack.
It depends on how your base href looks like.
For e.g if you have
<base href="/src/">
you may easily use below irrespective of where your component template is.
<img src="public/images/user.png" />
Hope this helps!!
If you use WebPack, it takes care of the paths during the build.
The <img src="..."> needs to point to the physical location of the file within the project, relative to the template where it is used.
For instance, in my case, without WebPack, it would be
<img src="img/rhamt-square-248.png" width="172">
since the img/ is directly under the app root.
Whereas with WebPack, this works:
<img src="../../../img/rhamt-square-248.png" width="172">
Otherwise you'd get a compilation error such like:
ERROR in ./src/app/misc/about.component.html
Module not found: Error: Can't resolve './img/rhamt-square-248.png' in '/home/ondra/work/Migration/windup-web/ui/src/main/webapp/src/app/misc'
# ./src/app/misc/about.component.html 1:402-439
# ./src/app/misc/about.component.ts
# ./src/app/app.module.ts
# ./src/main.ts
I creating new website using Umbraco(version 6.1.1 with razor) and I am new to Umbraco. My settings panel is like this.
In my Master template I am using my css styling and JavaScripts are like this. And their paths are ok.
<link rel="stylesheet" href="/css/mobile.css"/>
<script src="/scripts/jquery-2.0.2.js"></script>
CSS and scripts path are working. So that's ok.
Now my problem is I want images for my site. I don't know where to put images and what should be the path.
For example:
I tried to upload pictures to Media
In my Master template I tried
<img src="/media/A.jpg" alt="Smiley face" height="42" width="42">
<img src="/media/images/A.jpg" alt="Smiley face" height="42" width="42">
Also in the CSS file
background-image:url('/media/images/A.jpg');
But these are not working. I just trialing them. Actually I don't know the correct way of doing it :(
So where should I store images in Umbraco and how should I locate the path in CSS files and template files ?
Please help!
Thanks in Advance ....
Items stored in the media section will have a path like:
/media/<row_id>/filename.ext
Where <row_id> is literally the id of the row in the database where the media item's information is stored.
One way you can determine the path of the media item is to click on the thumbnail (if it's an image) and copy what is in the address bar.
You can also access the file by id via a macro using xslt or razor. Here's a razor example:
#{
int imageId = 1069;
var media = Library.MediaById(imageId);
<img src="#media.umbracoFile" alt="" />
}
However, this is a content management system, and you will no doubt have end-users managing the content and, therefore, it wouldn't make sense to place design specific images in the media section. A more full-proof approach would be to simply place them in an images folder in the root of your site and use them from there.
Should be as simple as this on your css:
.style { background-image: url(/media/1006530/A.jpg); }
The path you get from the media url with row id (e.g.1006530) in it
In my webapp, I have a folder Views. In this folder several .aspx pages live. I don't use the rendered contents directly in the webapp, rather I request the contents using ajax in a main aspx page on the root of the webapp.
Now when I refer to an image, "images/image.png" will work since the image reference lives in the aspx page on the root. When I change this to "/images/image.png", this won't work since the root is determined by the virtual IIS folder.
How can I have a clean reference e.g. "/images/image.png"?
Firstly and probably most elegant, make the element run at the server and use the root-reletive url:
<img src="~/images/image.png" alt="image" runat="server" />
This will automatically translate your src-value into a path which will resolve from your current location. However, there is one caveat. If you do it on pages which are included, asp.net may create an incorrect value here, as it could be morphed into
<img src="../images/image.png" alt="image" />
if you are a directory down. So if you include this result in a page in the application root folder, your value may not be correct. I have not seen a good way to work around this. It will, however, show you a warning if the file doesn't exist.
Alternatively, you may want to manually set the root path for such pages:
<img src="<%=Request.ApplicationPath %>/images/image.png" alt="image" />
which will transform into a path always coming from the root of the site:
<img src="/AppPath/images/image.png" alt="image" />
Obviously, this is a bit more verbose. Additionally, you will not be able to see any warnings if the referenced file does not exist, as it will be dynamically built.
These are the three ways in which the same image has been referenced to in my project in 2-3 different files:
url(<% =QDAAB.Constants.SiteURL %>images/Docs/Plan/myImage.jpg)
url(~/images/Docs/Plan/myImage.jpg);
url(../images/Docs/Plan/myImage.jpg);
I am a bit confused about this relative, absolute path thingy. How do I refer to this image in such a way that no matter in what folder the image is located it is always displayed and never lost. Which of the above three references ways is right to achieve what I want? Or is there another way too to refer to an image?
Hope the question is clear.
I am beginner to .NET and have just begun trying out stuff.
Also what exactly do the above code lines mean? Like, what's this Constants.URL? What are "~" and ".." doing?
Here's where the image is being used in one of the pages. When I changed it to "../.." the image got displayed, earlier it wasn't.
<td align="center" style="background-image: url(../../images/Docs/Plans/myImage.jpg);
None of these will 'magically' find your image no matter in what folder the image is located. You will always have to give it some part of the path to the image in your links to have that image rendered.
However, out of these three, I would recommend the second line url(~/images/Docs/Plan/myImage.jpg); as the best way to accomplish what you need to do.
The '~' in .NET is a special character for the framework that starts your path at the root of your site. It essentially says, no matter what directory the request came from within the site, go to the root and start your path from there.
The '../' is standard HTML syntax meaning go up one directory and then start looking for your path.
So for instance, let's say your site is located at www.domain.com. And here is your folder structure
Images
Docs
Plan
CSS
Admin
SomeFolder
SomeFolderSubFolder
Default.aspx (your default document when you get to your site)
Examples
If you are in default.aspx, then the hand-coded URL to your images would be (/Images/Docs/Plan/myImage.jpg) as you are at the root of your site at this point.
If you are in SomeFolder, then the hand-coded URL to your images would be (../Images/Docs/Plan/myImage.jpg) since you have to go up 1 directory to get to the root of your site where the Images directory is located.
If you are in SomeFolderSubFolder, then the hand-coded URL to your images would be (../../Images/Docs/Plan/myImage.jpg) - as you would need to go up 2 directories to get to root of your site where your images folder is.
Now, by using the url(~/images/Docs/Plan/myImage.jpg); method, you do not have to worry about knowing how many directories deep you are in your site, it will always start looking from the site root. Each one of those examples above replaced with this line of code will always render out the image correctly.
EDIT
Ok, so you are trying this with in-line styles. You might/should be able to do this:
<td align="center" style="background-image: url(<%= Server.MapPath("~/images/Docs/Plans/myImage.jpg") %>);></td>
Or, there is nothing wrong with using the ../ method, you just need to keep in mind where you are at in your folder structure. Lastly, if you were to declare this style in your stylesheet instead of inline, it doesn't matter where the images are at in relation to the page, just where they are at in relation to the stylesheet FYI.
<td align="center" class="tdWithImages"></td>
styles.css
#tdWithImages{background-image: url(../Images/Docs/Plan/myImage.jpg);}
I am using WebRequest to retrieve a html page from the web and then displaying it using Response.Write.
The resulting page looks different from the original mostly in font and layout.
What could be the possible reasons and how to fix it?
Most probably, the HTML you retrieve contains relative URLs for loading images, stylesheets, scripts. These URLs are not correct for the page as you serve it from your site. You can fix this by converting all of the relative URLs into absolute URLs or by including a BASE tag in the head of the HTML, pointing to the URL of the original page.
Be advised though that deeplinking to images and other resources is considered bad practice. The source site may not like what you are doing.
The reason might be that the original html page contains relative (to the original site) paths to the stylesheet files so when you render the html in your site it cannot find the css.
Does the remote web site include CSS, JavaScript, or images?
If so, are any of the above resources referenced with relative links (i.e.: /javascript/script.js)?
If so, when the browser receives the HTML from your server, the relative links (which were originally relative to the source server) are now relative to your server.
You can fix this by either changing the HTML to use absolute links (i.e.: http://www.server.com/javascript/script.js). This is more complicated than it sounds: you'll need to catch <link href="..."/>, <a href="..."/>, <form action="..."/>, <script src="..."/>, <img src="..."/>, etc.
A more limited solution would be to place the actual resources onto your server in the same structure as they exist on the original server.
The remote site might look at the User-Agent and serve different content based on that.
Also, you should compare the HTML you can retrieve from the remote site, with the HTML you get by visiting the site in a browser. If they are not different, you are probably missing images and/or css and javascript, because of relative paths, as already suggested in another answer.