0

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>
      <div class="toprightsection">
        <div class="emailsection">
          <div class="email">Email :</div>
          <div class="contacus"><a href="mailto:contactus@xxx.com">contactus@xxx.com</a></div>
        </div>
        <div class="countrysection">
          <select name="Country" class="countrylist">
            <option>India</option>
            <option>USA</option>
          </select>
        </div>
      </div>
    </div>
  </div>

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

http://localhost/projects/drupal/dev/user/sites/all/themes/custom/themename/images/facebook_top.png

  • is your requirement to add social icons in a block ..??? – Abin Jul 25 '15 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 – Jothi Kannan Jul 25 '15 at 6:15
  • Are you created the block programmatically or just configured ..?? – Abin Jul 25 '15 at 6:20
  • I created a region programmatically but i just added the block for that region as administrator – Jothi Kannan Jul 25 '15 at 6:23
  • @Abin any guess ?? – Jothi Kannan Jul 25 '15 at 6:33
1

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 – Jothi Kannan Jul 27 '15 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 Jul 27 '15 at 7:29
  • Am embedding with body editor, so i don't want use php within the editor – Jothi Kannan Jul 27 '15 at 7:31
0

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 – Jothi Kannan Jul 25 '15 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 Jul 25 '15 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 Jul 25 '15 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 Jul 25 '15 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 – Jothi Kannan Jul 25 '15 at 6:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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