Displaying an image and text with a hyperlink in the result.

  • Resolved supersvetodiod

    (@supersvetodiod)


    2 years, 2 months ago

    Hello! a phenomenal plugin. I need a picture and a text with a hyperlink to be displayed after the calculations, depending on the data received. I implemented this using the “html content” field with

    <div class="image-container"></div>
<div class="link-here"></div>

    Then I created two Calculated Fields in which I wrote the code:

    (function(){
var result = fieldname18;
if(result > 0)
{
jQuery('.link-here').html(' look  <a href="https://www......">Click Here</a>');
}
return result;

})()

    and

    

(function(){
    var result = fieldname18, 
        url = '';
    
    jQuery('.image-container').html('');
    
    if(result > 0) url = 'http:///.jpg';
 
    
    if(url != '') jQuery('.image-container').html('<img src="'+url+'">');
    return result;
})()

    As a result, I have an image displayed first and text is written under it.
    Is it possible to implement so that the text is immediately after the image, and not under it?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author codepeople

    (@codepeople)

    2 years, 2 months ago

    Hello @supersvetodiod

    You can generate both image and text as part of the same equation and display them in the preferred format.

    Enter only one tag into the content of the “HTML Content” field:

    <div class="result-here"></div>

    And implement the equation similarly to:

    (function(){
var result = '';
if(0<fieldname18)
{
result = 'This is the text with the link <a href="URL HERE">Click Here</a> and image tag <img src="URL IMAGE HERE" /> some other text if you prefer';
}

jQuery('.result-here').html(result);
return result;
})()

    Best regards.

    Thread Starter supersvetodiod

    (@supersvetodiod)

    2 years, 2 months ago

    The image blurs to the entire area of the screen. What CSS is needed? to put an image in size 150important!

    #fbuilder .image-container img{max-width:10px !important; opacity:1 !important;} – is no work

    Plugin Author codepeople

    (@codepeople)

    2 years, 2 months ago

    Hello @supersvetodiod

    I used the result-here class name in my example instead of image-container. Furthermore, you can enter the style definition directly into the IMG tag:

    (function(){
var result = '';
if(0<fieldname18)
{
result = 'This is the text with the link <a href="URL HERE">Click Here</a> and image tag <img src="URL IMAGE HERE" style="width:150px;display:inline-block !importante;clear:none !important;" /> some other text if you prefer';
}

jQuery('.result-here').html(result);
return result;
})()

    Best regards.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Displaying an image and text with a hyperlink in the result.’ is closed to new replies.