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
Hi Folks
A touch of jumping before looking there. I wrote the above the same evening that I ordered the add-on. The following morning I had an email receipt that provided all the instructions needed to assign the add-on wherever necessary.
Regards
Pete
Excellent. So is add-on working for you?
Hi Steev
Thanks for the ‘nudge’. Yes your add-on works nicely. Unfortunately, I fear that what I was hoping for is probably more difficult to achieve. If, Concrete supported placing a block within a block then I could place your annotated picture block in position, flow the text around it as appropriate and end up with the same sort of function that one gets pasting in a picture from the Editor menu. I suppose what I am seeking is that functionality, but with the opportunity to add an annotation.
As it now stands I have to drop out of the text block I am editing. I then have to import your picture block that takes up the full page width and insert the picture and annotation. I then have to post in a new text block and carry on with the text. That generates a whole lot of ‘white space’.
My current work around is to lengthen the canvas of any picture in my graphics editor, type in the annotation and then re-save. It is a fiddle but it works (sort of). Mostly I am trying to avoid annotated graphics unless an author sends me stuff for posting up that requires it.
If it is clear that I have yet to acquire more block handling skills I am very happy to be pointed in the direction of instructions.
Best wishes
Pete
Can you not just add a table with 1 column and 2 rows, place the image in the top row and text in the bottom. You can then float the table to the right?
It not ideal but will do the job
Hi
Many thanks for your contribution. I have tried your suggestion and it works a treat as it allows the table to be aligned as if it were a graphic. It obvioulsy requires one to know the dimensions of the picture so that the table is set to the right size. In my experiment I used a table of one row and one column and used the offered ‘Caption’ box for the annotation. I have not checked on it character limit but for a long annotation your suggestion of two rows would be better. I am not sure if I go for the border around the graphic but that can be switched off during set up.
That looks to me to be the best solution so far to meet my personal graphics use requirements. Thank you.
Regards
Pete
Great info here. I finally managed with a content block to have annotations below the image.
The only thing what bugs me is that i’m unable to change line-height in the css for the text. the lines are spaced too far.
It seems to be impossible. All I do in the css won’t do the job driving me nuts.
If you are using the content blocks ‘enhanced image’ option you should be able to adjust the css ‘figcaption’ coding to target the line height?
If something appears to be overriding your styling then try giving the image a custom class to wrap around it?