I cannot get Image Base64 Formatter to work. When I set this up (see screenshot below), I receive the following markup:

<div class="field-item even" rel="og:image rdfs:seeAlso" resource="http://localhost:8082/sites/default/files/field/image/imaAEC2.tmp.jpg">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</div>

It does this on the node and within Views.

Investigating further, its missing the IMG tag : <img alt="" src="data:image/jpeg;base64,


If I plug that into chrome tools (with the ending), it works.


Please note that this is using Drupal 7.19 on Acquia Dev Desktop.

Please see my screenshots below. Thank you!

CommentFileSizeAuthor
2013-08-10 12.55） #2.jpg66.73 KBsuzukizenzo
2013-08-10 12.55） #2.jpg66.73 KBsuzukizenzo
2013-08-10 12.55） #2.jpg66.73 KBsuzukizenzo
#4 image_base64-support-rendering-img-tag-1924642-4.patch1.58 KBsam152
#2 image_base64-support-rendering-img-tag-1924642-2.patch2.14 KBsam152
base64.jpg172.5 KBmherchel

Comments

franz’s picture

franz
any
Location Montréal
commented
Title: Module not working.. missing <img src="data:image/jpeg;base64, » Support rendering img tag
Category: bug » feature

Thank you for that feedback. I originally designed this module to serve a raw base64 value from a services endpoint, where it would be backend-processed, that is why there is no <img> tag. I'm sure now I'd like both options to serve both needs. This would be a setting in the formatter settings, I'll see if I can work on it later, but if you can post a patch to add it, would be useful.

sam152’s picture

sam152 commented
Status: Active » Needs review
StatusFileSize
new image_base64-support-rendering-img-tag-1924642-2.patch2.14 KB

I needed this because I was sending fields off into a HTML => PDF program. I have attached a working patch to add the option to the field formatter. I can be attributed with --author="sam <sam@1485048.no-reply.drupal.org>" if the patch is used.

Sam.

franz’s picture

franz
any
Location Montréal
commented
Status: Needs review » Needs work

Hi Perth, this is an awesome addition, but the patch is failing on latest 7.x-1.x-dev, I believe it is due to 

+++ b/image_base64.module
@@ -63,17 +73,25 @@ function image_base64_field_formatter_settings_summary($field, $instance, $view_
+      if (!file_exists($uri)) {
+        $display_style = image_style_load($display['settings']['image_style']);
+        image_style_create_derivative($display_style, $item['uri'], $uri);

Which was already patched there. Can you re-roll the path? I'll be happy to commit it.

sam152’s picture

sam152 commented
Status: Needs work » Needs review
StatusFileSize
new image_base64-support-rendering-img-tag-1924642-4.patch1.58 KB

I have attached a new patch which applies against 7.x-1.x, I think I was working against master.

franz’s picture

franz
any
Location Montréal
commented
Status: Needs review » Fixed

I'm very happy with these. I hadn't realize that this can be very useful, for example, when you have many small images in a content type and you want to avoid the overhead of several requests to files. Also, with page cache this can get very fast! I'll release a beta rigth now.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

kryptum’s picture

kryptum commented
Status: Closed (fixed) » Active

This issue happens to me using latest v7.x-1.0-beta1 with Drupal 7.26...
I'm very interested in this module and replacing all my website images with base64 format.

The screenshots provided by OP is what currently happens in my environment.

sam152’s picture

sam152 commented
Status: Active » Closed (fixed)

You need to select the secondary view mode, allowing you to render an entire image.

kryptum’s picture

kryptum commented
Status: Closed (fixed) » Active

Thanks! I got it working following your comment.

kryptum’s picture

kryptum commented
Status: Active » Closed (fixed)