Jump to content


This topic is now archived and is closed to further replies.


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

Recommended Posts


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

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



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.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

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

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.




For example:


.example-post-author-img {




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.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

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.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

  • Similar Content

    • adamhodges
      By adamhodges
      Using Pagelines Framework 2.4.6, I have used the "PostAuthor" section to include the author's bio at the bottom of each blog post. The avatar associated with the user profile (author bio) contains a link; and that's what my question is about.

      On blog posts, clicking on the avatar opens up the very same blog post in a new window. On author pages, clicking on the avatar opens up the very same author page in a new window.

      Two things I would like to change:

      1. Remove the target="_blank" from that link. There is no need to open up a new window.

      2. Change where the link is directed. There is no need to link to the same page. Ideally, the avatar would link to the author page.

      If changing the two things above is too difficult, I could live with simply removing the link altogether.

      Any thoughts on how to go about fixing this?

      Website URL: http://www.alpfitness.com
      Framework Version: Pagelines Framework 2.4.6
      WordPress Version: 4.1.1
      Plugin used: WP User Avatar*

      *I am using the WP User Avatar plugin to display a local image for the avatars. Note that this issue occurs even with the plugin disabled.
    • 21thirteen
      By 21thirteen
      Three different questions here, the first far more important.
      http://rickfrishman.21thirteen.net/category/blog/ and
      DMS v 2.1.1
      WP 3.9.1
      Active Plugins: DMS Professional Tools, Modal PopUp DMS (not being used currently), PageLines Updater, Sidebar Manager Light, 
      Types - Complete Solution for Custom Fields and Types (can't say I quite understand how to use this and am not currently using it)
      Godaddy Linux w/ Cpanel
      1) The category "/press" was created starting with the default Blog template, with PageHeader, Sidebar and . I added WP Content/Loop. (This is the first time I've tried this in DMS2). I added 2 columns and used two Media Boxes between the PageHeader and the WP Content/Loop.
      I then created a second category called Blog. I don't want the two Media Boxes here. No matter what I do, unlock  the template, save as a new template, don't use a template, any change I make to one category page is reflected in the other. I also don't want the PageHeader to say what it does - I just want it to say Press Room, and Blog. I'm afraid, at this point to remove the PageHeader and replace it with a Highlight section. How can you make two different category pages and have different sections on them without having the changes reflected in the other category page.
      2) How/where do you upload an image to replace the default "avatar" image for the Author Info for each post?
      3) I had an error when doing the update to the uploaded version of DMS. I later tried again and got the version to update (I think! at least it's now telling me that all my thems, plugins and WP versions are up to date but this message: "An automated WordPress update has failed to complete - please attempt the update again now." will not go away!
      Thanks in advance for your help.
      Perry Yeldham
      21Thirteen design, Inc.
    • Erwan
      By Erwan

      DMS v. 0.9.7 introduced a pretty cool option to show redesigned meta within the content/postloop: we can now select the default one ("Metabar Mode") or the "Author Avatar Mode".
      If I understand correctly, it's supposed to be a single/exclusive choice (ToolBox inline help: "Instead of the standard metabar (beneath post title), you can use author meta mode. This mode displays the author avatar and publish date on left.").
      But for me, the two meta modes are displayed concomitantly when the latter is selected: both the classic metabar and the new one show up (screenshot: http://screencast.com/t/m3Vs6G7DAfjY), whatever the area of the postloop (blog page, single post), whatever the scope of the option (type, local).
      Do I miss something here ;) ?
    • fatchamp
      By fatchamp
      Hello, do I use a hook if I would like to add the post author's avatar on the homepage?
      If I have to use that, what would be the exact command?
      Is there another way to do that?

      My website allows visitors to make submission of photos and text, and I would like their avatars to be shown next to their post.
      Visitors who post are random and I may not know them, hence it has to be automatic that once someone posts, his or her avatar goes up with the post.

      But within pagelines drag and drop, I can only add "post author" into "blog post".

      How do I add "post author" with the avatar into the "blog" section (where all the latest posts will be shown)?

      Thank you for your help.