I'm new to Joomla, but I've followed few tutorials. I've created a template for my website, but no images are showing up. Looking to the source, my image references look like:
<img src="/templates/fiziaimages/zdjecieDol.png" />
When they should be looking like:
<img src="/templates/fizia/images/zdjecieDol.png" />
^
fizia/images is the correct directory, so I don't know what causes the backslash to not appear.
in a first time you can use your browser inspector to verify if your images are really found.
If it's ok you can try to put your images in the "image" directory in the root of your website
Related
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
I am attempting to move legacy content into Umbraco v4.9.1. Some of the photos that are being migrated are being resized using an httphandler (ImageResizer.ashx) using variables passed through the query. When I attempt to save the path the url is replaced with either "/" or what the path originally was. Is there a work around? The tag is below.
<img src="/imageresizer.ashx?mw=232&src=/imagePath/image.jpg" />
The url is correct, because if I type it into a browser the image comes up fine. It seems like Umbraco is filtering out this url.
UPDATE:
I am noticing that the editor is chopping off everything before /imagePath/image.jpg and only displaying that. I have tried turning off the TidyEditorContent in the UmbracoSettings.config and it still does this.
A workaround would be to UrlEncode the src part of these Urls, where "/" is replaced by "%2F".
<img src="/imageresizer.ashx?mw=232&src=%2FimagePath%2Fimage.jpg" />
I don't know if you can do this is your particular situation, but it is a workaround.
I have installed a diazo theme for my Plone site. Now I need to change the default logo that is being used. In another question I was instructed to look at the rules.xml and index.html files that come in the theme's directory and to figure out how to change the logo by editing one of those files manually. However, I cannot figure out how to do this. These appear to be the relevant lines from my index.html file:
<div id="portal-header">
<div id="portal-slogan">
<span class="heightImmitator"></span><span>Free Theme for Plone</span>
</div>
<a id="portal-logo" title="Site1" href="/"><span class="heightImmitator"></span><img src="images/logoSchools.gif" alt="" title="" height="71" width="402"></a>
<div id="portal-personaltools-wrapper">
<h5 class="hiddenStructure">Personal tools</h5>
<dl class="actionMenu deactivated" id="portal-personaltools">
<dt id="anon-personalbar"><a style="cursor: pointer;" class="link-overlay" rel="#pb_1" href="/login" id="personaltools-login">Log in</a></dt>
</dl>
</div>
</div>
And these appear to be the relevant lines from my rules.xml file:
<copy css:theme="#portal-logo" css:content="#portal-logo" attributes="href"/>
<copy css:theme="#portal-logo" css:content="#portal-logo" attributes="title"/>
<replace css:content="#portal-logo img" css:theme="#portal-logo img" />
I guess that the "replace" line is telling the theme to replace one logo with another. However, it is not intuitive to me how I should edit these files to find the logo that I have uploaded. Incidentally, the image file that I have uploaded is called nav-home1.png and it is sitting in a directory called site-images which is in my home directory.
If I were you (and taking my comment about where to do this above into account), I'd simply remove the <replace /> rule that's trying to pull Plone's logo in from the content and then edit your index.html to reference your image file directly (at this point, it's all just plain HTML).
Incidentally, you may benefit from reading a bit more about the Diazo rules and what they do, on http://diazo.org/. For a heads-up (even if textual) of what the in-Plone experience will be in Plone 4.3, see http://pypi.python.org/pypi/plone.app.theming.
Martin
My solution was to place my image file in the ~/Plone/buildout-cache/eggs/quintagroup.theme.schools-6.0.10-py2.7.egg/quintagroup/theme/schools/static/images directory and then comment out the line in rules.xml that tells index.html to replace the image, and then edit index.html so that it loaded my image instead of logoSchools.gif, which was previously indicated. This did the trick, but now my problem is that the theme is getting the sizing information from somewhere else, so the image is far too big. Adjusting the height and width attributes in index.html have no effect.
I would suggest getting the static theme files provided by the theme egg. Then editing and packaging it as a zipped file (Use as guide -> http://pypi.python.org/pypi/plone.app.theming/1.0#packaging-themes). Then you can upload it from the Diazo control panel.
If you want to manipulate the zipped files within Plone, you can go to portal_resources in the ZMI and edit the files there. If you want to distribute the edited files, download it from the Diazo panel.
This is a bit of work for now, but the experience should dramatically change in Plone 4.3 as suggested by optilude.
For help in understanding Xpath, use: http://www.w3schools.com/xpath/default.asp Spend some time on the tutorials. It is really simple to understand.
I uploaded my logo image to the FS. I've got a develop-egg in {ZEOHOME}/src/
So, the image shows up like this:
/usr/local/Plone/zeocluster/src/quintagroup.theme.sunrain/quintagroup/theme/sunrain/static/images/theme_rain/PF-Sig.png
(See buildout tutorial for how to add a develop egg...)
In the theme's ..theme/sunrain/static/index.html file, use a direct reference like this:
<img src="/++theme++quintagroup.theme.sunrain/images/theme_rain/PF-Sig.png" alt="" title="PF Sig Logo" height="150" width="300"/>
The sizing info is right there in the <img.. /> tag.
However, it seems to be important, after making any changes, to go to Plone's Theme Control Panel, and deactivate/reactivate the theme, so that it will re-process the Rules.
I have spent the past six hours trying to change the logo in a fresh Plone 4.2 (OK, I'm a bit rusty!)
Quintagroup just tells me to customize logo.png in the ZMI, but that seems so... 2002 ;-) I spent hours yesterday trying to use the 4.3 theme-TTW feature, only to find that SunRain seems to break when I create a TTW copy.
Since this seems to be a top user request, why is it still so absurdly hard to figure out?
Should this not be a simple "Upload your new Logo Image" in the Themes Control Panel?
I am working on a new blog using wordpress and I came across a strange error. in my theme file there is no
<div id="sliderDiv">
<img src="images/sliderMain.png" width="1000" height="427">
</div>
in index.php or page.php I even look into search.php and searchpage.php but I already remove those lines from those files already but they show up all the time I could not figure out from where they are coming.those HTML lines were first used for testing purpose in all those files but I already removed them, but still showing up. I deleted them from theme editor but they are showing up. I don't know whats the problem. I also try clearing up my cache but no luck. please help
Use a find/replace function in a text editor to search all of your theme files for that html. Any text editor - OS X or Windows - will have such functions.
Or use grep if you have a command line.
I have a bunch of images in my localhost folder (C:\inetpub\wwwroot\Images) which I am trying to access within my ASP.net application. The image src generated in my markup is:
<img id="MainContent_MainImage" src="localhost/Images/FGOStuart_7166.jpg" />`
This fails to load the image and if I look at the source for the page it actually directs to
http://localhost:64395/Pages/localhost/Images/FGOStuart_7166.jpg
so it looks like it is trying to access a path relative to the page (on the Pages folder). The src works if I type it into the browser manually and the image is displayed.
Can anyone explain what's going on here and how to fix it? I'm attempting to move the images out of the database and onto the file system but without much luck so far.
That's because the browser assumes "localhost" is a folder and adds it to the current relative path. Add http to it and it should work fine, or remove localhost altogether and just leave the /Images... part.
Try it like this:
<img id="MainContent_MainImage" src="~/Images/FGOStuart_7166.jpg"
alt="An Image" runat="server" />
This resolves it server-side from the root down. And always use an alt :)
What you really want to be doing is using the magic tilde:
<img id="MainContent_MainImage" runat="server" src="~/Images/FGOStuart_7166.jpg" />
~ signifies the root of the application. Notice I added runat="server", too.