Is it possible to just get the URL of the image in an image extrafield?

I have a use-case where it'll make the client's life easier to be able to select an image using image field on the backend, but the formatting on the front end needs changes to the img element. It'd be better to simply output the image URL and construct the rest of the img element in the template.

Is it possible?

Regards, Kelsey

I found the answer for this here, however the regex used to remove the trailing info isn't great:

getk2.org/documentation/tips-a-tricks/1129-extra-field-image-type-as-link

Here's my solution:

<?php
$topicVid = $this->item->extraFields->TopicSummaryVideoImage->value;
$topicVid = preg_replace('/<img src="/',"",$topicVid);
$topicVid = preg_replace('/" alt="[a-z,A-z,\s]+"\s\/\>/',"",$topicVid);
//echo '<a href="' . $topicVid . "TextOfLink" . "</a>" ;
//echo '<img class="youtube img-responsive" src="' . $topicVid . "TextOfLink" . ">" ;
?>
<img class="youtube img-responsive" rel="<?php echo $this->item->extraFields->TopicSummaryVideoID->value; ?>" src="<?php echo $topicVid; ?>" />

If you want to use the src in let's say a css background, you can use JS as well.

The image extrafield is very useful from the backend, as it's easy for clients to select the image they require.

The output is very rigid however.

I still wanted an img element, but as you can see from my example, I wanted to extend the img element attributes to make use of the Bootstrap Modal YouTube library.

You can use the method you found or you can add classes using jQuery's addClass() function.

True, but would I have been able to add the rel='' attribute as well? I could have also done it with ReReplacer, but I was finding scoping to be an issue - adding it specifically to just the specific images I was after was proving difficult and I wanted a foolproof method of doing it just in the override.

I've seen some discussion about introducing a 'file' type of extra field that would allow user selection in the editor, but present as a plain URL on output. That would be massively useful.

Sure, the attr() function can be used in jQuery or you add it in the preg_replace funtion.
Both of these methods should be done in the overrides.
Since the preg_replace provides you with a clean url you can store it in a variable to echo it using a different markup if you do not want to use JS.

Nice! Thank you!

You 're welcome Kelsey :)