Drupal 7.0 how to upload/insert images in content?

By jeny on 7 Jan 2011 at 18:08 UTC

Hi everydoby,

I am a newbie to Drupal. I chose Drupal to develop my site based on many good reviews and recommendations. I had no problem installing Drupal 6.20 and upgrading to 7.0. However, when I created a new content (either page, story, or blog post, etc.), I found no "attach image" button or any other way to upload and insert images into the text of my content. What I found after "googling" the issue confuses me. Like in this post http://drupal.org/node/176828, it asked to enable the "upload" module. There's no upload module in "/modules". More confusing to me when I found this post http://drupal.org/node/513096. It said that Drupal 7.0 already has the Image module as built-in core module and this core module provides image uploading and viewing ("The core version of Image will basically consist of 2 things:
- ImageCache's thumbnailing abilities.
- ImageField's widget and formatters for uploading and viewing images.").

In my "management >administrator >modules", the "Image" module is already enabled but still, no "attach image" button or any other way to browse/upload/insert images.

Please guide me to the right answer/fix of this confusion/issue.

Thank you very much,

Comments

There are generally two

s.Daniel commented 7 January 2011 at 18:36

There are generally two approaches to add images to content in Drupal. One is via upload module (Drupal 6) / imagefield (Drupal 7) and another one (available through contrib modules like drupal.org/project/tinymce + drupal.org/project/imce). The first way is what you usually want if you have content like news or product pages where always an image is attached and placed at the same spot and in the same size. The second way is the right one if you want individually style the content of every page which brings more flexibility but should be avoided if possible since it takes much more time and can't be semi-automated.

I'll describe the first way in short:
* In the top menu klick "Stucture" and then choose "Content types" which brings you here: /admin/structure/types
* Choose the type of content you want to add images to and klick "manage fields"
* Add a new field of the type "Image"
* Configure the field type and save settings.
* Create new content of the type you edited via the top menu "Content" > "Add content" > "The Content Type you added the image field to"

You will then see that there is the possibility to upload an image wich will be displayed along with the text.
If you want to change the size of the image go via top menu to "Configuration" > "Image styles" and create an Image style. Then go to the content types page and instead of "manage fields" klick "manage display" and choose the image style as format for the image.

Thank you very much Daniel - It works

jeny commented 7 January 2011 at 19:00

I followed your instruction and can now see the "Image >Browse/Upload" button.

Thank you very much Daniel.

Jeny

adding Image field

libre fan commented 11 January 2011 at 11:02

Something I don't understand though, is why a fresh install of Drupal7 has the image field already present in all the nodes while if you upgradind from D6 you have to add the image field yourself.

This is because the

s.Daniel commented 11 January 2011 at 15:35

This is because the imagefield was not present in Drupal 6. If you have an existing D6 site you would't want to suddenly have an imagefield at every node.

Image location + read more options

stefjazzinho commented 9 March 2011 at 10:29

Thanks for the very valuable info...

One more little detail for another newbie... I have added a new content type I labelled "image". Now I would like to be able to choose where in the page the image appears... for the moment it's only at the bottom of the page. Can you please explain how I move it around.

Another thing, for a basic page, I would like to have the option to show the entire page and not have users to click on "read More" to see the remainder of the page...

Have a good day...

Stef in Lisbon

You can alter the order of

s.Daniel commented 9 March 2011 at 14:23

You can alter the order of display at /#overlay=admin/structure/types or more precize /#overlay=admin/structure/types/manage/YOURCONTENTTYPE/display
Simply drag and drop the fields in the right order.

I guess you want a frontpage article to be displayed fully. Simply add following code (wich separates teaser and body) at the end of your content.


Well.... more or less got it...

stefjazzinho commented 9 March 2011 at 20:38

Thanks

Page shows differently depending on publishing options

stefjazzinho commented 9 March 2011 at 20:50

As you can see on http://tmnaovivo.com/node/1 ( I hope you see the same as I do) there's a photo underneath the title. Now, the same page, seen as the home page looses the photo... What have I done wrong.

Thanks.

Stef

Hmm I see a photo on both

s.Daniel commented 9 March 2011 at 22:39

Hmm I see a photo on both node/1 and front. Both pages basically look the same to me.

Image appears in article/basic page and the bottom

newbie_drupal commented 21 April 2013 at 01:53

The other answer is correct but I figured I'd give more information.
Navigate to Home » Administration » Structure » Content types » Article or Basic Page, etc.
The settings in Drupal 7 there is a bold Hidden menu heading.
Drag the image field under the Hidden menu option to hide the image from the bottom of the content.

Now it will only show where it's inserted into the Article/Basic Page, etc.
http://imtp.me/58wx0248m.png

Insert

catchlight commented 3 February 2013 at 00:05

Hi,

I use Insert Module a lot. It's much easier for the end user and to set up. It also works with CKeditor if you want to go that far.

http://drupal.org/project/insert

Brock

help please

AdGal commented 12 February 2014 at 21:50

I have done this before and it worked - but not now.

I am creating a new page. I am using Filtered HTML mode. I can not get jpegs to appear once I place them into the body of the page. I have used the little "image" button and posted the jpegs on my FTP site and then my FTP site password is required to view the page...it keeps appearing. But, the jpegs are not there anyway.

I have used the "past" button and put the image from copy/paste function into the little window. It will appear in the body of the page, but not in the preview and not on the site. And, yes I am saving.

OMG! I am going nuts? Can you help?

You cannot see image while

waqarit commented 6 August 2015 at 13:05

You cannot see image while using Filtered Html format unless you will have to add tag into configuration>content authoring>Text Formats>Filtered Html .

Or you can simply change your filter first to Full Html and then see the result.

problem with the positionning of the images in a text

ddehareng commented 26 July 2012 at 14:50

Hello everybody,

I am trying to put images inside a text, either with the Insert module, or with the Wysiwig module, in Drupal 7.14, with the theme Marinelli (release 7.x 3.0).
Apparently, both modules work fine since I get the following code:

"<p><strong>Workpackage 3: Protein targets for combating bacterial resistance</strong></p>
<p>image 1 ici
<img title="Transglycosylation entities" src="http://localhost/domi/site_iap-ipros/iap-ipros_v1/sites/default/files/WP3_fig3-1.png" alt="WP3-fig.1" width="477" height="275" /></p>
<p>&nbsp;</p>
<p>image 2 ici
<img title="Transition-state analog in transglycosylation" src="http://localhost/domi/site_iap-ipros/iap-ipros_v1/sites/default/files/WP3_fig3-2.gif" alt="WP3-fig.2" width="479" height="362" /></p>
"

which displays well when taken as such in a small html file.

However, the final result in my Drupal site is not at all related with these manipulations, since the related code source is:
"

<div class="nodecontent">
<div class="field field-name-body field-type-text-with-summary field-label-hidden">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<p><strong>Workpackage 3: Protein targets for combating bacterial resistance</strong><br />
image 1 ici</p>
<p> <br />
image 2 ici</p>
</div></div></div>
<div class="field field-name-field-image field-type-image field-label-hidden"><div class="field-items">
<div class="field-item even">
<img typeof="foaf:Image" src="http://localhost/domi/site_iap-ipros/iap-ipros_v1/sites/default/files/WP3_fig3-1.png" width="1384" height="1071" alt="WP3-fig.1" title="Transglycosylation entities" />
</div>
<div class="field-item odd">
<img typeof="foaf:Image" src="http://localhost/domi/site_iap-ipros/iap-ipros_v1/sites/default/files/WP3_fig3-2.gif" width="701" height="505" alt="WP3-fig.2" title="Transition-state analog in transglycosylation" />
</div></div></div>    
</div>

"
where the text and the image parts are well separated.
I do not understand what happens, as I have been watching other sites built with Marinelli that seem OK (namely http://pyrn.ways.org/).
Sure, I did something wrong but I do not see what, since the modules work fine in generating the right code in the admin part.

I hope you can give me a clue about this. Thank you for your attention.