• 0
Sign in to follow this  
Followers 0

Round avatars next to posts as seen on pagelines.com?


Question

Posted · Report post

Hi there.

 

The way the pagelines.com/blog shows avatars look great. Therefore I've been trying to achieve the same effect. I've added the PostAuthor section which does indeed add an image. It is, however, very small and not rounded. Is the effect achieved with some CSS or am I doing something wrong?

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

I've been trying to add .img-circle as well as class=".img-circle" to the styling classes under standard options. I've also tried adding it to the custom code and then calling it with the styling classes. None of it works. I also can't see the CSS just by inspecting your page (I might be doing something wrong). Is it possible to just paste the CSS used on Pagelines.com/blog here?

 

Ps. I hope you are adding some customization options on the different elements in one of your coming updates. I bought a subscription for DMS because it promised no coding, and the documentation is sparse.  :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

The round avatar and meta is a new feature that is going to be included in an upcoming update. If you want this now, you will need to be brave and use the bleeding edge build that is on GitHub, as we do not support that version.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny - does that mean that I can't achieve the effect now (with your, official, build) and CSS, unlike Robs answer? Do you have a guesstimate on when the update will be released? (I don't need it right now, but depending on whether it's due in weeks or months, I might have to find a solution prior to release).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you want to round an image, you will need to use custom CSS. The img-round class can be applied to the Post Authors image using the Styling Classes field, anything added there is specific to the section and not elements inside the section, so adding that class won't work.

 

Therefore, inspect your Post Authors image using your browsers web dev tools and find the correct class. Then add your own custom CSS, I would use LESS and add the following to your override class for Post Author image.

 

.border(99em);

 

For example:

 

.example-post-author-img {

.border-radius(99em);

}

 

The class above is an example, but adding the above LESS will output border-radius CSS for all browsers, 99em should make the image appear as circular.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

DMS has the option now to use the same system on our site.

 

Go to any post in DMS.  Click on the pencil icon for the Content/PostLoop section.  Look at the settings. Under Meta Config, select Author Avatar Mode. This will place the image and meta info on the left side.

1 person likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0