Jump to content

[Solved] Adding a label to image field description input


LMD
 Share

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"
Link to comment
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 :-)

 

Link to comment
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.

Link to comment
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...

Link to comment
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? 

 

 

Link to comment
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
Link to comment
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
 Share

×
×
  • Create New...