Am newbie to Drupal this is my first question

i want to embed my images on the blocks body, so i tried below code to embed

<div class="topsection">
    <div class="wrapper">
      <div class="topleftsection">
        <div class="socialmediaimage"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','sites/all/themes/custom/themename/images/facebook_top_hover.png',1)"><img src="sites/all/themes/custom/themename/images/facebook_top.png" alt="Facebook" width="18" height="18" id="Image2" border="0" title="Facebook"></a></div>
        <div class="socialmediaimage"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','sites/all/themes/custom/themename/images/twitter_top_hover.png',1)"><img src="sites/all/themes/custom/themename/images/twitter_top.png" alt="Twitter" width="18" height="18" id="Image3" border="0" title="Twitter"></a></div>
        <div class="socialmediaimage"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','sites/all/themes/custom/themename/images/gplus_top_hover.png',1)"><img src="sites/all/themes/custom/themename/images/gplus_top.png" alt="Gplus" width="18" height="18" id="Image4" border="0" title="Gplus"></a></div>
        <div class="socialmediaimage"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','sites/all/themes/custom/themename/images/linkedin_top_hover.png',1)"><img src="sites/all/themes/custom/themename/images/linkedin_top.png" alt="Linkedin" width="18" height="18" id="Image5" border="0" title="Linkedin"></a></div>
        <div class="socialmediaimage"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','sites/all/themes/custom/themename/images/skype_hover.png',1)"><img src="sites/all/themes/custom/themename/images/skype.png" alt="Skype" width="18" height="18" id="Image6" border="0" title="FourBends"></a></div>
      <div class="toprightsection">
        <div class="emailsection">
          <div class="email">Email :</div>
          <div class="contacus"><a href="mailto:[email protected]">[email protected]</a></div>
        <div class="countrysection">
          <select name="Country" class="countrylist">

i having page.tpl and page--front.tpl in my custom theme, the images are only loading on page--front.tpl, please refer screenshot enter image description here

But for other pages for example user login page the images are not loading, please screenshot 2 enter image description here

When i inspect with firebug on the image src the url added with the "user" ,this is the reason behind why the images are not loading


  • is your requirement to add social icons in a block ..???
    – Abin
    Commented Jul 25, 2015 at 6:13
  • Not only the social media icons, all the images, whatever the images am adding from the block body it't not loading Commented Jul 25, 2015 at 6:15
  • Are you created the block programmatically or just configured ..??
    – Abin
    Commented Jul 25, 2015 at 6:20
  • I created a region programmatically but i just added the block for that region as administrator Commented Jul 25, 2015 at 6:23
  • @Abin any guess ?? Commented Jul 25, 2015 at 6:33

2 Answers 2


The image links are the problem here, I think. The images are shown on the front page but aren't shown on other pages. So, on the front page it understands the image link (by adding the http://localhost/ in front of the image link you gave) but on the other pages, for example on http://localhost/node/3 it tries to show an image from http://localhost/node/3/sites/all/themes/custom/themename/images/facebook_top.png but there is no image on this address.

Therefore, use the full link (http://localhost/sites/all/themes/custom/themename/images/facebook_top.png etc).

  • thanks for the answer, but if we use full url, while we move to the live or any other places we need to change it as well as, so it's not good idea Commented Jul 27, 2015 at 6:52
  • No, instead of using static url such as http: //localhost use a dynamic variable such as $base_url (api.drupal.org/api/drupal/developer!globals.php/global/base_url/…). So no need to change the url if you change the domain name or base url.
    – herci
    Commented Jul 27, 2015 at 7:29
  • Am embedding with body editor, so i don't want use php within the editor Commented Jul 27, 2015 at 7:31

Click image to enlarge

enter image description here

You can do it by changing to the text format to Filtered HTML or Full HTML

Then you can do it manually by typing <img src="url.jpg"> OR If you are using a module like CK Editor you can add it through the icon bar.

  • i used both Filter HTML or Full HTML but no use, try to understand the question that realpath of the url is adding with image src that is the issue, i don't want to use CK Editor or CK Finder,i want to add it using Drupal body text editor Commented Jul 25, 2015 at 6:30
  • Can you edit your question, highlight your code and press the {} icon, your code is not showing up because you didn't add the code tags to it.
    – No Sssweat
    Commented Jul 25, 2015 at 6:35
  • You should use the block tpl instead of node. When you hover the edit button for a block, in the bottom left corner of your browser you should see a url like admin/structure/block/manage/block/2/configure so in this case since you see the #2 you use block--block--2.tpl.php
    – No Sssweat
    Commented Jul 25, 2015 at 6:47
  • I suggest you move out the images folder from the drupal/sites/all/themes/mytheme folder and just move it to drupal/images so your code changes to Ex: <img src="images/facebook_top.png"
    – No Sssweat
    Commented Jul 25, 2015 at 6:48
  • but it's not the structure i think. both are the just tricks, this is weird a famous CMS system don't have the simple option Commented Jul 25, 2015 at 6:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.