Resizing Gallery Circle Images

• 

  katedh · Member · Mar 23, 2014 at 4:51 pm

  • Copy link
  • Add topic to favorites

  Is there any way that I can make a gallery circle image smaller? The page is http://thebuckwheatadventure.wordpress.com/contact/?preview=true&preview_id=20&preview_nonce=6794f603b4 I would like the picture in the circle to be much smaller – around a third of the width of the page (the same size as it would appear if in a row of 3 gallery pictures). Can I add something to the code? ALternatively, can I add the picture as a normal image (i.e. not via gallery) and edit code to make it into a circle?

  I am very new to this so no idea where to start. Thank you!

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

• 

  gracejiyoung · Member · Mar 25, 2014 at 8:25 pm

  • Copy link

  Hi there!

  Sure! You can do this by changing the gallery size to thumbnail. Currently if you look at the Text Editor of the page/post with your gallery you will see that it says Medium. Change it to thumbnail and it will be smaller.

  However, if you want to control it for every image you don’t have to put the images in a gallery and add CSS to create the circular border. You just need to add the border radius. For example, your Instagram images can have circular borders by adding this to the CSS:

  .wpcom-instagram-images img {
  	border-radius: 50%;
  }

  So once you have images in your posts, you would need to find select the correct element and add the border-radius. Please note that you would have to do this manually for each post so it may not be ideal. The gallery would probably be the least time-consuming option.

• 

  katedh · Member · Mar 25, 2014 at 9:00 pm

  • Copy link

  Hi Grace! Thanks for your reply. I have looked at text editor but there is nowhere to change it from medium to thumbnail as suggested. The image I wanted to use was on the circle setting so the code just says:

  [gallery type="circle" ids="420,421"]

  Can I add something to this to change the size, or does that only work for other image types in the gallery and not circle?

  And thanks for the info re the CSS change – I am a completely beginner though and don’t even know where to find my blog’s CSS. Is there a useful tutorial you can point me to?

  Many thanks
  Kate

• 

  gracejiyoung · Member · Mar 25, 2014 at 11:27 pm

  • Copy link

  Hi Kate!

  Sorry for not clarifying! That was my mistake. I believe you are talking about this post:

  http://thebuckwheatadventure.com/2014/03/21/cinnamon-vanilla-cashew-milk/

  I was taking a look at your site and found that there were multiple galleries. I think it would be easiest to just add CSS to make this change. So if you want to just change the size of the Gallery circles in that specific post, please go to Appearance > Customize > CSS in your Dashboard. When you are in the CSS tab please remove all the informational content.

  Then paste in this:

  #post-414 div.tiled-gallery-item img {
  	width: 75% !important;
  	height: 75% !important;
  }

  That will decrease the size of the Gallery circles in that post.

  Here’s a great guide on CSS here:

  Edit CSS

  If you also want to make those Instagram images into circles you can add the code right underneath the code above in your CSS editor:

  .wpcom-instagram-images img {
  	border-radius: 50%;
  }

  Let me know if you have any other questions!

• 

  katedh · Member · Apr 2, 2014 at 9:53 am

  • Copy link

  Hi Grace

  Thank you so much. That was really helpful. One quick question – if I wanted to edit other pages, how do I find their number? I.e. in the post above it was post 414. How do I find that number for other posts?

  Hope that makes sense!
  Kate

• 

  gracejiyoung · Member · Apr 2, 2014 at 5:15 pm

  • Copy link

  Hi Kate!

  In order to do this it’s fairly simple! So right-click on the post you want to add CSS to and go to Inspect Element. It will look like this:

  

  You will see there that the post number is #post-691.

  Let me know if you have any other questions or need more clarification! Btw – that malt shake looks amazing!