Jump to content
LMD

[Solved] Adding a label to image field description input

Recommended Posts

I'm wondering if it is possible to add a label to the description input in image fields (in the admin).

I'm using the module Image Extra, which has labels for each input, but I'd like to add a label to the default 'description' input too. The image below illustrates this:

add_description_label.thumb.png.723e485ceeecd9d20c15bc417a9e4ce6.png

 

If there is no way (no hook?) then, I suppose I could just not use the default description and add a new description input with the Image Extra module.  But I thought I'd ask in case I (or others) ever want to do this without using the module (i.e. just the one input required).

I'm using PW 3.0.98

Thanks.

---
FYI: yes, that is a cat and not a quilt -- this is on my local dev server and I don't have the actual photos yet! She is on a quilt, so it counts... technically.

 

Edited by LMD
Marked "solved"

Share this post


Link to post
Share on other sites

You should have posted it here instead: 

I guess the default image description field is from core.

You could simply hide it via admin CSS. Just make sure you don't hide it for simple image fields where you don't have four desc. fields, but only the default one. So choose your CSS selector wisely :-)

 

Share this post


Link to post
Share on other sites

Well, although I am using Image Extra in my example, I'm talking about the core image description field, which has no label.  I'd like to be able to add a label to it regardless of whether I'm using the Image Extra module.

Share this post


Link to post
Share on other sites

I would probably have used 1 page per image model, and not the image extra; though if it works and you like it, then that's great. I just prefer the wider control afforded by use a page for an image, in terms of exactly the problem you are describing...

Share this post


Link to post
Share on other sites
1 hour ago, LMD said:

I'm talking about the core image description field, which has no label.

Strange. I do see a label:

image-desc.thumb.PNG.46ee6204c808977ee6ac6d1e5a200cba.PNG

This thread is old, but maybe you'll find some inspiration from here? 

 

 

Share this post


Link to post
Share on other sites

@Macrura - ordinarily I would do that, but this is a little freebie site for a group of very non-tech savvy people (a favour for my mother). I feel it would be much easier for them to drag-n-drop their photo gallery pics into a single field, then edit the photo info and press save once.  Even a repeater would be a bit too much.  I will monitor the siutation though and if I think they can deal with it, will switch to a one-page (or repeater item) per photo (thanks to the API, converting will be no problem!).

@dragan - I wonder if you see a label because you are using multi-language? It is definitely not visible in my single language version, althpough it is present, just hidden with CSS ('pw-hidden' class). In fact, if somebody is happy with the default label "Description", then it would be possible to override it in a custom admin CSS file, but I want to change the text itself.

However -- ta daaa! -- after digging around Captain Hook, I have found a simple solution using a hook in ready.php

This is very specific to my needs -- but it could be made more generic.

$pages->addHookAfter('InputfieldImage::renderItem', function (HookEvent $event){
	$obj = $event->object;
	if ($obj->name != 'quilt_images') return; // stop if the field isn't the specific one we want

	$rtn = $event->return; // get the return value

	// The string we are looking for (regex because the unique ID part in the label's 'for' attribute)
	$regex = "/<label for='description_quilt_images_([^']+)' class='detail pw-hidden'>Description<\/label>/i";

	// What we want to replace it with (remove the 'pw-hidden' class and change label text)
	$replacement = "<label for='description_quilt_images_$1' class='detail'>Give a brief description/title for the quilt.</label>";

	// Do the replacement
	$newRtn = preg_replace($regex, $replacement, $rtn);

	$event->return = $newRtn; // replace return value with new string
});

And the result:

add_description_label_2.png.532a12df0ea45f5b12701329816ab935.png

  • Like 1

Share this post


Link to post
Share on other sites

@dragan

On my screen the label "Description" is also not visible.

Screenshot(14).thumb.png.369b5f271d896d9a359aa00cdfbd9a35.png

It is also not visible in the sourcecode. I am using PW dev version 101 (latest).

Same for the tags label if I enable them. Admin Theme UIKit.

Best regards

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By horst
      Hi, on a site I want to disable access to original images and only allow to access thumbnails and watermarked image variations.
      EDIT:
      A good solution for protecting original images can be found a bit down in this thread:
       
      Old content of this initial post:
       
    • By Guy Incognito
      I seem to be running into a repeated fatal error in a fresh PW install version 3.0.148. I can't quite put my finger on the pattern but it seems to be around deleting image fields or removing images from certain image fields.
      This is the trace from the log generated by trying to save a page and delete an image from an image field:
      Fatal Error: Uncaught Error: Cannot access protected property Pageimage::$original in /wire/core/PageimageVariations.php:256 Stack trace: 1. /wire/core/Pageimage.php(1327): PageimageVariations->getInfo() 2. /wire/core/Wire.php(386): Pageimage->___isVariation() 3. /wire/core/WireHooks.php(823): Wire->_callMethod() 4. /wire/core/Wire.php(450): WireHooks->runHooks() 5. /wire/core/Pageimage.php(1369): Wire->__call() 6. /wire/core/Pageimage.php(399): Pageimage->getOriginal() 7. /wire/core/WireData.php(333): Pageimage->get() 8. /wire/core/PageimageVariations.php(256): Pro Line 256 of /wire/core/PageimageVariations.php Earlier in the day I was experimenting with custom fields for images for the first time and kept running into this error, thinking it was me using this feature wrong and not having time to read up I deleted the custom image fields template and went about my business. So now I don't know if I triggered an issue or whether it was never related to the custom image fields in the first place?
      Any ideas?
    • By humanafterall
      I'm using some Custom fields for images: 
      https://processwire.com/blog/posts/pw-3.0.142/#custom-fields-for-files-images

      When I save the page, and return the fields are blank. When I re-add the text to the fields and save again then the fields save as expected.

      I know this is stated as being quite experimental but it's super useful feature I'd love to get working correctly.
      I have fields that are CKEditor fields but have overidden this on the image specific template. I've also tried it with regular text fields and I get the same bug.
      (currently using Processwire 3.0.155)
      **UPDATE**
      I've found this issue is specific to editing on pages using the PageTable fieldtype. The fields are not saving when I save the page in the PageTable.
    • By Robin S
      Displays image tags overlaid on the thumbnail using customisable colours. This makes it easier to see which images have which tags without needing to open the edit pane for individual images or changing to the list view.
      Screenshot

      Usage
      Enable tags for one or more image fields. Install the Image Thumbnail Tags module. Optionally configure colours for any of your tags.
       
      https://github.com/Toutouwai/ImageThumbnailTags
      https://modules.processwire.com/modules/image-thumbnail-tags/
    • By EyeDentify
      Hello dear PW gurus.

      I have stumbled over a strange error that i all of sudden got when trying to upload an image to a images field on a page.
      There where images allready stored in the field that i wanted to keep, but during the upload the error apear and after that all images are gone from the field and i can´t upload any, i just get the error every time.
      I am running ProcessWire 3.0.153 dev.
      Update:
      After looking in the assets folder i find the folder for the page and the image files seems to be there including the ones i tried to upload when the error occured.
      But they don´t show up in the images field in the page editor.
       
      The error reported:
       
      SQLSTATE[01000]: Warning: 1265 Data truncated for column 'ratio' at row 1 And here is a screenshot of the event:

      The TracyDebugger Error reporting:

      I hope you fine folks could point me in a direction.
      But it seems our old pal set_time_limit() is back.

      Regards, EyeDentify
×
×
  • Create New...