Embedding getty images

  • Unknown's avatar

    Hello! I’m a new with WordPress.com and I’ve been trying to embed some photos from getty images. I take the embedding code and paste it to text/html editor. The photo is visible when I use visual editor but when I look at the preview aor publish the post, there are no photos. Just the grey boxes with links to the photos and empty space. What should I do? I have checked that I take the whole code.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Hi, how are you?

    Can you send me an example code for an image?
    I’ll try on my own site to see what’s happening.

    Regards.

  • Unknown's avatar

    I already deleted the failed post but I tried to do a new one now and the same thing happens. Here’s the new test post https://timanttisalonki.wordpress.com/2016/06/15/testipostaus/

    <div class=”getty embed image” style=”background-color: #fff; display: inline-block; font-family: ‘Helvetica Neue’,Helvetica,Arial,sans-serif; color: #a7a7a7; font-size: 11px; width: 100%; max-width: 380px;”>
    <div style=”padding: 0; margin: 0; text-align: left;”>Embed from Getty Images</div>
    <div style=”overflow: hidden; position: relative; height: 0; padding: 156.315789% 0 0 0; width: 100%;”><iframe style=”display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0;” src=”//embed.gettyimages.com/embed/540419216?et=BYehX50vSHxc5IyBzNTU1w&viewMoreLink=on&sig=26HuKNddqX6Y8mL0rcG92u8o3EIIwt7Wjv5IVJQkTDU=&caption=true” width=”380″ height=”594″ frameborder=”0″ scrolling=”no”></iframe></div>
    <p style=”margin: 0;”></p>

    ^This is what the code looks like when I take it from gettyimages. It doesn’t shorten automatically when I paste it in html-editor. I understood that it should? :D

  • Unknown's avatar

    Hello.

    This kind of code is a link for your image, it’s correct as I can see so far. You need to get the embedded code to show the image on your site or you can get the link for your image.

    For example, below I’ll send to you a link to an image from imgur.com.

    Regards.

  • Unknown's avatar

    Are you using the supposrt guide at https://en.support.wordpress.com/images/getty-images/?

    If you are and you are not successful then type modlook into the sidebar tags on this thread for a Staff follow-up. How do I get a Moderator/Staff reply for my question? https://en.support.wordpress.com/getting-help-in-the-forums/#how-do-i-get-a-moderatorstaff-reply-for-my-question Please subscribe to this thread so you are notified when they respond and be patient while waiting. To subscribe look in the sidebar of this thread, find the subscribe to topics link and click it.

  • Unknown's avatar

    P.S. In order to display code fully in a forum theread you have to place it between [code] tags.

  • Unknown's avatar

    I’ve tested this on my desktop PC and it works fine.

    It looks like you’re trying to get this image?
    http://www.gettyimages.co.uk/detail/news-photo/crown-princess-mary-of-denmark-attends-the-second-day-of-news-photo/540419216

    Then all I did was follow the instructions that timethief posted, so copy and paste the entire code into the Visual editor:
    <div class="getty embed image" style="background-color:#fff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#a7a7a7;font-size:11px;width:100%;max-width:380px;"><div style="padding:0;margin:0;text-align:left;"><a href="http://www.gettyimages.com/detail/540419216" target="_blank" style="color:#a7a7a7;text-decoration:none;font-weight:normal !important;border:none;display:inline-block;">Embed from Getty Images</a></div><div style="overflow:hidden;position:relative;height:0;padding:156.315789% 0 0 0;width:100%;"><iframe src="//embed.gettyimages.com/embed/540419216?et=XXrMo6HvRhVcNGjAf7FPow&viewMoreLink=off&sig=6zyaVv5L8e-LHTzCbPTBMdZCvz-TsIrcRKBTcDfM0vU=&caption=true" width="380" height="594" scrolling="no" frameborder="0" style="display:inline-block;position:absolute;top:0;left:0;width:100%;height:100%;margin:0;"></iframe></div><p style="margin:0;"></p></div>

    In Preview mode and then when I published privately to test it, the image came out just fine.

    Like you mentioned, it did not magically transform into a shortcode. However, I manually transformed all that mess into a shortcode (if you look carefully at the code above, you’ll see what elements make up the short code below):

    ‘[getty src="540419216?et=XXrMo6HvRhVcNGjAf7FPow&sig=6zyaVv5L8e-LHTzCbPTBMdZCvz-TsIrcRKBTcDfM0vU=" width="380" height="594"]‘

    Hope some of that works!

  • Unknown's avatar

    Thank you all for your answers!

    I’m still a bit confused. I can see the difference between that long code I have tried to use and the short embed code that is seen in the support guide video. But when I go to gettyimages and do exactly as the video, there is no short embed code, only that long one which is actually a link, if I understood correct? Why isn’t there a similar embed code as in the video when I press the same “embed image” button? :D I have little knowledge of these things so please be patient!

  • Unknown's avatar

    Ooooh I tried writesrealgood’s advice to paste the long code into the visual editor and the image is visible. That helps a lot but it is difficult to arrange the photos. For example I would like to have two smaller photos next to each other but I can’t do that when all I see is a long long piece of code. Is there a solution for that?

  • Unknown's avatar

    It doesn’t convert it to the shortcode while you’re in the post, BUT, while writing your post in the Visual Editor
    1) Save as a Draft
    https://cloudup.com/cxUImlYURYS

    2) Click Back
    https://cloudup.com/cndwrhzMiKy

    3) Go to your Drafts and click Edit on the most recent post
    https://cloudup.com/cEXpu4-GmAn

    4) Boom, it’s converted
    https://cloudup.com/cRZB9Vr5wRU

    It’s worth that the shortcode is different, at least in this case, from the support documentation. Look how it only takes 3 different elements from that long piece of code.
    https://cloudup.com/cCzoG_pZ1u0

    If the images are small enough, and the user’s screen wide enough, I believe they’ll automatically go next to each other on the screen.

    There is a WordPress support article about how to align images, but I’m not sure how you work with aligning images when you’re only linking to them. The article is about using images that you’ve uploaded to your media library.
    https://en.support.wordpress.com/images/image-alignment/

    – Jason

  • Unknown's avatar

    I’m so sorry, I forgot to answer!

    Everything is working now. Images are visible, it converts into shortcode, images go next to each other and a friend of mine gave me a piece of code that centers images :)

    Thank you all for your help, especially Jason! :)

  • The topic ‘Embedding getty images’ is closed to new replies.