Viewing Multi-line image captions

Multi-line image captions



User: Michael B. 7 years ago
I am new to EverWeb and just migrated a moderate-sized iWeb site (about 60 pages) without too much trouble. One feature of iWeb that I missed was the ability to create an image gallery with multi-line image captions and control of font selection, size and weight. The best I have been able to do is enter something like

<font face="raleway–medium"><strong>Caption text</strong><br><font size="2">Caption note</font>


in the Image Caption field of the Image Gallery widget. This is ugly in so many ways. Is there a better approach? I realize that there are a lot of third-party gallery widgets out there, but it is not clear which one would solve my problem without forcing me to give up aspects of the default gallery that I like.
User: Yelena 7 years ago
Michael, click on your image gallery on the page, open Fonts window and select your Fonts....

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21&quot; OS X 10.10.3
User: Michael B. 7 years ago
Yelena, thanks for the suggestion. Unfortunately, I cannot vary the font size or style within the caption when I do this. Also, the slideshow that launches when you click on an image does not use the font selected but a serif font instead and displays the entire caption on a single line even when it was entered on multiple lines in the Image Caption field. I will continue to experiment.
User: Yelena 7 years ago
Michael, that is odd.... I can definitely change the font, the size and weight....(Although I have not checked what happens when you start the slideshow) but definitely within the Gallery itself....I guess we need professional help here...:)

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21&quot; OS X 10.10.3
User: Michael B. 7 years ago
Yelena, it is odd. I can change the font as you suggest, but only for the ENTIRE caption and for ALL the captions in a gallery. iWeb used to give me control character-by-character for each image caption independently. Seeking professional help...
User: Yelena 7 years ago
That is probably beyond EW at this point...:(

-------------------------------
Yelena
MacBook Pro OS X 10.10.3
IMac 21&quot; OS X 10.10.3
User: Roddy 7 years ago
Just because you can do something doesn't mean that it's a good idea. iWeb's downfall was that it was more akin to a DTP application than a web design one and produced really inefficient code.

I'm not sure why you would want to do this but it can be done if you are prepared to learn some basic HTML and CSS.

You are attempting to use HTML to style the font. You should use CSS. Styles can be inline but this is also very inefficient when you are applying them to a lot of items. Without going into too much detail, you can target the captions in the gallery and insert styles by pasting them into the Head Coe box in the Page inspector.

First, you need to publish the gallery and look at the source code to find out its ID number. If it is the first item on the page, this will be #gal_0

In the example below you will see the overall styles for the caption and two spans - each with a class name - to create a change in font styling...

<style>
#gal_0 .galleryItem .caption{font:15px Verdana, sans-serif;color:#000000}
#gal_0 .galleryItem .caption span.blue{font-weight:bold;color:#0000FF}
#gal_0 .galleryItem .caption span.red{font-style:italic;color:#FF0000}
</style>

The HTML to insert the caption would look like this...

Caption<br><span class="blue">Line Two</span><br><span class="red">Line Three</span>

It will show the above code in EverWeb but will look like this when published...



-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Michael B. 7 years ago
Roddy,
Thanks. This is exactly the kind of advice I was hoping to get. I realized that CSS is the way to go, but for someone who gave up hand-coding HTML when iWeb appeared, the learning curve is pretty steep. I will work with your suggestion, and see what I can do. If you look at a page on my wife's site (bellslessons.com/sea.html), you can see why I want some control of image captions. It may not be great design, but it was easy to set up and maintain in iWeb and I was looking for the same in EverWeb.
User: Roddy 7 years ago
HTML5 is child's play c/w previous versions and it's worth learning a little basic CSS and the correct syntax. Here's some info about what goes where when inserting code into an EverWeb page.

I've never really looked at the EverWeb Gallery widget since I obviously don't use it. The caption text is inserted into a div so you could add your HTML as an h4 heading and a paragraph for better SEO if needed ...

<h4>Caption</h4>
<p><span style="blue">15&quot; x 22&quot;</span><br>
Description &hellip;</p>

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.


Post Reply
You must login or signup to post.