Inserting images in articles and content blocks

Return to top

28 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.

    2
  • 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.

    7
  • 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).

     

    1
  • 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".

     

     

    2
  • 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
  • Rich Andersen

    Hi, Does anyone know if it's possible to use 'hotspot' interactive images? I have a large image explaining all the different element on a webpage. I'd like to have it so when the reader hovers over the number point it pops up some a little callout with more details. Is that possible at all?

    1
  • alexandria.gazzillo

    We've been struggling to get our uploaded images to appear in our support widget on our site. We have tried uploading via the image uploader in the article builder but the image does not load properly once we test it live on the site. 

    Any advice? 

    0
  • Jane M Langschied

    Agreed. Any idea if Zendesk will be enhancing how images work? Would love to see:

    • Ability to justify: left, center, or right
    • Wrapping capability mentioned above
    • Ability to click on the picture to make it bigger. 
    0
  • Thomas Foley

    Jane.

    For alignment, three different classes (.align-left, alight-right, .align-center) that I apply using either <div> or <span> in the article code. A bit ackward, but workds.

    For wrapping, I really don't have a clue. I have actually messed with using tables, but that is a lot of manual effort and there are issues depending on the display resolution of the browser window.

    To have the ability to make a picture bigger, I added the following to our style sheet:

    .collapsed img {
      border: none;
      box-shadow: 0 .5em .5em 0 #202020;
    }

    img.collapsed:hover {
      -ms-transform: scale(2); /* IE 9 */
      -webkit-transform: scale(2); /* Safari 3-8 */
      transform: scale(1.75); 
      transform-origin: left top; 
    }

    When I insert an image, I edit the html code to be:

    <img class="collapsed" [filename] [width] [height]>

    ...where width and height are smaller versions of the original image. When I hover over the image, it transforms to the scale I set in the stylesheet (i.e., 1.75 times the displayed image). The top-left corner is anchored, and the image expands down and to the right.

    There is all sorts of stuff you can do with transform, so it is something worth taking a look at.

    For ZENDESK FOLKS, it would be nice if the article editor would actually look at our stylesheets and allow us to choose the class to use for an html tag from a drop-down of available classes. Right now, all I see is Paragraph, Heading 1, Heading 2, Heading 3, and Heading 4. Couldn't the lookup show me all the styles from the stylesheet in the order they appear and be sensitive to my cursor location, for example:

    • If I am in a paragraph with no selected text, I would see all paragraph-level classes.
    • If I have selected text, I see all text-level classes.
    • If I have selected an image, I see all image classes.
    • If I am in a cell on a table, I see all <td> classes.
    • etc...

    They should be listed in the order they appear in the style sheet, which allows me to modify the list to put my most used ones at the top.

    0
  • Katarzyna Karpinska
    Zendesk Product Manager

    Jane M Langschied, thank you for your comment. When it comes to the images in Content blocks the two items below are already available out of the box (no HTML needed)

    • Ability to justify: left, center, or right
    • Wrapping capability mentioned above

    We will be also working on adding them to the article editor in the future. 

    We currently don't have plans to add:

    • Ability to click on the picture to make it bigger. 
    0
  • Geoffrey Wang

    We have found that images in Guide articles are scaled differently when they are viewed from the end user portal vs. in an email that includes the Answer Bot suggested article.  The first screenshot below shows how an article with images looks when viewed from the end user portal (note that the article is redacted and the screenshots in the article are the proper width).

    The second screenshot shows the same article as it appears in an email with the Answer BOT suggestion.  Notice how the images are huge and out of scale.

    So here's my question: Do you have any guidelines on how to include images in Guide articles so that they display properly from the end user portal and also in emails?

     

     

    0
  • Elizabeth Brown

    Hi Zendesk: does Zendesk still use image filenames as alt text, if no alt text is provided?
    I feel certain this advice existed at some point? and I create meaningful filenames for images for this reason, but can't find confirmation in the articles. 

    Please advise?

    0
  • Katarzyna Karpinska
    Zendesk Product Manager

    Hi Elizabeth Brown

    What you are describing has not been a Zendesk feature, but I saw on our Community that some of our users made similar customizations, maybe you've seen it there? However, we've recently changed the structure of our file urls so they are not containing names anymore. 

    0
  • Elizabeth Brown

    Hi Katarzyna,

    Hmmm - here's what I see in my code view, in an article, for an image + alt text.

    This isn't default behaviour? Our web design team tweaked our template to match our brand but I wasn't aware of a change to alt text. 

    0
  • Katarzyna Karpinska
    Zendesk Product Manager

    Elizabeth Brown

    I'm sorry I'm a little confused as to what is your actual question :) . As you can see in the image you shared we are not providing file names in the image src attribute anymore. This was a change that we needed to introduce to support adding more image-related features to Guide. We have never had a native feature that enabled adding alt text based on the image file name. It's possible however that it was a customization added by someone in your team as I saw similar ones on our community

    0

Please sign in to leave a comment.

Powered by Zendesk