Knowledge Base: Including Images in Group Posts and Comments

The “Groups” facility in Ratburger.org is based upon the Group feature of BuddyPress, which is a plug-in (or more precisely, bolt-on) to WordPress which was intended to turn what was originally blogging software into a crude kind of social network, with emphasis on “crude”.  BuddyPress can best be thought of as a kludge hanging in a bag crookedly nailed to the side of the hack which is WordPress.  Much of the work expended in software development since the launch of Ratburger has been in fixing outright flaws and limitations of BuddyPress.  Raw BuddyPress is something to behold: group posts and comments, once posted, cannot be edited or deleted, except by an administrator, and there is near complete opacity about what is going on, with notifications completely haphazard.

The whole Groups facility is a hack.  The way a discussion group add-on to WordPress should work is self-evident to anybody who gives it a few minutes’ thought: each group should be its own little site, with its own posts and comments, but with notifications confined to members.  Posts could be promoted from groups to public pages by administrators.  All of the composition, editing, and administration functions should be identical for the main site and groups.

What we have, of course, is nothing like that.  Groups don’t work remotely like the main site, and users are constantly frustrated trying to do simple things in groups which are easy on the main site.

For example, consider including an image in your post or comment.  On the main site, you just use the “Add Media” button, upload the image, and shazam, there it is!  But in a group, you’ll look in vain for an Add Media button—groups were basically intended by the developers of BuddyPress as glorified text-only bulletin boards, and if you want to do something as 1995-era edgy as including an image in your post, you have to jump through hoops.  Here are the details of the hoops, in case you remain undeterred.

First, upload your image to the Media Library.  There’s no “Add Media” button, but you can open up another tab or window, go to the Dashboard (via the little thing that looks like a speedometer in the bar at the top left of the page), then select Media/Add New.  This will display the familiar “Upload New Media” page, where you can select an image on your local computer and upload it to Ratburger.  This does not include the image in your group post; it simply adds it to your Media Library.

Next, display the Media Library.  In the sidebar, click Media/Library and you’ll see all images you’ve uploaded, with the most recent one at top left.  Click it and you’ll see the image full sized.  Make a note (copy and paste to an external text file) the following information about the image:

  • Dimensions
  • URL
  • Alt Text

For example, for an image I uploaded some time ago, I’d note:

  • Dimensions: 640 by 425 pixels
  • URL: https://www.ratburger.org/wp-content/uploads/2018/09/S146.jpg
  • Alt Text: HDR image: total solar eclipse 2010-07-11

Now go to the group post where you wish to include the image.  Starting on a line by itself, include an HTML img tag for the image like the following:

<img src="https://www.ratburger.org/wp-content/uploads/2018/09/S146.jpg"
  width="640" height="425" class="aligncenter"
  alt="Alt Text: HDR image: total solar eclipse 2010-07-11" />

Replace the various fields with the information you’ve recorded for your image. The “aligncenter” specification will centre the image (what you usually want); you can also use “alignleft” or “alignright” if you know what you’re doing.

If your image is larger than will fit on the screen (for example, images from digital cameras), you’ll need to recalculate the width and height to rescale it to fit. You typically don’t want an image to be wider than 640 pixels, and 600 pixels is a good choice. Let’s assume you have a monster image which is 6016×4016 pixels (as produced by a Nikon D600 digital camera) and you wish it show it as 600 pixels wide. You’d specify width=“600” in the img tag, but then you need to calculate the height in order to preserve the shape (“aspect ratio”) of the image. To do this, multiply the original height by the new width divided by the original width, in this case:

4016 × (600 / 6016) ≈ 401

(round to the nearest integer), and then specify height=“401”.

When you publish your post or comment in the group, the image should now appear.

Why should something so conceptually simple as including an image in a discussion group require such contortions?  Welcome to “the software that runs one third of the Web” (which is what they say, without adding the concluding phrase, “into the ground”).  As I mock their download page:

WordPress: Worthless, and also free

4+

Users who have liked this post:

  • avatar
  • avatar
  • avatar
  • avatar

On the subject of Korea…

On the subject of Korea, I visited South Korea about a dozen times with my previous employer. I have found some scans of photographs I had taken on one of my trips in February of 1986. I share them here to sort of let you know the type of war footing that the South considered themselves under.

Continue reading “On the subject of Korea…”

13+

Users who have liked this post:

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar

Knowledge Base: Resizing Images

When you include an image in a comment or post with the “Add Media” button, you’ll be asked to select the size at which it will be displayed in a box at the right.  You’re usually given options like:

  • Thumbnail
  • Medium Size
  • Full Size

with the dimensions in pixels of each option shown.  The options shown depend upon the size of the image you uploaded.

The sizes available in the box are not your only options.  Once the image is included in your post or comment, you can click it, which will highlight it and display a series of “handles” which you can click and drag to resize or scale the image.  Usually, you’ll want to use the ones at the corners of the image, which scale the image preserving its aspect ratio (ratio of width to height).  Just drag the handle until the image has the size you wish to appear in your post.

There’s an important detail, however.  You should never re-scale an image to be larger than the size at which you inserted it, only shrink it to be smaller.  When you insert the image from “Add Media”, a pre-processed image of that size is selected.  If you scale it to be smaller, the user’s browser will scale it and no resolution will be lost.  But if you expand it, the smaller image will be blown up to the larger size and will appear blurry.  If in doubt, insert the image in your post at “Full Size” and scale it down to the desired size—this is the age of Extravagant Computing and few people will notice the inefficiency of doing so, while if you scale up a small image, it will look crude and ugly.

13+

Users who have liked this post:

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar

Knowledge Base: Including Images in Comments on Posts

When you’re writing a comment on a post and wish to include an image, it can seem puzzling, since the mechanism is entirely different from that used when you add an image to a main post.  Why?  Because the image facility for main posts is a WordPress built-in feature while the comment composition editor is a plug-in by a third party which does not conform to the same interface.  It would be nice if it did, but, not wishing to implement everything from scratch, we work with what’s available.  Once you get used to it, including images in comments isn’t all that painful.  Let’s dig into it.

You insert images in comments by clicking the icon at the right of the comment composition box that looks like a mountain range (that’s supposed to suggest a picture).  When it pops up, you’ll see the following dialogue:

Insert image dialogue

(The icon which summons this dialogue is shown at the top left, subdued.)

In the Source field, you enter the URL of the image you wish to insert.  That’s the Web address whence the image can be accessed.  You can use any image hosting service, but by far the best way is to upload the image to the Ratburger Media Library.  You do this, ideally before beginning to compose the comment (but if you forget, simply open another window, navigate to Ratburger, then use the New/Media item in the menu at the top left), by specifying the image file to upload from your local computer.

After you’ve uploaded the image, its URL at Ratburger will appear in the panel at the right of the window.  Copy it to the clipboard and dismiss the Media Library window.  It will look something like:

https://www.ratburger.org/wp-content/uploads/2017/12/insimg.png

which happens to be the URL for the image above.  That’s what you paste into the Source field of the Insert/edit image box.  The “Image description” field is optional, and specifies the alternative text displayed for users whose browsers cannot display images.  This is particularly important for the blind who use screen reader programs, but this is a courtesy and not a requirement.  The Dimensions will be filled in automatically and needn’t be changed unless you wish to resize the image.

If you upload a very large image (for example, a raw snap from a digital camera which you haven’t resized for use on the Web, the image will be automatically scaled to fit within a 600×600 pixel bounding box.  It is not possible to specify alignment (left, centre, right) of images within comments as one can for images in main posts.

Let me be the first to say that this is less than ideal, but it’s a lot better than what WordPress provides out of the box: no facility for including images in comments whatsoever.

In WordPress/BuddyPress posts and comments on posts have nothing in common with posts and comments in groups.  There is presently no simple way to include images in groups.  That doesn’t mean you can’t include images there, just that you’ll have to know how to type an HTML img tag into your message to embed the image.

8+

Users who have liked this post:

  • avatar
  • avatar
  • avatar