Hi
A contributor to my site has sent me some material that includes pictures. However, each picture comes with extensive explanation underneath which I suppose one might call an ‘annotation’.
To date I have never used annotated pictures so I am hoping somebody would be kind enough to point me in the direction fo some guidance on how to handle the issue. It is no doubt a simple task but not until you know how.
Regards
Pete
The easiest way to add a ‘Caption’ to an image is using the Contents block. Before you see the option to add a caption make sure you have ‘Enhanced Image’ ticked on in the Rich Text Editor options in Systems Settings. Once this is ticked on you will see the option to add a caption to the image.
System Settings > Basic > Rich Text Editor
If you want to add a caption using the actual CMS image block you will need to create an image block template to display the text entered in the Title section of the block. That’s what I have done in the past.
If you need help with this I can create a template for the image box or you make your own custom block if you need Rich Text Editor for the text.
You could try one of my add-ons: Webp Image :: Concrete CMS Add-Ons
or: Promo Block :: Concrete CMS Add-Ons
Thank you all for your suggestions. It is nice to know that somebody has spotted my problem issue.
Thanks Studio 108. I have added the Enhanced Image option to the text editor, but was not sure where to go next. I tried adding a picture and the new dialogue box offered me ‘Caption’ as an option. That really seems to be what I was seeking. It looks as if there are no formatting options in a Caption which is perhaps what TN Designs is suggesting could be addressed.
Thanks TM Designs for your offer. I think I had better try out Studio 108’s suggestion and see if it will do for real rather than test material. I may get back to you later.
Thanks SteevB for your suggestion. I looked at a couple of your options but was not really sure that they would enable me to add the captions. Anyway, I will get on and upload some text and see how it goes with the graphics.
Many thanks to you all.
Regards
Pete
Hi Studio 108
I am pleased to report that the pictures have been added along with the captions. I am a bit disappointed that one can have any layout as long as it is left oriented and the caption will span the whole page. There seems to be no way to get text wrap around the captioned picture.
If you have the time and inclination I would be interested to hear about your workaround for these issues.
Regards
Pete
My first go at the task is here: [https://mono-tube.org.uk/index.php/technical-issues/boilers/mike-tilbys-electronically-controlled-mono-tube-boiler##Part2]
Hi PeteThePen1,
you can control the caption width by adding additional css styling to control the width of the image and figure caption together. With images set to the right the CSS class to target is ‘figure.content-editor-image-captioned.content-editor-image-right’
So you could add something like…
figure.content-editor-image-captioned.content-editor-image-right{
width: 80%;
}
This will set the figure wrapper which surrounds the image and the caption to 80% (you can set it to a px width also). So in effect it sizes both the image and the caption to the width of 80% of the column width. I hope this makes some sense?
The issue to watch for when ranging images left or right is when it sizes down on mobile screens it can result with very narrow columns of text. Really you want the width to be set to 100% on mobile screens without any ranging left or right. This is achieved by using media queries that allows you to set certain CSS styling to be activated depending on what size the screen viewing the website is.
Anyway I am rambling on a bit!
Hi Luke
Many thanks for picking up on my request and expanding my understanding (potentially!) of what needs to be done. I must admit to having rather given up on the finer points of HTML once decent CMS systems arrived. These days the height of my activity in that line seems to be swopping paragraph breaks for line breaks.
Ah, Yes! The issue of phone screens. I must admit to having not really given that any thought since I have rather presumed that our audience are elderly blokes with their elderly desktops hiding away after dinner. (OK that’s me but I know of several similar fellows). Just had a look at Awstats and am surprised:
| Windows | 1,291 | 86.7 % | 2,030 | 86.7 % | |
|---|---|---|---|---|---|
| Macintosh | 91 | 6.1 % | 141 | 6 % | |
| Unknown | 35 | 2.3 % | 43 | 1.8 % | |
| iOS | 30 | 2 % | 30 | 1.2 % | |
| Linux | 23 | 1.5 % | 39 | 1.6 % | |
| Android | 18 | 1.2 % | 57 | 2.4 % |
That is a huge amount of traffic given that these are the figures for March and more than 5% of it is on mobile devices. Looks like I should give more attention to the needs of mobile users. From what you have said it looks as if “Text breaks, image centred” (one of the picture layout options on the other Website I service) might be best.
Many thanks indeed. I will go off and do some editing.
Best wishes
Pete
I have a new block in the PRB awaiting approval.
Example of my ‘Captions’ block: Concrete CMS Image Captions Add-on. Built for accessibility, pagespeed and responsiveness.
Would something like that help?
Hi Steev
Many thanks for remembering me and my petty problems with graphics. In answer to your question, yes something like that would help. So when the Block has been approved, please let me know.
Apologies for the slow reply. I am a member of too many pressure groups that are trying to moderate the damage the current dysfunctional UK Government is doing. They all send far too many emails and bury other stuff. Once we have the election I will drop out of most of them and perhaps get control of the inbox back.
Regards
Pete
Will let you know as soon as it is approved.
Hi Steev
Many thanks for the reminder. I have now got organised an purchased your add on. Sadly, the Concrete System would only allow me to assign it to the site that was taken down about 18 months ago (cyclingotherwise.co.uk) rather than to the current site https://mono-tube.org.uk/. I have put in a request asking for this to be sorted out so I cannot yet report back on how successfully the product has worked for me.
Best wishes
Pete