• Duke Oliver

  • January 29, 2016 14:51

  Hi Jason,

  You have a lot of ways to achieve this! I'll show you what it's like in my own theme. 

  In my theme editor on the Article page, I have {{article.body}} inside of a div with the classes "article-body" and "markdown":

  

  {{article.body}} renders the entire article, including the images I placed with the article editor. If I go to any of my articles and use my browser's 'inspect' tool (right-click > inspect) I can see that there is indeed an image inside my "article-body markdown" div:

  
  
  So now I need to go into my css and figure out how to target the image so I can give it a shadow. I believe the original theme I built on top of used "markdown" as the go-to classname for these kinds of edits, so I'll do just that. Here's the css selector:

  

  This is selecting all img tags inside of the "markdown" class. Here's my shadow edit. I went ahead and targeted every single browser I could think of (except older opera versions, woops!), but really all you'll likely need are the ones I underlined:

  

  Now if I preview my changes, I can see all my article images have shadows!

  

   

  I hope this helps. Let me know if you'd like to know more

• Jason

  • January 29, 2016 18:04

  This is exactly what I was looking for. Thank you!

• Rchittoor

  • July 20, 2016 10:23

  Thank you for the insightful post. what is the customization needed to add borders to an image?

• Duke Oliver

  • July 20, 2016 13:51

  Depends on what kind of border, though it would most likely be the css "border" property instead of the "box-shadow" property. For example,

  .markdown img {
      border: 1px solid black;
  }

  You can read more about borders and border styles at these places:

  http://www.w3schools.com/css/css_border.asp

  https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

• Jennifer Rowe

  • July 20, 2016 17:58

  Zendesk Documentation Team

  Thanks for helping out, Duke. Always nice to see you!

• Rchittoor

  • July 26, 2016 07:10

  Thank you Duke! The code worked just fine. 

• Angela Frey

  • January 27, 2021 18:43

  Added this to article_page.hbs:

  <div class="article-body markdown">
  {{article.body}}
  </div>

  Added this to style.css:

  .markdown img {
  border: 1px solid #f2f2f2;
  }
  
  Result (that I'm loving):
  
  

• William Grote

  • February 10, 2021 19:46

  Is there a way to do this with the HTML source code so you could add them to images on a per-article basis and not change the CSS for everything?

   

• Brett Bowser

  • February 16, 2021 20:57

  Zendesk Community Manager

  Hey William,

  This should be possible by adding the HTML to your article source code. I'd recommend checking out this article: How can I format the text of the article with the source code?

  I hope this points you in the right direction!

• William Grote

  • May 28, 2021 18:07

  Hi Brett, thanks, I have been doing just that, but now I want to do what Angela suggested and just add the 

  <div class="article-body markdown">
  {{article.body}}
  </div>

  Added this to style.css:

  .markdown img {
  border: 1px solid #003366;
  }

   

  to the article.hbs and css page - I tried it and it is not putting borders on the new articles I import from Google Docs ???

  (the articles already have borders in GD, but these get removed when imported and I have to add them back by adding this  

  style="border: 1px solid #0;”) 

  to every img reference in each article. it would save time if it were universal 

• William Grote

  • May 28, 2021 18:07

  typo

  style="border: 1px solid #003366;"

   

• Christopher Stock

  • June 02, 2021 14:52

  Community Moderator

  Hey @..., try adding:

  border: 1px solid #003366;

  to the .article-body img selector.

  On the current Copenhagen theme this will look like:

  .article-body img {
      height: auto;
      max-width: 100%;
      border: 1px solid #003366;
  }

  That will apply a border to every image added to an article.

• Jon Rosenberger

  • August 09, 2021 15:48

  When I add the border with

  img {
  border: 2px solid black;
  }

  It puts a border around my company logo and the user's avatar on the homepage as well. Is there a way to have this only apply to images in articles? 
  
  I'm on the hudson base theme

• Dave Dyson

  • August 10, 2021 00:39

  Hi Jon -

  Your CSS code doesn't specify a class or id to apply it to, so as written it will apply that border to any img that can have one. If you look at the example code that Chris Stock shared in their comment right above yours, you'll see that instead of starting with "img {", it starts with ".article-body img {", so that his border CSS will only apply to img elements that include class="article-body". I'd suggest adding .article-body to your code and see if that helps.

• Jon Rosenberger

  • August 12, 2021 17:06

  @... Dyson Thanks! I was frustrated because .article-body wasn't working for me but I decided on some trial testing and found out just .article worked fine! I also jazzed it up by changing it from a border to a shadow with

  .article img {
  box-shadow: 10px 10px 5px #ccc;

  so I'm feeling pretty great. thanks to you and everyone else in this thread for the help! 

• Dave Dyson

  • August 12, 2021 19:11

  Awesome, Jon – I'm glad we were able to help!

Please sign in to leave a comment.