Add link to the specific image?

Hello,

How to add link to the specific image? I have one image which i have added to many posts, now i want to add the link for this but don't want to edit manually all of posts? Anyway to do that?

Screenshot: http://screencast.com/t/CQbx0usus5J
URL

Thank you,
Tuan

  • Bojan Radonic
    • Head of Support

    Hey Tuan,

    How are you doing today?

    Generally this should be possible with jQuery by wrapping the image with the link, I've checked your site but I couldn't see that image on your home page, could you please paste the link to one of the pages where I can see this so I can try to help with some custom code for you?

    Also please let me know where you want this image to link to.

    Looking forward for your response :slight_smile:

    Cheers,
    Bojan

  • Bojan Radonic
    • Head of Support

    Hey Tuan,

    Thanks for the link :slight_smile:

    Generally it should be better to edit this link in your page HTML using Text editor in your admin but in case you already added this to multiple pages we can use jQuery for that as mentioned above.

    Please try adding the following to your theme functions.php:

    function move_login_function() { ?>
        <script type="text/javascript">
        jQuery( document ).ready(function() {
            jQuery("img.wp-image-111034").wrap('<a href="mailto:email@email.com"></a>');
        });
        </script>
    <?php }
    add_action( 'wp_footer', 'move_login_function' );

    Replace dummy email with the actual email you want to mail to.

    Let me know if this helps :slight_smile:

    Cheers,
    Bojan

  • Khanh
    • The Bug Hunter

    Thank you Bojan. I have another question below.

    I have the iframe code like this
    <iframe src="http://uyenstudio.com/360demo/levantam/levantam.html" width="640" height="640" align="center" allowfullscreen="allowfullscreen"></iframe>

    Then i posted to my site here. But the iframe does not responsive. You can try to view on iphone, you will see the iframe keep flashing.

    I read the document here regarding fix this issue but i'm still not understand what to do? https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/

    Could you guide me step by step how to make that iframe to be responsive on my site?

    Thank you,
    Tuan

  • Bojan Radonic
    • Head of Support

    Hey there Tuan,

    This guide is actually pretty good and straight forward. So basically what you need to do is wrap the iframe with another container and just apply CSS for both that container and the iframe inside it.

    To do that simply open the page in your admin panel and in text editor locate the iframe and wrap it with a div to which you'll add specific class as instructed in the guide like this:

    <div class="video-container">
    <iframe src="http://uyenstudio.com/360demo/levantam/levantam.html" width="640" height="480" align="center" allowfullscreen="allowfullscreen"></iframe>
    </div>

    After that what you'll need to do is add the following CSS for both container and the iframe (If I remember correctly you have simple custom CSS plugin installed so you can add it in Appearance -> Custom CSS)

    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 35px;
        height: 0;
        overflow: hidden;
    }
    
    .video-container iframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    Hope this helps :slight_smile:

    Cheers,
    Bojan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.