A logo in gallery description

Ferguson · February 26, 2015

In some (not all) galleries I want to put a simple logo, specifically when they pertain to a college.

I do not want it to be the same logo in every gallery, some I want to leave them off.

I do not want to "make it custom" for each gallery as then global changes are not inherited, at least as I understand it, and will make it much harder to make changes to the overall look and feel (and as best I can tell inheritance is all or nothing -- it's not for one particular branch under a folder or such).

The obvious thing to do was to put an image tag into the gallery description, and that works. Except not well. It does by default an image where the text then starts on the bottom left of the image.

And as best I can tell, all the obvious html/style fixes are defeated inside of smugmug somewhere. Specifically:

- Align styles appear to be stripped and cannot be used
- Table appears to be stripped and cannot be used

I've tried combinations of span and div and trying to force divs to be inline and... nothing seems to work. The closest I can get is a div with a background image -- but that's under the text, and I want the text to wrap around it.

What am I missing? is there some reason table tags, which would be nice and simple, can't go in a gallery description? Or that align tags are being stripped?

I don't do html all that much, so maybe there's some magic that is permissible I am missing. All I really want is a logo (image tag) on the left, and on the right (starting at the logo's top right) have the gallery text. It's trivial if I had full html, but smugmug is stripping out all the tags I need.

Anyone have an idea? Or a better approach than here? Just a way to put a different logo (including no logo) on each gallery page.

Allen · February 26, 2015

Do not use the gallery description but add an html content block just below the breadcrumb above the gallery.
Make sure to make the gallery "Just this gallery".

I have a rather extensive html block here. Actually two, one above the other.
http://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G/

Allen · February 26, 2015

I used Flex CSS for each component so I could distribute them across the block. Also used @mobile rules to
hide individual components as the browser is shrunk down to mobile size.
For just two blocks/divs, use display: ..." to align them next to each other.

or something like this

text

Ferguson · February 26, 2015

Allen wrote: »

Do not use the gallery description but add an html content block just below the breadcrumb above the gallery.
Make sure to make the gallery "Just this gallery".

But that's what I am trying to avoid doing. If I later want to change the overall web site appearance (not just this logo) I want to be able to do it once, and not have to go change each gallery.

Unless I do not understand (as I have not tried it) -- if you do "just this" it, in a sense, breaks the inheritance from the "all galleries" so if I were to do something else (let's say change the background or swap the order of folders and galleries or whatever), it has to be done in each gallery?

denisegoldberg · February 26, 2015

Ferguson wrote: »

...The obvious thing to do was to put an image tag into the gallery description, and that works. Except not well. It does by default an image where the text then starts on the bottom left of the image.

I just did a little experimenting, and table tags are definitely being stripped. The <img src= tag is fine, and <p/> tags can get you to the next line. It looks like the best you can do inside a gallery description is to have the logo on one line and text on the next.

--- Denise

Allen · February 26, 2015

Ferguson wrote: »

But that's what I am trying to avoid doing. If I later want to change the overall web site appearance (not just this logo) I want to be able to do it once, and not have to go change each gallery.

Unless I do not understand (as I have not tried it) -- if you do "just this" it, in a sense, breaks the inheritance from the "all galleries" so if I were to do something else (let's say change the background or swap the order of folders and galleries or whatever), it has to be done in each gallery?

The html content box widget will have a specific class name. You can add it to "all galleries" then with
CSS define where it would and not show.

What style galleries are you using?

Allen · February 26, 2015

I use div's in my gallery descriptions with the div's side by side. No reason the left div can't be a thumb image.

example: 2 div's, R & L
http://www.photosbyat.com/Birds/2015-Birding/Birding-2015-January/2015-01-03-Ivory-Gull

Ferguson · February 26, 2015

Allen wrote: »

I use div's in my gallery descriptions with the div's side by side. No reason the left div can't be a thumb image.

Actually this might solve it, having a named CSS apparently allows one to use class names that include style tags that are otherwise being stripped. I wonder why they allow that, but not direct use, of something like align.

I think with this I can get what I need, as if I can do a style with the align attribute I'm good. Can't try it right now -- will later. Didn't even occur to me to use named styles instead.

Thanks.

Ferguson · February 26, 2015

I'm still stuck, and I suspect I just don't know the right HTML. The issue is that the smugmug design is somewhat responsive, so it's using DIV's and letting them float. I'm using the collage layout by the way.

Inside of the gallery description, I can get it to work by putting the class definition in site-wide css, and then referring to it. This avoids the stripped attributes.

Here's the issue - depending on screen with (and thus how many lines of text the text part of the description is), the logo I want to emplace may be either shorter than, or taller than the text. If it is taller than the text, the first image is shifted right making room for it. A small screen shot of the left size is shown. In that example, if I have a lot more text, it wraps nicely and the photo is pushed down under it, but with less text as you can see, the positioning is such that the next "line" which is the photo DIV's are going to the right of the image as well.

What I really want is for that paragraph that is the gallery description to fully contain the image, in that the image cannot extend lower than it. float:left doesn't do it (you get the above).

If I could do tables I can sort of do this (on a very small device it wouldn't put the image on a separate line I guess), but I can't do tables.

Maybe I'm missing something?

Here's a gallery WITHOUT the image stuck in (they are live so I don't want to mess them up). The idea is the logo can go on the left of the description, and if a bit taller it pushes the photos down.

Apologies if this is easy HTML. I learned it back when it was new, and have not really kept up with all the fancy stuff.

Allen · February 26, 2015

Add this to the end of your html to clear the floats.

Ferguson · February 26, 2015

Allen wrote: »

Add this to the end of your html to clear the floats.
<div style="clear: both;"></div>

Perfect. You know, I almost tried that, in that I tried using display:inline-block, but couldn't get that to work. This works fine.

Here's an example gallery with it done: Live Gallery

A logo in gallery description

Comments