Having problems embedding a .jpeg in Portal Basic Page.

Not applicable

When I embed a .jpg on a new Dev Portal page, it display correctly in Edit mode but after saving (or viewing Preview) the image does not display. The page source looks like this:

[[{"fid":"22","view_mode":"default","type":"media","attributes":{"height":"174","width":"569","class":"media-element file-default"}}]]

I've tried storing the .jpeg on the webserver and locally in Drupal, same result.

0 3 124
3 REPLIES 3

@Tamera Smallwood , Above information is not enough,

Steps to reproduce with screenshots will definetely help.

1) Select the page to edit from the Drupal Content menu. When the page opens, select Edit

2) Select "Add Media" button from Editor toolbar:

5102-insertimage.jpg

3) Browse to the file to upload (I've also tried uploading it first then just browsing to the existing file in the library), select Next

5103-upload.jpg

4) Select Destination (I've tried both options), then select Next

5104-destination.jpg

5) Accept the defaults on next screen then "Save".

6) Accept the defaults on the next screen, then "Submit"

7) When returned to the page in Editor mode, the display of the new image looks correct:

5105-postupload.jpg

😎 HOWEVER, after saving the page (or trying to preview), this is what it looks like:

5106-aftersave.jpg

Hope this helps.

@Tamera Smallwood, that's the syntax used by the "Add Media" feature (the Media module). If you use "Image" instead, you can add the relative path and you'll get the HTML image syntax you expect.

  1. Upload files with /admin/content/file.
  2. Click the "Image" tool to insert the image where you want it.
  3. If "Browse Server" doesn't work for some reason, add the image path and set other details.

    5154-image-properties.png

To get an image's relative path:

  1. In /admin/content/file, click the image you want (recently uploaded should be at the top of the list).

    5155-content.png

  2. Right-click the image that's displayed and copy the image address:

    5157-copy-address.png

  3. Paste the address in the browser. The relative path appears after the domain:

    5158-image-address.png

    That relative path will be the same to all of the images you upload using this method.

If you don't have the Image tool in your toolbar, try going to /admin/config/content/wysiwyg (Configuration > Content Authoring > Wysiwyg profiles). Edit the profile you're using, and expand the "Buttons and plugins" group. Select the Image button.

Hope this helps.