Drupal: images don't show up inside the block (text only) - drupal

I've added the following code inside a Drupal block, to display an image.
<img alt="Fuzion logo" src="sites/all/themes/zen/zen/logo.png" />test<br />
I've tried several urls. For none of them I can see the image in my front-end website. The block only contains the text "test".
hostingpath/sites/all/themes/zen/zen/logo.png ---> I can see the logo in back-end (editing field, only with this)
sites/all/themes/zen/zen/logo.png
logo.png
thanks

Did you remember to use an appropriate filter that allows img tags?

Although your question was answered, I have found this also can happen when using the pathauto module with the path to your page set as a "subdirectory"; e.g. www.example.com/path/to/page.
As a result, the web server will look for your image at /path/to/page/sites/all/themes/zen/zen/logo.png because the URL is relative.
If this occurs, make sure to provide an absolute URL by including a forward slash at the beginning, i.e. /sites/all/themes/zen/zen/logo.png instead of sites/all/themes/zen/zen/logo.png.
Perhaps this answer will assist someone else with a similar problem.

Related

image doesn't displayed on other pages

Home page- I have more than the HOME PAGE and for some reason, the logo picture does not appear on the other pages. Do you have any idea how to fix that?
sample page
whenever i try to fix for another page the previous one gives the same problem.
<body <?php body_class(); ?>>
<div id="page" class="hfeed">
Hello from header.php
In short, the browser isn't displaying the image because the browser can't find it using the instructions you gave it. Those instructions are the src attribute of the img tag...
Now, there are a few possible reasons why the browser cannot find the image. You might have one problem going on, or all of them. Let's go through the following exercises to see if maybe we can narrow down the problem.
First, try putting the image in the same folder as your HTML document
his is the simplest way to insert an image. As long as everything is in the same folder, things are pretty simple to find.
Possible snags?
Simple (but common) typo: scr= instead of src=
Mispelling the image name: src="mypick.gif" or src="my pic.gif" instead of src="mypic.gif"
Wrong extension: src="mypic.jpg" when your image is a gif... mypic.gif. (Should I use gif or jpg? You might find this interesting.)
Malformed img tag...
Before going on to other possible reasons for your missing image, make sure that you can successfully insert an image as shown above.

How to add an HTML class to all image attachments on posts in Wordpress -- except homepage

Sorry for the length, my problem is very simple, but specific.
I'm building a wordpress site that automatically imports image galleries from a Tumblr account, then styles and displays them. The backend is finished, and all that I need now is have all images in posts be displayed as thumbnail sized links. They are not behaving well with the importer (I've tried 6), so I have to edit the HTML display (rather than the images as they are uploaded).
I have decided to do this by applying class="attachment-thumbnail size-thumbnail" on all images on the site (in HTML). I have tested this and they will open the proper gallery in a lightbox as necessary so long as they belong to those two classes.
I have a two part problem.
I do not know PHP past basic syntax, and while I can intuit most of what is happening I don't trust myself to edit Wordpress source code without understanding exactly what I am breaking.
From other answers I've learned that I should most likely edit the wp_insert_attachment() function in post.php under wp_includes/. I have found the function, but don't really know where to go from there, as it does not appear to be specific to image attachments. I don't want to throw any errors by assinging image classes to non-image attachments. How do I add those two classes (attachment-thumbnail and size-thumbnail) to all post images (and only images)?
There is a single exception to this rule. I want a large image on the homepage, and have it not be a link.
It seems like the way to handle this would be to allow page attachments to be handled normally, while attachments that are both images and attached to posts should trigger this:
if [attachment is an image AND is on a post, not a page]:
<img src="https://whatever">
becomes
<img src="https://whatever" class="attachment-thumbnail size-thumbnail">
tl; dnr: ^^ that's all I need to happen, in PHP, in the right file, in Wordpress ^^
Thanks!
So likely you will want to do it via php but instead you could do it with javascript ie jQuery:
<script>
$(function() {
$("body img").addClass("attachment-thumbnail size-thumbnail");
});
</script>
Put that on any page or site header and it will add the class to all images. You can modify the search filter to suit.
You might need to re-call your lightbox initialization code too, or put this before it gets called initially.

ckeditor add <iframe> tag in editor

I am using ckeditor in a drupal 7 site. I want to put iframe tag inside the editor.
Currently what happen when we put iframe in ckeditor.
<iframe src="http://www.lipsum.com/"></iframe>
It convert that iframe tag with a img tag with some special attribute and URL.
<img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22http%3A%2F%2Fwww.lipsum.com%2F%22%20class%3D%22placeholder-tool%20helpTool-placeholder%22%20scrolling%3D%22no%22%20frameborder%3D%220%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" src="http://testsite.com/sites/all/libraries/ckeditor/images/spacer.gif?t=C9A85WF" data-cke-real-element-type="iframe" data-cke-resizable="true">
Which I do not want. I want to make the ckeditor to print exact iframe tag there not the img tag like this.
<iframe src="http://www.lipsum.com/"></iframe>
So that If I want to perform a task in iframe so I can do that inside the editor.
Thank you in advance
Addition 2:
I need the iframe should work in editor itself. It should not convert iframe to img on node add or edit page also.
It should like this
Not like this
Finally, I have to make one line change in ckeditor.js at line number 8194:
return m.createFakeParserElement(p, 'cke_iframe', 'iframe', true);
To
return p;
So it is not creating FakeParser for iframe. And when I put a iframe in edit mode so I see the iframe exactly not the image in place of that.
It is a little hack I used for this functionality.
Thank you Darko for help on this.
Problem solution:
In current newest release of CKEditor (4.5.8) there is a minified file ckeditor.js. In order to have iframe enabled in edit mode you will have to change next line in that file:
return a.createFakeParserElement(b,"cke_iframe","iframe",!0)
into:
return (b)
Due to security reasons that option is by default disabled and this is the way how you can override it.
That is solution for this particular problem. Below are some of possible problem solutions if you have problems with iframe in CKEditor in drupal 7.
Addition:
Go on:
admin/config/content/formats/filtered_html (assuming you use that text format) and add <iframe> in Filter settings (in Allowed HTML tags).
When you post iframe in ckeditor now make sure you don't post it inside any other tag.
ex.:
<p some text <iframe src="http://www.lipsum.com/"></iframe> <br> </p>
that will not work.
<p>some text </p> <iframe src="http://www.lipsum.com/"></iframe>
that will work
Best way is to go on "source" mode in ckeditor and insert iframe there on place you want.
Addition 2:
From your comments i assume you trying all this on online ckeditor? You can't see final result there (node page view) because there is showed only edit view (which is temporary).
Ckeditor converts all your content based on settings (not just basic settings in texts format). For instance ckeditor converts some HTML reserved characters in they entity names or entity numbers because ckeditor itself using HTML to show you preview in edit mode.
ex:
<iframe src="http://www.lipsum.com/"></iframe>
is converted in:
<p><iframe src="http://www.lipsum.com/"></iframe></p>
You can see there that "<" is converted in "<" and ">" is converted in >. Browser need "< >" in source to properly load iframe. So solution is to using "source" option in ckeditor.
So i will repeat once more. Enter text, pictures and all content you need in ckeditor edit mode. When you want to add iframe you go on source mode and put it in content (in that way ckeditor will not convert HTML reserved characters, or maybe some else in your url).
Of course you can edit your iframe there and format size, border, scrolling etc...After saving your content you should see iframe properly loaded. In your case:
Addition 3:
Due to security reasons, to prevent users from breaking site layout and/or to avoid posting invalid HTML that possibility is disabled (like iframe working inside editor). If you are so determent to achieve that you can always go with old modules because in new ones that doesn't work.
In new library there is an option you can try:
admin/config/content/ckeditor
There you can edit Full profile and under ADVANCED CONTENT FILTER you can try disable Advanced content filter. Flush the cache after that. If that not working go with old modules.
Go disable module ckeditor
Install wysiwyg
Install old ckeditor library (just copy old library in /sites/all/libraries )
You need CKEditor 3.3.1 and older
Go on admin/config/content/wysiwyg and select that library
When you do this you should considering all the risks. Hope this post will be helpful for someone else too. Cheers.

Django CMS Deleting HTML5 Tags and Attributes

I am having a big time issue with solving a problem. I have a placeholder called main for the content region of the page. I was building that region in the cms. Everything was going great until I attempted to add an embedded video contained in an iframe. When I save django cms completely removed the iframe and left an empty div. So I attempted to use prettyphoto light box to open the video by clicking on an image. The code I added to the page through the cms is:
<a rel='prettyPhoto[youtube]' href="https://www.youtube.com/embed/mqVZF_yb8C0?autoplay=1&start=1765&iframe=true" data-rel="prettyPhoto">Click Image</a>
When I saved, django cms completely removed the data-rel attribute from the link which is obviously needed for the js. So I went a step further and adapted the code of the data attribute to:
rel="prettyPhoto"
and the cms also removed that attribute! Also anytime I add an html5 tag like article of section it hates that too! What gives here? Am I doing something wrong? Any advice would be appreciated. 
Aaron,
Thanks.
Please see the discussion at https://github.com/divio/django-cms/issues/1529. We use html5lib to clean the contents of the text plugin (this cannot be turned off for security reasons).
What you'll want to do is write a custom plugin (possibly one that can be embedded inside text plugins).

master page images not showing on child pages

This is probably something really simple but I cant see what!
Any images I have in a masterpage aren't showing up in child pages,
all I get is the box with the red cross in it.
I don't think Ive done anything different from usual and it's not something that's
happened in other sites so im kinda scratchin my head with it.
Any ideas are appreciated!
Kevin's got the essence of the problem right - your URL in your master page is likely relative to the location of the master page, and when it's included in the child page, the relative reference isn't correct anymore. The simplest solution for this sort of thing is to have your master page URLs be relative to the site, not the page. In other words, if you've been doing
<img src="images/picture1.gif">
You need to replace that with
<img src="/images/picture1.gif">
or something similar.
in the master page you use the image src similar to the below line and this will work. this same problem solved usig this way.
src="<%= Page.ResolveUrl("~")%>Images/myimage.png"
Did you give the image runat="server" and use a root relative "~/" path to the file?
The URL to your image is incorrect.
Try using absolute paths to your images.
I've had this problem when using a master file with content pages in different subdirectories.
If you use relative paths to your images, thay should be relative to the content page, not the master.
Edit: This is true if you use the img tag to display your images. asp:Image behaves better =)
It definitely sounds like you have a pathing problem. View the source to your rendered page and take a look at where it's trying to load the image from, that should help you fix your path.
If you set the right path then also you are getting the same problem then you can try this will definitely solve your problem:
Use double dots(..) before the starting of url.
If Content pages are located inside subfolders this problem arises. When a content page is rendered the markup is generated afresh for the master page content as well, and the location of an image may render differently as it appears in the master page. The best way is to replace with asp:Image control instead of HTML image tag. Then define the absolute starting with:~/ to actual location of the image. This should solve the problem. Please remove the entire image tag before inserting asp:Image as attributes are different for both.
Good Luck !!.
If you use image<img> tag instead of this, please use "style="background-image: url('/Images/welc.jpg');"in any other tag. This looks like a silly.But it works for me. I was also getting this problem,after using this thereafter I got image at all my child pages.

Resources