2

I'm making a personal website for a client and I want it to be easy to edit. I'm trying to replicate the data the client had on a previous personal website made in pure html, and it looks like the image below:

Image with description side by side

I want to add an image with a description about it side by side preferably on a box like that. I tried just adding a shortcode from the "Ultimate shortcodes" plugin so that I can put the image on a column taking half of the screen and the text on the other column taking the other half of the screen like that:

Image and description on columns

But there isn't a very defined relation between the elements, they look like they're just floating there, and it's hard to edit as every time you want to add such "component" you actually have to add three shortcodes and then insert the image and the text.

Using the built-in image caption doesn't work either, as the caption goes only and directly below the image and doesn't expand with the text.

So, my question is: how can I add a way for the end user to just add the image and a description so that it'll show the description on the side of the image? Is there a plugin that does that or can I add a custom css to make the image caption go to the right and expand with the text?

Improve this question
2
  • It appears that from a structual standpoint, the shortcode is doing that job. You just need to fine tune the alignment of things on your page this way it's perfect. The best way you can accomplish that is by making sure your CSS rules in your stylesheet are set appropriately for what you want. (i.e. look over and test your padding, margin, display, height, and width properties in your stylesheet. Hope that helps.
    – klewis
    Oct 31, 2016 at 2:11
  • You should be able to do ALL or MOST of it - emulation of the HTML - with the built-in image- and caption-related CSS selectors, possibly in combination with category, tag, post, or other classes. The user would then be able to use the built-in media tools: It's not exactly a WordPress question at that point, though familiarity with WP would give you a head start. The other questions may come down to just how flexible vs fool-proof you need to make it, and what or how much instruction, guidance, training your users are expected to receive and apply.
    – CK MacLeod
    Oct 31, 2016 at 7:54

1 Answer 1

Reset to default
1

Yes, I think this is a great, fundamental question of Wordpress editing and content creation by low-level users who are met with the big blank editing area and don't know how to wrangle html. There are myriad answers: hardcore coding, softcore coding, plugins and everything in-between.

The answer for me is Advanced Custom Fields. I know I'll be shouted down here since you aren't meant to answer questions with a plugin solution (yes, that's totally odd - who has ever used Wordpress without a plugin? It even comes shipped with two - one useful and one stupid). Anyway, as far as I'm concerned ACF is core Wordpress.

Take a look here for an example for exactly what you're talking about (the video in particular shows how it works).

Jump on board and enjoy Wordpress at the next level. For you and for your clients.

Improve this answer
2
  • I really liked ACF, so I'll give you a thumbs up! Also, thank you for providing the best answer to the question, even if it is slightly out of the rules. That said, I still couldn't find a way to implement what I wanted with this plugin, as it would still need a bit of coding, and my client doesn't want to code, but use only the visual editing tools. I think the best solution in this case will be to rewrite the text.
    – JefersonFG
    Nov 2, 2016 at 18:50
  • You shouldn't need to force the client to use any code whatsoever. If you set it up as a Flexible content and/or Repeater field you can display text areas and images perfectly on the page using your own css. You can choose the size of the images and the exact placement of the accompanying text. This can all be done at the CSS/ACF level and then all the client sees is some lovely, easy fields: eg. i.imgur.com/aEj2mwp.jpg
    – Monkey Puzzle
    Nov 4, 2016 at 0:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.