Inserting images in articles and content blocks

Return to top

18 Comments

  • Bryan Hilton

    Hello Zendesk Support,

     

    I would like to learn more about placing alt text in images.  Here are my questions:

    1. Is my process correct?
      a.  Open guide and navigate to the Edit screen in your article
      b.  Click on the image that I want to edit within my article.
      c.  Click the Source Code button.
      d.  Locate the alt text by navigating to the Alt =
      e.  Edit your alt text within the "".
    2. How do I tell which image I am working with if I have multiple images?
    3. After editing the alt text and clicking OK, I click Preview in Help Center.
    4. I hover my mouse over the image but do not see a tag when hovering over the image.
    5. My screen reader does not appear to read the alt text i have created.

    ****Update**** I was trying to use Narrator from Microsoft which was not reading my Alt Text.  However, I just installed NVDA and it seems to be reading the alt text just fine.  The Source Code Editor is also accepting my edits.

    Any help is greatly appreciated in this matter.  Thank you.

    I would just like to know how I can tell which image i am working on in the  Source Code Editor if I have many images in an article.

    Also, I am thinking image tags may be separate from alt text which why I do not see an image tag when I hover over the image in the Preview in Help Center screen.

    0
  • Jean-Charles Pascale

    Hi Brian,

    Indeed, alt-text is not necessarily text that will be displayed when hovering over an image. Alt-text is text that will be displayed in place of the image if the image cannot be displayed for some reason.

    To know which image you are working on, you can take the value of the "src" tag of the image you are working on, and open it in a browser to see the image.
    If the "src" tag is a full link, simply copy and paste it in your browser.
    If the "src" tag starts with "/hc/...", simply add "https://subdomain.zendesk.com" before it, replacing "subdomain" by your subdomain.
    For instance https://subdomain.zendesk.com/hc/hc/article_attachments/360067323131/foxgiphy.gif

    I hope this helps.

    Jean-Charles - Zendesk Support

    0
  • Ramadan Elsayed

    hello All,

    im looking to put an image on an article to be wrapped around the text or next to it like the photo.

    but there is no option for that.

    1
  • Molly Phillips

    Hi Ramadan,

    I'd suggest using a borderless table or flexbox to get the layout you're looking for.

    1
  • Ramadan Elsayed

    very good workaround, however, such simple photo format feature should be added to the article design tools.

    2
  • Maria Artamonova

    Hello Zendesk Support,

    Is there any chance to set up zooming on pictures? Our customers always ask for it. It is not easy to see all the details on a big picture. It would also enhance support pages accessibily which is one of the key factors for Google optimization.

    4
  • Mark Wiles

    Yes, I agree with Ramadan Elsayed that it would be great to have an easy "wrap text" option for images.  And as for your comment Maria Artamonova, we have been using a lightbox feature to zoom in on images; the lightbox option came with a theme we purchased, so I'm guessing some custom CSS would also work (https://zendeskthemes.zendesk.com/hc/en-us/articles/115000405784-Images).

     

    0
  • oleh olehovich

    Hi! The web widget does not display images from the articles. If you open an article in the help center - all images in it are displayed correctly. But if you open the same article through the web widget, the images are visible as "image name.jpeg". I tried other image formats and changed the size to smaller, but it did not help. Can you help?

    0
  • Giuseppe
    Zendesk Customer Care

    Hi Oleh,

     

    This could be due to a number of reasons.

    One reason could be due to article restrictions to specific group of users. This could be the case if you are viewing your articles while signed-in in your Help Center, which will indeed show you the images, when your Web Widget is in another environment where users are anonymously browsing your articles. If this is the case, then you may have to update your Article settings to make them visible to all users. You may view these articles for more information about this:

    Can I restrict access to articles?

    Inline images in Guide articles display as broken across all browsers 

    Please note that the information above applies to articles in general, and not specific to Web Widget.

     

    In case the scenario above is not the cause of the issue, then this could be due to Content Security Policy (CSP) support

    To check if this is the case, once you have the article open in your Web Widget displaying the broken image, you can go to your console (right-click > Inspect > Console) and you will see an error similar to this:

     

    To fix this, you'll have to follow the setup as provided in the article above. This means you'll have to modify the Web Widget script to comply with CSP guidelines.

    0
  • Marco Esposito

    I have the same need described by Maria Artamonova
    a few images issues could be solved by images that can be clicked. That would work as a pop-up displaying the image in a bigger size in the middle of the screen. 

    2
  • Katie | Yola Team

    Hello Zendesk support! Is it possible to display different images within the article on desktop and mobile devices? So, for example, when a customer is viewing an article from a desktop, they see image 1, however, when they are viewing from a mobile device, they see image 2 instead. 

    We are also interested in the feature Maria Artamonova and Marco Esposito asking about.

    Thank you!

    0
  • Tipene Hughes
    Zendesk Developer Advocacy
    Hi Katie,
     
    There isn’t currently a way to dynamically display images based on the device using native functionality, but you could implement some JavaScript to achieve the same effect. Something like this would display images depending on the viewport width of the device:
     
    const hero = document.querySelector('#main-content');
    const viewportWidth = window.innerWidth;
    
    if(viewportWidth <= 480) {
        hero.style.backgroundImage = "url('https://example_sm.png)"
      } else {
        hero.style.backgroundImage = "url('https://example_xl.png')"
    };
     
    One thing to be aware of is that you won’t be able to access the image assets in your help center using this method so you’ll need to have the externally hosted image URLs for display. 
    0
  • Thomas Foley

    We have some images that we use in multiple articles. To make this happen, I usually write the first article, upload the image to that article, and then copy its <img> tag to the other documents. This seems to work fine.

    The problem comes if I need to change an image. I would like to update the original and have the updated version used in the other articles.

    In Theme:Assets, there is a menu that gives the option of Replace or Delete. Replace works great because it basically overwrites the existing image with a replacement that is then used everywhere.

    In Article:Images, there is only the option of Delete. Is there a way to replace the existing image with a new version?

    Right now, I just upload the new image into the original article, use Source code to copy the ID from the new version, and then use Source code in each file where the image exists, replacing the old ID with the new one -- the filename remains the same. It doesn't always work well because I miss some places where the image was used.

    Suggestions would be great. Just being to use something like FTP to access those images and upload/overwrite with replacements would be a huge improvement.

    0
  • Charles Gresula
    Zendesk Customer Care

    Hi Thomas Foley,

    Currently, the recommended approach in attaching images is either you upload images individually(update individually if needs to be changed) to each article or use the Guide assets section. This is to avoid the potential issue of images displaying as a broken link as described in this article: 

    Inline images in Guide articles display as broken across all browsers

    0
  • Erica Dyson

    Can't you enter a url from a Google Shared Drive or a shared folder? That way if we had to restore we get the article back with the images. Any ideas / best practice? Embedding each image in article seems rather "old school".

     

     

    1
  • Brett Bowser
    Zendesk Community Manager
    Hey Erica, 

    You should be able to do that still. The only reason we recommend uploading it is if a users doesn't have access to your shared drive or if the image got deleted from Google drive. If that happens, then the user would only see a broken image icon on their end.
     
    Hope this clears up any confusion!
    0
  • Dave Jensen

    Does Zendesk have a list of external image hosting options it recommends partnering with? We've currently been uploading images directly to articles and a few needs have arisen that seem like they'd be solved if we had an external image hosting site where we could host/maintain all images.

    Just looking to get a list of which vendors work best for this purpose.

    0
  • Brett Bowser
    Zendesk Community Manager
    Hey Dave,

    I don't have a list of recommended options, however, it may be worth taking a look at our App Marketplace to see what's available there. I know we have a Dropbox integration that's fairly popular but there are others that may be worth taking a look at as well.
     
    I hope this helps!
    0

Please sign in to leave a comment.

Powered by Zendesk