Leaderboard

It mostly doesn't matter, you get the same API variables independent of the method. That said, I would suggest the following for readability: $this: Use only inside of classes extending \ProcessWire\Wire. It appears that $this is also available in template files as a reference to the current wire instance, but as you said, this is a somewhat confusing and unconventional usage given that you're not actually inside a class. $wire: Use inside regular PHP template files (or if you want to use a different API variable like $page, $pages, $input, et c. use that one directly). wire(): Use inside functions (not class methods) so you don't have to pass $wire or $this to the closure.

Welcome @venkatesham. In case @bernhard's linked profile doesn't work as expected you want to try this one instead: Skyscraper Profile for ProcessWire 3.x

More information here: https://processwire.com/docs/start/api-access/

Makes sense. Only concern I have is that the field configuration options will grow to an extent which might overwhelm the user. This is why I had decided to make this a standalone fieldtype and leave the ImagePicker for picking from folders. I will contemplate some more and maybe combine the two.

I guess I was thinking that you could combine both modules - just because the interface elements are so similar and thought it might be less maintenance for you. If a directory path is supplied in the field settings, then the images from that path could be added to a image selection section above or below the collapsed page sections. If none is specified, then only the pages would be shown. Similarly, it could be path only if no page / image field is specified in the field settings.

Sure... tell more about you, your company, your sites, your needs... and there will be plenty of talented ProcessWire developers that like to help you.

Thanks, that helped! Here's what worked in the end. $allFields = $page->getFields(); foreach ($allFields as $related){ if (strpos($related, 'related') === 0) { //get just the fields that start with related foreach ($related as $tag){ echo "<a href='$tag->url'>$tag->title</a>"; } } }

I guess that's why I was thinking if the module was simply named "ImagePicker" - then it could allow picking from disk path, pre-defined pages, or the current page - would that model / approach make sense?

I've spent the last while experimenting with srcset implementation - and PageimageSrcset is the result: PageimageSrcset Provides configurable srcset and sizes properties/methods for Pageimage. Overview The main purpose of this module is to make srcset implementation as simple as possible in your template code. It does not handle images rendered in CKEditor or similar fields. For an introduction to srcset and sizes, please read this Mozilla article about responsive images. Pageimage::srcset() // The property, which uses the set rules in the module configuration $srcset = $image->srcset; // A method call, using a set rules string // Delimiting with a newline (\n) would also work, but not as readable $srcset = $image->srcset("320, 480, 640x480 768w, 1240, 2048 2x"); // The same as above but using an indexed/sequential array $srcset = $image->srcset([ "320", "480", "640x480 768w", "1240", "2048 2x", ]); // The same as above but using an associative array // No rule checking is performed $srcset = $image->srcset([ "320w" => [320], "480w" => [480], "768w" => [640, 480], "1240w" => [1240], "2x" => [2048], ]); // Use the default set rules with portrait images generated for mobile/tablet devices $srcset = $image->srcset(true); // Return the srcset using all arguments $srcset = $image->srcset("320, 480, 640x480 768w, 1240, 2048 2x", [ "portrait" => "320, 640", ]); // The set rules above are a demonstration, not a recommendation! Image variations are only created for set rules which require a smaller image than the Pageimage itself. On large sites this may still result in a lot of images being generated. If you have limited storage, please use this module wisely. Portrait Mode In many situations, the ratio of the image does not need to change at different screen sizes. However, images that cover the entire viewport are an exception to this and are often the ones that benefit most from srcset implementation. The main problem with cover images is that they need to display landscape on desktop devices and portrait when this orientation is used on mobile and tablet devices. You can automatically generate portrait images by enabling portrait mode. It is recommended that you use this in combination with Pageimage::focus() so that the portrait variations retain the correct subject. The generated variations are HiDPI/Retina versions. Their height is determined by the portrait ratio (e.g. 9:16). Variations are always generated, regardless of whether the original image is smaller. Upscaling is disabled though, so you may find that some variations are actually smaller than they say they are in their filename. The sizes attribute should be used when portrait mode is enabled. Pageimage::sizes will return (orientation: portrait) and (max-width: {maxWidth}px) 50vw by default, which handles the use of these images for retina devices. The maximum width used in this rule is the largest set width. Pageimage::sizes() There is no option to configure default sizes because in most cases 100vw is all you need, and you do not need to output this anyway as it is inferred when using the srcset attribute. You can use the method for custom sizes though: // The property $sizes = $image->sizes; // Returns 100vw in most cases // Returns '(orientation: portrait) and (max-width: {maxWidth}px)50vw' if portrait mode enabled // A method call, using a mixture of integer widths and media query rules // Integer widths are treated as a min-width media query rule $sizes = $image->sizes([ 480 => 50, "(orientation: portrait) and (max-width: 640px)" => 100, 960 => 25, ]); // (min-width: 480px) 50vw, (orientation: portrait) and (max-width: 640px) 100vw, (min-width: 960px) 25vw // Determine widths by UIkit 'child-width' classes $sizes = $image->sizes([ "uk-child-width-1-2@s", "uk-child-width-1-3@l", ]); // (min-width: 640px) 50vw, (min-width: 1200px) 33.33vw // Determine widths by UIkit 'width' classes $sizes = $image->sizes([ "uk-width-1-2@m", "uk-width-1-3@xl", ]); // (min-width: 960px) 50vw, (min-width: 1600px) 33.33vw // Return the portrait size rule $sizes = $image->sizes(true); // (orientation: portrait) and (max-width: {maxWidth}px) 50vw // The arguments above are a demonstration, not a recommendation! Pageimage::render() This module extends the options available to this method with: srcset: When the module is installed, this will always be added, unless set to false. Any values in the formats described above can be passed. sizes: Only used if specified. Any values in the formats described above can be passed. uk-img: If passed, as either true or as a valid uk-img value, then this attribute will be added. The srcset attribute will also become data-srcset. Please refer to the API Reference for more information about this method. // Render an image using the default set rules echo $image->render(); // <img src='image.jpg' alt='' srcset='{default set rules}'> // Render an image using custom set rules echo $image->render(["srcset" => "480, 1240x640"]); // <img src='image.jpg' alt='' srcset='image.480x0-srcset.jpg 480w, image.1240x640-srcset.jpg 1240w'> // Render an image using custom set rules and sizes // Also use the `markup` argument echo $image->render("<img class='image' src='{url}' alt='Image'>", [ "srcset" => "480, 1240", "sizes" => [1240 => 50], ]); // <img class='image' src='image.jpg' alt='Image' srcset='image.480x0-srcset.jpg 480w, image.1240x640-srcset.jpg 1240w' sizes='(min-width: 1240px) 50vw'> // Render an image using custom set rules and sizes // Enable uk-img echo $image->render([ "srcset" => "480, 1240", "sizes" => ["uk-child-width-1-2@m"], "uk-img" => true, ]); // <img src='image.jpg' alt='' data-uk-img data-srcset='image.480x0-srcset.jpg 480w, image.1240x640-srcset.jpg 1240w' sizes='(min-width: 960px) 50vw'> // Render an image using portrait mode // Default rule sets used: 320, 640, 768, 1024, 1366, 1600 // Portrait widths used: 320, 640, 768 // Original image is 1000px wide // Not possible to use portrait mode and custom sets or portrait widths in render() // Sizes attribute automatically added echo $image->render(["srcset" => true]); // <img src='image.jpg' alt='' srcset='image.320x569-srcset-hidpi.jpg 320w, image.640x1138-srcset-hidpi.jpg 640w, image.768x1365-srcset-hidpi.jpg 768w, image.jpg 1024w' sizes='(orientation: portrait) and (max-width: 768px) 50vw'> Configuration To configure this module, go to Modules > Configure > PageimageSrcset. Set Rules These are the default set rules that will be used when none are specified, e.g. when calling the property: $image->srcset. Each set rule should be entered on a new line, in the format {width}x{height} {inherentwidth}w|{resolution}x. Not all arguments are required - you will probably find that specifying the width is sufficient for most cases. Here's a few examples of valid set rules and the sets they generate: Set Rule Set Generated Arguments Used 320 image.320x0-srcset.jpg 320w {width} 480x540 image.480x540-srcset.jpg 480w {width}x{height} 640x480 768w image.640x480-srcset.jpg 768w {width}x{height} {inherentwidth}w 2048 2x image.2048x0-srcset.jpg 2x {width} {resolution}x How you configure your rules is dependent on the needs of the site you are developing; there are no prescriptive rules that will meet the needs of most situations. This article gives a good overview of some of the things to consider. When you save your rules, a preview of the sets generated and an equivalent method call will be displayed to the right. Invalid rules will not be used, and you will be notified of this. Portrait Mode Set Widths A comma limited list of widths to create HiDPI/Retina portrait variations for. Crop Ratio The portrait ratio that should be used to crop the image. The default of 9:16 should be fine for most circumstances as this is the standard portrait ratio of most devices. However, you can specify something different if you want. If you add a landscape ratio, it will be switched to portrait when used. Any crops in the set rules ({width}x{height}) are ignored for portrait mode variations as this ratio is used instead. UIkit Widths If your website theme uses UIkit, you can pass an array of UIkit width classes to Pageimage::sizes to be converted to sizes. The values stored here are used to do this. If you have customised the breakpoints on your theme, you should also customise them here. Please note that only 1- widths are evaluated by Pageimage::sizes, e.g. uk-width-2-3 will not work. Remove Variations If checked, the image variations generated by this module are cleared on Submit. On large sites, this may take a while. It makes sense to run this after you have made changes to the set rules. Image Suffix You will see this field when Remove Variations is checked. The value is appended to the name of the images generated by this module and is used to identify variations. You should not encounter any issues with the default suffix, but if you find that it conflicts with any other functionality on your site, you can set a custom suffix instead. Debug Mode When this is enabled, a range of information is logged to pageimage-srcset. PageimageSrcsetDebug.js is also added to the <head> of your HTML pages. This will console.log a range of information about the images and nodes using srcset on your page after a window.onresize event is triggered. This can assist you in debugging your implementation. The browser will always use the highest resolution image it has loaded or has cached. You may need to disable browser caching to determine whether your set rules are working, and it makes sense to work from a small screen size and up. If you do it the other way, the browser is going to continue to use the higher resolution image it loaded first. UIkit Features This module implements some additional features that are tailored towards UIkit being used as the front-end theme framework, but this is not required to use the module. Installation Download the zip file at Github or clone the repo into your site/modules directory. If you downloaded the zip file, extract it in your sites/modules directory. In your admin, go to Modules > Refresh, then Modules > New, then click on the Install button for this module. ProcessWire >= 3.0.123 is required to use this module.

JqueryFileUpload This module is a ProcessWire implementation of the awesome Blueimp jQuery File Upload plugin. Server-side, the module provides a custom uploads' handler enabling you to perform various tasks with ease. The module is an interface of the feature-rich Ajax File Uploads widget provided by the jQuery File Upload plugin. The module is completely customisable and can be used both in the front- and backend (e.g. in a third-party module). Please read the README carefully and completely before using the module Release Status: Stable. Module Download: http://modules.processwire.com/modules/jquery-file-upload/ Issues tracker Project page: GitHub Security The module has been written with security in mind and makes no assumptions about any client-side validation. Instead, the module provides robust server-side validation of uploaded files. Server-side, no Ajax requests are honoured unless specifically set via configurable options server-side. This means that client-side requests to upload, delete and list files are not executed unless allowed server-side. By default, files are uploaded to a non-web-accessible (system) folder and files previously uploaded on the server are not sent back for display unless that setting is enabled. However, developers are still strongly advised to implement any other feasible measures to guard against malicious uploads, especially if allowing frontend uploading. For instance, developers can use native ProcessWire checks to limit access to the widget (e.g. only allowing uploads by registered/logged-in users). Demo A short video demo can be found here (and below )(CSS is WIP! ). In the backend, you can see it in action within the (upcoming) module Media Manager Features Fast Ajax uploads. Client and server-side validation. Client-side image resizing (highly configurable options). Beautiful touch-responsive image gallery preview. Audio and video previews pre-upload. Chunked and resumable file uploads (currently client-side only; server-side handling planned). Drag and drop support. Copy and paste support (Google Chrome only). Progress bars. Cross-domain uploads. Single or multiple uploads. Delete uploaded files. Documentation On GitHub. Have a look at the long list of available options. License Released under the MIT license @Credits: Sebastian Tschan @Thanks: Pete and BernhardB for the idea. Please test and provide feedback. Thanks!

After forgetting the class name of the wonderful AdminPageFieldEditLinks module for what feels like the 100th time I decided I needed to give my failing memory a helping hand... Autocomplete Module Class Name Provides class name autocomplete suggestions for the "Add Module From Directory" and "Add Module From URL" fields at Modules > New. Requires ProcessWire >= v3.0.16. Screencast Installation Install the Autocomplete Module Class Name module. Configuration Add Module From Directory Choose the type of autocomplete suggestions list: "Module class names from directory" or "Custom list of module class names". The latter could be useful if you regularly install some modules and would prefer a shorter list of autocomplete suggestions. The list of class names in the modules directory is generated when the Autocomplete Module Class Name module is installed. It doesn't update automatically (because the retrieval of the class names is quite slow), but you can use the button underneath when you want to retrieve an updated list of class names from the directory. Add Module From URL If you want to see autocomplete suggestions for the "Add Module From URL" field then enter them in the following format: [autocomplete suggestion] > [module ZIP url] Example: RepeaterImages > https://github.com/Toutouwai/RepeaterImages/archive/master.zip Awesomplete options The "fuzzy search" option uses custom filter and item functions for Awesomplete so that the characters you type just have to exist in the autocomplete suggestion item and occur after preceding matches but do not need to be contiguous. Uncheck this option if you prefer the standard Awesomplete matching. Custom settings for Awesomplete can be entered in the "Awesomplete options" field if needed. See the Awesomplete documentation for more information. https://github.com/Toutouwai/AutocompleteModuleClassName https://modules.processwire.com/modules/autocomplete-module-class-name/

Hello all. I am studying this CMS and I would like to ask you a question. Is this setup good? - Blue pages are pages that have a template associated with them. - Orange page is a hidden page where i store generic website data usefull for header and footer area. Is this correct? question 2: if you want to create a rich content like WP-visual composer or like Wp-gutenberg how can I do? Danke!

Hello @gebeer Great work, and thank you for two much needed modules! I second the idea to merge both modules into one killer-module, if it is possible? (the name ImagePicker would be a good and suitable name for the combined module). But this is of course for you to decide ?

It’s hard to tell when the first release version will be ready. I’m currently struggling with the custom taxes provider which will allow a very flexible VAT handling for all countries worldwide. I’m in contact with the Snipcart team, because I’m having problems with shipping taxes ... When the taxes provider is finished, the biggest part is done and I should be able to release a first beta. And thanks for the hint with the donation button! ?

@rick, @d'Hinnisdaël, @cb2004, @szabesz Thanks for your input! So the coming PW master version will be the minimum required by SnipWire. This will make things definitely easier for me...

BTW, when can we expect that to happen? Sounds like sooner than the end of December maybe? Is it going to be the first production ready version? Thanks for sharing all your hard work, and do not forget to ship it with a "Donation button".

+1 As for the config being confusing / overwhelming, it could be solved via step-by-step guides in the readme file, especially if it has screenshots to showcase all three setups.

Well, that's just weird, and certainly not typical for PW at all (quite the opposite). Did you check the browser console (JS errors, network panel) for hints? Apache logs? PW logs? Is this one of the default PW installations / profiles, or did you already customize a lot? I guess it's some weirdness in the server setup, or DB causing the lag. Perhaps you need to adjust your .htaccess file? Is it slow in the frontend and in the backend?

Hello and thanks for reply ? @MilenKo thanks for idea about html. According to your idea the body_html field becomes an element content. Sounds good I want to try ? For a diagram visualization simpe it is https://www.draw.io/ You can add this "app" to your google drive if yuo want ?

Thank you sooo much for this!! Truly super helpful, I've been trying to implement that precise script for two days, since I didn't know you had already done it, and failed! ? thanks! ? I do however have a few questions O:) I've been playing around with the config options but can't quite get the script to do what I want, I currently have: $options = array( 'showUploaded' => true, 'uploadsDeletable' => true, 'showUploaded' => true, 'setMaxFiles' => 9999, 'setOverwrite' => false, ); But after the upload the script doens't show the files I uploaded, Nor do I see links to the files opening in a Gallery. Also I've not managed to upload more than 50 files at once, the rest of the upload seems to just get dropped. What settings would I have to use to: - See the images already in the folder - See the images after uploading with link to open them in a gallery? - Actually upload 9999 files? Thanks in advance! ?

Completely agree. The module will only profit from you enjoying working on it, so go easy on yourself and make use of available core features where necessary. Besides, ProcessWire is ridiculously easy to keep updated, so I don't feel like you're leaving anybody behind.

I would say that this answers your question ? Don't make more work for yourself, both in coding and in support.

Oops, sorry, totally slipped my mind! I'll have a look ?.

Aah. I see what is happening. It isn't strange, actually, but working as expected. When output formatting is off, the value of an image or file field is always a WireArray irrespective of the field's maximum files allowed or the setting in formatted value. There is a note on the field. Please see the screenshot on this post. The reason you didn't need first() in the frontend is because output formatting is on there. In the backend, where your rtm external file is called, output formatting is off, hence the need for first(). You can test this by using TracyDebugger to dump the results of the image field in both your external rtm file and in the template file used in the frontend. You should see the backend dump returning Pageimages and the frontend one Pageimage as illustrated below. bd(get_class($page->image)); Backend dump Frontend dump

Hi @venkatesham, welcome to the forum, not sure, but I think it is this one: https://github.com/ryancramerdesign/skyscrapers2

This could also solve my request of adding images directly to that page ?

Hi @Noboru I have a clue what's causing this problem. I need a little time. I'll contact you when I have fixed that. In the meantime you could comment out the following lines in file SnipWire.module.php (should be line 96-98) $this->addHookAfter('Pages::saved', $this, 'publishSnipcartProduct'); $this->addHookAfter('Pages::unpublished', $this, 'unpublishSnipcartProduct'); $this->addHookAfter('Pages::trashed', $this, 'unpublishSnipcartProduct'); -- Martin

Looking forward to it. Hoping I can forgo using SnipCart for projects.

Another thought for you - what about the option to select an image from an images field on the current page? I know sometimes I ask users to sort images so that the featured image they want is the first one in the list, or get them to tag an image with "featured", or some other approach. Being able to select an image from the current page with this field would be an awesome way of handling this.

Hi @3fingers, thank you. As mentioned, it's not an out-of-the-box solution. Read the Dropbox API doco. Maybe: Dropbox app/yourclientfolder/subfolder-by-pw-user ? Or, List files in the Dropbox folder as checkbox options in the client's private page admin area- tick for each needed by user? Or, As you mentioned, copy/paste links in a repeater on the client's page There are lots of options. Think of these API's as toolboxes that allow you to create the scenario that suits your client's requirements.

@szabesz had already mentioned it in this thread. But I think it is worth picking up again. I recently switched to https://vscodium.com/ and it is working absolutely great. It removes Microsofts branding and, more importantly usage telemetry. It is available for all platforms. Only drawback I could see is not having automated one-click updates. I'm all for open source and privacy. Microsoft's VS Code is based on the same codebase as VSCodium only MS adds their branding and collects lots of data because, well, that is just what they love to do. Being a Linux user for more than 15 years now, I really appreciate MS releasing this phantastic editor to the community. At least they are giving back a fraction of what they earned over the last decades with their half baked software which they make their beta testers pay a lot of money for. Ingenious concept, though...

@Tom. Interesting thread! I do not use any FrontendFramework if I don't have to, (only jQuery). I more and more try to understand the basics and don't want to learn frameworks. Additional to that, I can copy paste the most from @wbmnfktr post, because my setup is as follows: ? My boilerplate for new projects: Starting with one out of 3-4 personal PW-profiles, that are more or less without content, but with special configurations and modules my personal SCSS Skeleton jQuery and / or some personal JS-snippets Tools I use and need: git my own Preprocessor- and Minifier module in PW some code and scss snippets bound to the $config->debug state for developing Tools that may be added on demand: Lazysizes Slick Slider script MixItUp script Thats my tools that give me freedom from things like grunt, gulp, whatever: The first one is my preprocessor and minifier pw module that detects every single file change of js, css, less and scss files (and the @import dependencies) automatic on page load. It can process less & scss and can minify css, js, html. The second one are three little buttons in the top left on frontend pages that can toggle a breakpoint indicator and a hierarchical background color system to identify html elements dimensions and positionings.

UPDATE 2019-11-15 In the last 3 weeks I (nearly) finished the complete order handling for store merchants (ProcessWire backend). This includes the following features: search for orders filter orders extensive overview of all order details download of invoices resend invoices to customers refund amounts to customers ... all right from within your ProcessWire backend! That doesn't sound like much, but it was a good piece of work. ? Here is a short clip to demonstrate the new features:

Snippet for adding a module config class: "Module Config Class": { "prefix": "moduleConfig", "body": [ "class ${YourModule}Config extends ModuleConfig {", " public function getDefaults() {", " return [", " 'fullname' => '',", " ];", " }", " public function getInputfields() {", " \\$inputfields = parent::getInputfields();", " ", " \\$f = \\$this->modules->get('InputfieldText');", " \\$f->attr('name', 'fullname');", " \\$f->label = 'Full Name';", " \\$f->required = true;", " \\$inputfields->add(\\$f);", " ", " return \\$inputfields;", " }", "}", "", ], "description": "Module Config Class" },

That's not only for PW development but if you've never tried the remote development feature of vscode you should definitely check it out! I'm using it for all SSH related stuff now (server administration) and it's been an awesome experience so far. Compared to the console you get a lot of benefits: open any file directly in vscode for editing ( "code foo.txt" will open foo.txt in vscode ) upload files via drag&drop, download via right click add different folders to your workspace (eg you can attach /var/www/vhosts and /etc/apache2) use ctrl+p to quickly search for files use the GUI to quickly search for any text in any files/folders get a full and awesome GIT integration (+GUI) extremely easy setup, just download the extension, add a host (host + user) and it works (using ssh keys) In the left bottom corner you can see that I'm connected to a remote host. Working on it is just as if it was your local machine ? Intelephense does not work, but I develop locally anyhow and for all server administration stuff there is really everything I need.

UPDATE 2019-08-08 The module has made hug steps forward and we are nearing a first beta release version. So for those of you who are interested, I wanted to let you know what happened in the meantime ? The dashboard interface was refined. Currency selector for switching dashboard currency (based on your currency fields) Added dashboard sections for managing Orders, Customers and Products Added a WireTabs interface to easily switch between the different dashboard sections. Orders, Customers and Product-details are opened and edited in ProcessWire Panels Added further properties to SnipCart product anchors like: categories, product dimensions, weight, and so on. Added field selector to SnipWire settings for choosing the desired field (FieldtypePage) to be used for categories handling. Refinded caching behavior. *) *) the proper caching of SnipCart data fetched through their REST API is giving me headaches. I'm still not sure what to cache and how long. For example, think of retrieving the list of purchase orders and creating a pagination. Every single page has to be cached. What if new orders are added when flipping backwards? Then the page numbers could get out of hand. (this only as an example). As SnipCart has relativ slow API response times (about 1.8-2.5 seconds for a request), I'm even thinking about developing a separate background job runner which continuously fetches data from SnipCart and caches it locally. Our SnipWire module could then only use locally stored data only. What needs to be done: As SnipCart has a totally broken presentation of multi currency values in it's dashboard (for example: they simply sum up order values in different currencies!) I need to calculate performance values manually. And this will be a huge job as the data comes from different REST API calls... Orders, Customers and Products detail editors (order status update, setting the order tracking number, add metadata information, creating notifications on the specified orders, ...) Order refunds handling through the SnipWire dashboard Integration of external shipping providers Integration of external taxes providers Subscription handling through the SnipWire dashboard Discount creation and handling through the SnipWire dashboard Documentation, documentation, documentation! and much more ... Here are some fresh screens:

Just to clarify the bit about "putting stuff outside the webroot" for security reasons: This is certainly a nice precaution, but processwire is not using it because there are way to many shared hosters, where it's simply not possible to go outside the webroot. I'd also say that if your webserver is not behaving correctly you've got bigger problems to deal with, so usually just adjusting your .htaccess file should be perfectly fine as well. Especially as your php process still needs to be able to read things even if they're not within the webroot to be able to execute them. There's not really a need for composer for that part as processwire has it's own psr-4 compatible classloader: https://processwire.com/api/ref/class-loader/

Sure - I added 2 files with adminonsteroids: site/template/admin/admin.css site/template/admin/admin.js With these codes I hide following features: Image Cropping Image Variations Image Title change Image Actions Image Change on Drag & Drop /* added ot admin panel sites */ .InputfieldFileActionSelect, .InputfieldImageEdit__info, .InputfieldImageEdit__buttons button { display: none !important; } .InputfieldImageEdit__buttons button.InputfieldImageButtonFocus { display: inline-block !important; } .InputfieldImageEdit__name span { cursor: default; } .InputfieldImageEdit__imagewrapper .detail-upload { visibility: hidden !important; } // added ot admin panel sites $(document).ready(function() { $('.InputfieldImageEdit__name span').removeAttr('contenteditable'); });