Adding HTML to captions using PluginImg Posted by Enorazza 16 Mar 2017 20:03 GMT-0000 posts: 15 Using PluginImg to add images to a wiki page. Is it possible to add some HTML in the caption (the desc field)? Tried with regular HTML and Wiki markup with no luck. I suppose it is not possible.. or is there a workaround maybe? ^^
Posted by Tom Jarvis 18 Mar 2017 00:20 GMT-0000 posts: 215 There is a change that you can make to the img plugin which would then allow you to put HTML in the desc parameter. If you do make this change, future Tiki upgrades could replace the img plugin code, and then you would lose your change. And, allowing someone to insert HTML into the desc parameter may allow them to insert malicious code, so it might not be safe. If you are willing to take the risk, here is what you need to do. Edit lib/wiki-plugins/wikiplugin_img.php, and in the first "wikiplugin_img_info()" function, change the 'filter' specified for the 'desc' parameter. Copy to clipboard'desc' => array( 'required' => false, 'name' => tra('Caption'), 'since' => '3.0', 'doctype' => 'text', 'filter' => 'text', 'description' => tr('Image caption. Use %0name%1 or %0desc%1 or %0namedesc%1 for Tiki name and description properties, %0idesc%1 or %0ititle%1 for metadata from the image itself, otherwise enter your own description.', '<code>', '</code>'), 'default' => '', ), Change the filter option from 'text', which is what is currently preventing you from using HTML, to 'rawhtml_unsafe' (you can find the filter options in lib/core/TikiFilter.php). Copy to clipboard'desc' => array( 'required' => false, 'name' => tra('Caption'), 'since' => '3.0', 'doctype' => 'text', 'filter' => 'rawhtml_unsafe', 'description' => tr('Image caption. Use %0name%1 or %0desc%1 or %0namedesc%1 for Tiki name and description properties, %0idesc%1 or %0ititle%1 for metadata from the image itself, otherwise enter your own description.', '<code>', '</code>'), 'default' => '', ), That is all you need to do to be able to put HTML in the desc parameter. I am not sure what HTML you are thinking of using, but I only tested it with bold, heading 1, and italics tags, which all worked fine. If you would rather change the plugin so that you could use wiki syntax in the desc parameter, then along with changing the filter, you would also need to change one of the other lines of code. To allow wiki syntax in the img plugin, first change the filter to 'wikicontent': Copy to clipboard'desc' => array( 'required' => false, 'name' => tra('Caption'), 'since' => '3.0', 'doctype' => 'text', 'filter' => 'wikicontent', 'description' => tr('Image caption. Use %0name%1 or %0desc%1 or %0namedesc%1 for Tiki name and description properties, %0idesc%1 or %0ititle%1 for metadata from the image itself, otherwise enter your own description.', '<code>', '</code>'), 'default' => '', ), Then you have to change a line of code in the wikiplugin_img function to parse the wiki code that you put in the desc parameter. Change: Copy to clipboard//Add description based on user setting (use $desconly from above) and close divs isset($desconly) ? $repl .= $desconly : ''; to: Copy to clipboard//Add description based on user setting (use $desconly from above) and close divs isset($desconly) ? $repl .= TikiLib::lib("parser")->parse_data($desconly) : ''; With that change, you could put wiki code into the desc parameter, and it will be wiki parsed (I even tried using the mouseover plugin in the desc and it worked fine). Another option is to make your own version of the img plugin and make the above changes to that, however there are some complications because every function in every one of the plugins has to have a unique name. If the functions don't all have unique names, you will find some things in your Tiki stop working. And the img plugin has 2 other function definitions within it. Those other 2 functions would have to be renamed so they are unique from their counterparts in the original img plugin, and the 3 lines of code that call those functions would have to be changed to use the new names. Tom
Posted by Enorazza 21 Mar 2017 12:23 GMT-0000 posts: 15 Really thank you Tom, it was easy with your help!! I never want to modify a system file if I can work around the issue. So I created a new plugin, imgwiki, which allows wiki markup in the desc field. I needed just to add some links, no actual need for the unsafe HTML. I removed the two functions at the end of the file (getMetadataArray and getMetaField) instead of renaming them, cause they are loaded by the img plugin anyway. One thing I had to add also in my Javascript file, since there was an error when clicking on the image in edit mode (popup won't show): Copy to clipboardtiki_plugins.imgwiki = {"name":"Image","documentation":"PluginImg","description":"Display one or more custom formatted images","prefs":["wikiplugin_img"],"iconname":"image","tags":["basic"],"introduced":3,"params":{"type":{"required":true,"name":"Image Source","description":"Choose where to get the image from","since":"11.0","doctype":"id","default":"","filter":"word","options":[{"text":"Select an option","value":""},{"text":"An image in the file galleries","value":"fileId"},{"text":"An image attached to a wiki page","value":"attId"},{"text":"An image anywhere on the Internet","value":"src"},{"text":"All the images in a file gallery","value":"fgalId"},{"text":"One random image from a file gallery","value":"randomGalleryId"}]},"fileId":{"required":true,"name":"File ID","type":"image","area":"fgal_picker_id","description":"Numeric ID of an image in a file gallery (or a comma- or <code>|<\/code>-separated list of IDs).","since":"4.0","doctype":"id","filter":"text","default":"","accepted":"Valid file IDs separated by commas or |","parent":{"name":"type","value":"fileId"},"profile_reference":"file"},"id":{"required":true,"name":"Image ID","description":"Numeric ID of an image in an image gallery (or a comma- or <code>|<\/code>-separated list of IDs).","since":"4.0","doctype":"id","filter":"text","advanced":true,"accepted":"Valid image IDs separated by commas or |","default":"","parent":{"name":"type","value":"id"}},"src":{"required":true,"name":"Image Source","description":"Full URL to the image to display.","since":"3.0","doctype":"id","filter":"url","default":"","parent":{"name":"type","value":"src"}},"randomGalleryId":{"required":true,"name":"Gallery ID","description":"Numeric ID of a file gallery. Displays a random image from that gallery.","since":"5.0","doctype":"id","filter":"digits","advanced":true,"default":"","parent":{"name":"type","value":"randomGalleryId"}},"fgalId":{"required":true,"name":"File Gallery ID","description":"Numeric ID of a file gallery. Displays all images from that gallery.","since":"8.0","doctype":"id","filter":"digits","advanced":true,"default":"","parent":{"name":"type","value":"fgalId"},"profile_reference":"file_gallery"},"attId":{"required":true,"name":"Attachment ID","description":"Numeric ID of an image attached to a wiki page (or a comma- or <code>|<\/code>-separated list).","since":"4.0","doctype":"id","filter":"text","accepted":"Valid attachment IDs separated by commas or |","default":"","parent":{"name":"type","value":"attId"}},"thumb":{"required":false,"name":"Thumbnail","description":"Makes the image a thumbnail with various options.","since":"4.0","doctype":"link","filter":"alpha","default":"","options":[{"text":"None","value":""},{"text":"Simple - links to full size image on a new page","value":"y"},{"text":"\"Lightbox\" - enlarges in an overlay box when clicked","value":"box"},{"text":"Mouseover - enlarges in a popup when moused over","value":"mouseover"},{"text":"Mouseover (sticky)","value":"mousesticky"},{"text":"Popup - enlarges in a separate window","value":"popup"},{"text":"Download","value":"download"},{"text":"Zoombox - enlarges in a popup with a zoom option","value":"zoombox"}]},"link":{"required":false,"name":"Link","description":"Causes the image to be a link to this address. Overrides <code>thumb<\/code> unless <code>thumb<\/code> is\n\t\t\t\t\tset to <code>mouseover<\/code> or <code>mousesticky<\/code>","since":"3.0","doctype":"link","filter":"url","default":""},"height":{"required":false,"name":"Image Height","description":"Height in pixels or percent. Syntax: <code>100<\/code> or <code>100px<\/code> means 100 pixels;\n\t\t\t\t\t<code>50%<\/code> means 50 percent.","since":"3.0","doctype":"size","filter":"text","default":""},"width":{"required":false,"name":"Image Width","description":"Width in pixels or percent. Syntax: <code>100<\/code> or <code>100px<\/code> means 100 pixels;\n\t\t\t\t\t<code>50%<\/code> means 50 percent.","since":"3.0","doctype":"size","filter":"text","default":""},"max":{"required":false,"name":"Maximum Size","description":"Maximum height or width in pixels (largest dimension is scaled). Overrides height\n\t\t\t\t\tand width settings.","since":"4.0","doctype":"size","filter":"digits","default":""},"desc":{"required":false,"name":"Caption","since":"3.0","doctype":"text","filter":"text","description":"Image caption. Use <code>name<\/code> or <code>desc<\/code> or <code>namedesc<\/code> for Tiki name and\n\t\t\t\t\tdescription properties, <code>idesc<\/code> or <code>ititle<\/code> for metadata from the image itself, otherwise\n\t\t\t\t\tenter your own description.","default":""},"alt":{"required":false,"name":"Alternate Text","filter":"text","description":"Alternate text that displays when image does not load. Set to \"Image\" by default.","since":"3.0","doctype":"text","default":"Image"},"responsive":{"required":false,"name":"Responsive Image","filter":"alpha","description":"Determines whether the image will resize itself to the screen width using the <code>img-responsive<\/code> class.","since":"14.0","doctype":"style","advanced":false,"default":"","options":[{"text":"Default","value":""},{"text":"Yes","value":"y"},{"text":"No","value":"n"}]},"sort_mode":{"required":false,"name":"Sort Mode","description":"Sort by database table field name, ascending or descending. Examples:\n\t\t\t\t\t<code>fileId_asc<\/code> or <code>name_desc<\/code>.","filter":"word","accepted":"<code>fieldname_asc<\/code> or <code>fieldname_desc<\/code> with actual database field name in place of\n\t\t\t\t\t<code>fieldname<\/code>.","default":"created_desc","since":"8.0","doctype":"id","advanced":true,"options":[{"text":"","value":""},{"text":"Random","value":"random"},{"text":"Created Ascending","value":"created_asc"},{"text":"Created Descending","value":"created_desc"},{"text":"Name Ascending","value":"name_asc"},{"text":"Name Descending","value":"name_desc"},{"text":"File Name Ascending","value":"filename_asc"},{"text":"File Name Descending","value":"filename_desc"},{"text":"Description Ascending","value":"description_asc"},{"text":"Description Descending","value":"description_desc"},{"text":"Comment Ascending","value":"comment_asc"},{"text":"Comment Descending","value":"comment_desc"},{"text":"Hits Ascending","value":"hits_asc"},{"text":"Hits Descending","value":"hits_desc"},{"text":"Max Hits Ascending","value":"maxhits_asc"},{"text":"Max Hits Descending","value":"maxhits_desc"},{"text":"File Size Ascending","value":"filesize_asc"},{"text":"File Size Descending","value":"filesize_desc"},{"text":"File Type Ascending","value":"filetype_asc"},{"text":"File Type Descending","value":"filetype_desc"},{"text":"User Ascending","value":"user_asc"},{"text":"User Descending","value":"user_desc"},{"text":"Author Ascending","value":"author_asc"},{"text":"Author Descending","value":"author_desc"},{"text":"Locked By Ascending","value":"lockedby_asc"},{"text":"Locked By Descending","value":"lockedby_desc"},{"text":"Last modified User Ascending","value":"lastModifUser_asc"},{"text":"Last modified User Descending","value":"lastModifUser_desc"},{"text":"Last modified Date Ascending","value":"lastModif_asc"},{"text":"Last modified Date Descending","value":"lastModif_desc"},{"text":"Last Download Ascending","value":"lastDownload_asc"},{"text":"Last Download Descending","value":"lastDownload_desc"},{"text":"Delete After Ascending","value":"deleteAfter_asc"},{"text":"Delete After Descending","value":"deleteAfter_desc"},{"text":"Votes Ascending","value":"votes_asc"},{"text":"Votes Descending","value":"votes_desc"},{"text":"Points Ascending","value":"points_asc"},{"text":"Points Descending","value":"points_desc"},{"text":"Archive ID Ascending","value":"archiveId_asc"},{"text":"Archive ID Descending","value":"archiveId_desc"}]},"button":{"required":false,"name":"Enlarge Button","description":"Adds an enlarge button (magnifying glass icon) below the image for use together\n\t\t\t\t\twith <code>thumb<\/code>. Follows <code>thumb<\/code> settings unless <code>thumb<\/code> is set to <code>mouseover<\/code> or <code>mousesticky<\/code>\n\t\t\t\t\t(or overridden by <code>link<\/code>), otherwise button settings are followed, operating as described above\n\t\t\t\t\tfor <code>thumb<\/code>","since":"4.0","doctype":"link","filter":"alpha","default":"","advanced":true,"options":[{"text":"None","value":""},{"text":"Yes","value":"y"},{"text":"Popup","value":"popup"},{"text":"Browse","value":"browse"},{"text":"Browse Popup","value":"browsepopup"},{"text":"Download","value":"download"}]},"rel":{"required":false,"name":"Link Relation","since":"3.0","doctype":"link","filter":"text","description":"Specifies the relationship between the link image and the target. Enter <code>box<\/code> to\n\t\t\t\t\tcause the image to enlarge in a popup when clicked.","advanced":true,"default":""},"usemap":{"required":false,"name":"Image Map","filter":"text","description":"Name of the image map to use for the image.","since":"3.0","doctype":"link","advanced":true,"default":""},"hspace":{"required":false,"name":"Horizontal spacing","description":"Horizontal spacing, in pixels, applied to both sides of the image. It may be necessary to use this legacy type of styling if the legacyalign parameter needs to be used for cases where float does not work eg newsletters viewed as an email.","since":"15.0","doctype":"size","filter":"digits","advanced":true,"default":""},"vspace":{"required":false,"name":"Vertical spacing","description":"Vertical spacing, in pixels, applied to top and bottom of the image. It may be necessary to use this legacy type of styling if the legacyalign parameter needs to be used for cases where float does not work eg newsletters viewed as an email.","since":"15.0","doctype":"size","filter":"digits","advanced":true,"default":""},"legacyalign":{"required":false,"name":"Align image using legacy align tag","description":"Aligns the image itself using the legacy align tag for cases where float does not work eg newsletters viewed as an email. Can be used in addition to the imalign parameter for cases where web pages are viewed by modern browsers and are used by the Newsletter function to send a web page as an email","since":"15.0","filter":"alpha","advanced":true,"default":"","options":[{"text":"None","value":""},{"text":"Right","value":"right"},{"text":"Left","value":"left"},{"text":"Center","value":"center"}]},"imalign":{"required":false,"name":"Align Image","description":"Aligns the image itself. Overridden by any alignment settings in <code>styleimage<\/code>.\n\t\t\t\t\tIf <code>stylebox<\/code> or <code>desc<\/code> are also set, then image only aligns inside the box - use <code>stylebox<\/code>\n\t\t\t\t\tin this case to align the box on the page.","since":"3.0","doctype":"style","filter":"alpha","advanced":true,"default":"","options":[{"text":"None","value":""},{"text":"Right","value":"right"},{"text":"Left","value":"left"},{"text":"Center","value":"center"}]},"styleimage":{"required":false,"name":"Image Style","description":"Enter <code>border<\/code> to place a dark gray border around the image. Otherwise enter\n\t\t\t\t\tCSS styling syntax for other style effects.","since":"4.0","doctype":"style","filter":"text","advanced":true,"default":""},"align":{"required":false,"name":"Align Image Block","description":"Aligns a block around the image (including the image). Image is no longer inline\n\t\t\t\t\twhen this setting is used. Can be overridden by any alignment settings in <code>stylebox<\/code>.","since":"3.0","doctype":"style","filter":"alpha","advanced":true,"default":"","options":[{"text":"None","value":""},{"text":"Right","value":"right"},{"text":"Left","value":"left"},{"text":"Center","value":"center"}]},"stylebox":{"required":false,"name":"Image Block Style","filter":"text","description":"Enter <code>border<\/code> to place a dark gray border around the image. Otherwise enter\n\t\t\t\t\tCSS styling syntax for other style effects.","since":"4.0","doctype":"style","advanced":true,"default":""},"styledesc":{"required":false,"name":"Description Style","since":"4.0","doctype":"text","filter":"text","description":"Enter <code>right<\/code> or <code>left<\/code> to align text accordingly. Otherwise enter CSS styling\n\t\t\t\t\tsyntax for other style effects.","advanced":true,"default":""},"block":{"required":false,"name":"Wrapping","description":"Control how other items wrap around the image.","since":"4.0","doctype":"style","filter":"alpha","advanced":true,"default":"","options":[{"text":"None","value":""},{"text":"Top","value":"top"},{"text":"Bottom","value":"bottom"},{"text":"Both","value":"both"}]},"class":{"required":false,"name":"CSS Class","filter":"text","description":"CSS class to apply to the image. <code>class=\"fixedSize\"<\/code> prevents the image from being\n\t\t\t\t\tautomatically resized and relocated in Tiki SlideShows","since":"3.0","doctype":"style","advanced":true,"default":""},"title":{"required":false,"name":"Link Title","filter":"text","description":"This text will appear in a tool tip when the image is moused over. If this is\n\t\t\t\t\tnot set, the <code>desc<\/code> setting will be used. Use <code>name<\/code> or <code>desc<\/code> or <code>namedesc<\/code> for Tiki name\n\t\t\t\t\tand description properties","since":"3.0","doctype":"text","advanced":true,"default":""},"metadata":{"required":false,"name":"Metadata","filter":"text","description":"Display the image metadata (IPTC, EXIF and XMP information).","since":"8.0","doctype":"text","default":"","advanced":true,"options":[{"text":"None","value":""},{"text":"View","value":"view"}]},"default":{"required":false,"name":"Default Settings","description":"Default configuration settings (usually set by admin in the source code or\n\t\t\t\t\tthrough Plugin Alias).","since":"4.1","doctype":"deprecated","advanced":true,"default":""},"mandatory":{"required":false,"name":"Mandatory Setting","description":"Mandatory configuration settings (usually set by admin in the source code or\n\t\t\t\t\tthrough Plugin Alias).","since":"4.1","doctype":"deprecated","advanced":true,"default":""}}};
