WordPress

last person joined: 6 days ago 

A place for nonprofit WordPress developers and content managers of all skill levels.The WordPress group is an engaged network of WordPress developers and content managers, for all skill levels, by WordPress users for WordPress users, to encourage the usage of and advocate for WordPress.

Our goal: to support nonprofit organizations using (or interested in using) WordPress. Additionally, this is a safe and friendly place for beginning WordPress developers and users to ask questions and connect to like-minded people.

table/other options for aligning images?

  • 1.  table/other options for aligning images?

    Posted Feb 09, 2018 12:39
    Hello, experts.

    I often need to incorporate a series of sponsor logos on pages for various events. Can you recommend a clean way to do this? They are not always the same orientation or size. Is there a simple table tool I can use so that I can present them in an organized manner?
    Help!!

    Thanks in advance for your help!

    ------------------------------
    Cindy Wright
    Nonprofit marcom pro
    Massachusetts
    ------------------------------


  • 2.  RE: table/other options for aligning images?

    Posted Feb 13, 2018 13:51
    This is a common need without an obvious answer!

    Fellow WordPressers! How have you accomplished this kind of a layout? I'll share some broad approaches below, but let's help Cindy by offering some specific examples from the day-to-day lives of nonprofit professionals :)



    Here are the directions I could see you taking. I'm always a fan of light-weight options, so these are ordered in the order I'd attempt them.

    1. Light-weight

    A lot of themes will make it possible to left-align an image with headings and end up with a layout like that. It would be fairly responsive-friendly, but could be a little fragile or harder to recreate. The basic recipe: Left-Aligned Image + Heading + Text. Repeat.

    However, you might end up with a problem like this:


    To solve that problem you need to "clear" (technical term) the next row of an image and text. Often times the "Horizontal Rule" button in WordPress can insert a small divider that fixes that, but not always. If that's the case, I threw together a tiny little plugin that creates a [clear] shortcode to force the next row onto it's own line. I've always meant to build this anyway, so that was a good excuse!

    2. Shortcodes

    There are a lot of plugins with "shortcode" libraries (those brackety things) that help you create layouts. I think these are a decent solution if you only need this occasionally, but they are hard to maintain and support over time if you use them on every pages.

    You'd have something like this [one_third]{your image}[/one_third][two_third_last]{your heading and paragraph}[/two_third_last] if you used the Columns Shortcode plugin.

    3. Page Builders
    There are lots of "page builder" plugins to create custom layouts. These can have a big learning curve depending on the one you choose. Really popular ones are Divi (both a theme and plugin), Visual Composer, and SiteOrigins Page Builder. I don't personally use any of these and am hesitant to recommend page builders in general, but if I had to try one, I'd use either Beaver Builder or Pootle Page Builder based on this extensive review of page builders by a well-respected WordPress developer Pippin Williamson.

    4. Wait for "Gutenberg"
    There's a new version of WordPress coming with a completely new content editor. It's codenamed "Gutenberg" (because it will revolutionize publishing, get it!?) and will support some basic layout things, probably including your use case. Here's a good video about it from WordCamp US. Shortcodes and page builders will probably "sort of" work next to Gutenberg, but you'll be better served if you can wait for (6-9 months? no one really knows) and find a light-weight solution in the mean time.

    5. Custom Developed Solution
    A developer could like build a feature for you to do this with something like Advanced Custom Fields. If none of these other solutions sound right, then this is probably the right path for you.

    -------

    So those are some abstract options, but I'd love to hear what other folks are doing! Please share if this is a need you've solved. Links to plugins or links to your website will be really valuable!

    ------------------------------
    Mark Root-Wiley

    MRW Web Design / MRWweb.com / @MRWweb
    Thoughtful WordPress Website for Nonprofits & Mission-Driven Organizations
    Seattle, WA
    ------------------------------



  • 3.  RE: table/other options for aligning images?

    Posted Feb 16, 2018 13:32
    Sorry I didn't chime in earlier on this -- until Mark pointed it out, I didn't realize I had done this on my WordPress site. I am not sure this is a method I'd recommend or is possible to implement with every theme, but here's how I did it.

    When I last revamped this website, I was managing some html sites (I KNOW, YUCK) built with Bootstrap templates. I am very comfortable using Bootstrap grids, so I chose a Bootstrap WordPress theme (Flat Bootstrap) and added the plugin Bootstrap Shortcodes for WordPress for more Bootstrapy stuff. I think the columns/rows shortcode I used comes from that plugin, not the theme, so this solution falls into Mark's #2 caregory, I think.

    This plugin hasn't been updated for a year (and the theme even longer...), so probably not the best method to use.

    ------------------------------
    Melissa Amarello
    Advocates for Snake Preservation
    Tucson, Arizona
    https://www.snakes.ngo/
    ------------------------------



  • 4.  RE: table/other options for aligning images?

    Posted Feb 16, 2018 14:03
    +1 for Bootstap, Foundation etc. If your theme uses an established framework, it makes some of these tasks simpler.

    ------------------------------
    Jason King
    Freelance WordPress development and Google Ad Grant management
    Mirepoix, France

    www.kingjason.co.uk

    Twitter: @jasoncsking
    ------------------------------