Facebook Feed Author Image sizes Now Customizable
[city,State] – Users of the Smash Balloon Facebook Feed plugin can now directly control the size of author profile images displayed within their Facebook feeds embedded on WordPress websites. A recent update provides JavaScript and CSS code snippets allowing for precise image dimension adjustments and circular cropping, enhancing visual consistency and site aesthetics.
Previously, author images appeared at a default size determined by the plugin. This limited customization options for website owners aiming to integrate facebook feeds seamlessly with their existing design. The new functionality addresses this by enabling administrators to modify image width and height, alongside related CSS adjustments to maintain layout integrity. The change impacts anyone utilizing the Smash Balloon plugin to showcase Facebook content on their WordPress site, offering greater control over brand presentation and user experience.
To implement the update, users must add the provided JavaScript code-$('.cff-author-img img').each(function(){ $(this).attr('src', $(this).attr('src') + '&width=150'); });-through a personalized JavaScript plugin within their WordPress installation. The “150” value dictates the image width and can be adjusted to suit specific design needs.
Following JavaScript implementation, corresponding CSS code must be added to the site’s custom CSS sheet (accessible via Panel de WordPress > apariencia > Personalizar > Additional CSS):
#cff .cff-author-img {
width: 150px;
height: 150px;
background: none;
border-radius: 50%;
}
#cff .cff-item .cff-author-img img {
width: 150px;
height: 150px;
border-radius: 50%;
}
#cff .cff-author.cff-page-name, #cff .cff-author .cff-date {
margin-left: 160px !crucial;
}
#cff .cff-author .cff-page-name.cff-author-date {
padding-top: 60px;
}Smash Balloon documentation emphasizes maintaining consistency between the image size specified in the JavaScript (e.g., 150) and the corresponding width/height values within the CSS. The margin-left value in the CSS should be 10px greater than the specified image size to ensure proper alignment of accompanying text elements. further guidance is available at https://smashballoon.com/es/doc/using-custom-javascript-code-in-our-plugins/.
