Solved: How can I use sprites instead of images in the product description?

[skinnybloke]

Hi - I want to display sprites instead of recurring images in my product description on https://www.gokarts4u.com/all-go-karts/107-dino-trophy-pedal-go-kart.html, for example:

<img class="sprite-dino-automatic-freewheel" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AQMAAAAAMksxAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAA9JREFUeNpjYBgFowA7AAACHAABV3wEvQAAAABJRU5ErkJggg==">

...but when I save the product, and look at the source code again,  this tag is stripped out.

 

I have HTMLPurifier Library turned off in Preferences > General 

 

Anybody any ideas 

Edited November 3, 2016 by skinnybloke (see edit history)

[NemoPS]

What happens if you use a normal source instead of the base64 one?

[skinnybloke]

Hi if you mean an image src like this then it displays - no problems

<img src="/img/cms/DinoGoKarts/dino-automatic-freewheel.jpg" alt="Automatic Freewheel (AF)" />

[NemoPS]

At this point you can try editing the product class, and removing  'validate' => 'isCleanHtml' from its definition, for the description

[skinnybloke]

 

 

At this point you can try editing the product class, and removing  'validate' => 'isCleanHtml' from its definition, for the description

 

I'm afraid this made no difference at all

[NemoPS]

Can you check if it's just the editor stripping it, or the value is broken in the database already? Like add your sprite, save, check the database, ps_product_lang table

[skinnybloke]

Hi - the code is not in the database

 

It must be the editor stripping it out -  I make the changes in Tools > Source Mode and click on OK. When I immediately re-open the code in the source mode, the changes I have made have been removed. 

 

This is without clicking on the product's save button

[musicmaster]

You may need to change the configuration file of TinyMCE to enable this: http://archive.tinymce.com/wiki.php/Configuration3x:extended_valid_elements

[skinnybloke]

You may need to change the configuration file of TinyMCE to enable this: http://archive.tinymce.com/wiki.php/Configuration3x:extended_valid_elements

 

Thanks for the pointer. I modified the  /js/admin/tinymce.inc.js file and added 'paste_data_images: true' as per this page https://www.tinymce.com/docs/plugins/paste/#paste_data_images

 

Code is now:

function tinySetup(config)
{
	if(!config)
		config = {};

	//var editor_selector = 'rte';

	if (typeof config.editor_selector != 'undefined')
		config.selector = '.'+config.editor_selector;

	default_config = {
		selector: ".rte" ,
		plugins : "colorpicker link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor anchor",
		browser_spellcheck : true,
		toolbar1 : "code,|,bold,italic,underline,strikethrough,|,alignleft,aligncenter,alignright,alignfull,formatselect,|,blockquote,colorpicker,pasteword,|,bullist,numlist,|,outdent,indent,|,link,unlink,|,anchor,|,media,image",
		toolbar2: "",
		external_filemanager_path: ad+"/filemanager/",
		filemanager_title: "File manager" ,
		external_plugins: { "filemanager" : ad+"/filemanager/plugin.min.js"},
		language: iso,
		skin: "prestashop",
		statusbar: false,
		relative_urls : false,
		convert_urls: false,
		entity_encoding: "raw",
		extended_valid_elements : "em[class|name|id]",
		valid_children : "+*[*]",
		valid_elements:"*[*]",
		menu: {
			edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
			insert: {title: 'Insert', items: 'media image link | pagebreak'},
			view: {title: 'View', items: 'visualaid'},
			format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
			table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
			tools: {title: 'Tools', items: 'code'}
		},
		paste_data_images: true
	};

	$.each(default_config, function(index, el)
	{
		if (config[index] === undefined )
			config[index] = el;
	});

	tinyMCE.init(config);
}