Help with images in twitter feed

Can someone please advise on how to reduce the size of a photo in the twitter feed module. Often the photographs are so large that the are cut off the bottom of the screen. I would like photo’s to have a maximum size of 600 pixels. Any help in achieving this would be gratefully appreciated.

Edit. Well I misread the title at first, so now it will be for both Twitter and Ticker.

Twitter

If you select ‘Full twitter timeline’
then override the timeline
In the CSS there will be
.photo

so you will want to have for example
.photo img{width:600px;}

so this will control the image size, example:


without this change it’s much bigger image there (as you said cut off at the bottom of the screen as well)

Depending on the size of your region with twitter, you might want to adjust some other values there as well.

Ticker (rss feed)

Short version, add following line in css of your ticker (for example)
.image img { width:600px;}

Longer version
So when you have a ticker with rss feed that has images.

If you change the template to ‘Image overlaid with the title’

then click the ‘Override the template’ checkbox

Under Optional Style Sheet
you will have the default
.image img { width:100%;}.cycle-overlay {color: white;background: black;opacity: .6;filter: alpha(opacity=60);position: absolute;bottom: 0;width: 100%;padding: 15px;text-align:center;}

You can change it to for example width 50% (that will still depend on the size of the image in the feed).
Alternatively you can also change it to hard value like let’s say 600px

.image img { width:600px;}.cycle-overlay {color: white;background: black;opacity: .6;filter: alpha(opacity=60);position: absolute;bottom: 0;width: 100%;padding: 15px;text-align:center;}

I hope that will help you, if something would be not clear, let me know.

Thanks Peter, that has worked for me. I am showing a couple of different twitter feeds full screen so just making this change has made all the difference.

Hello !
I have the same problem with tickers.
I resize pic but text is on bottom near the pic. I would the text is on top near the pic.
Actually it look that:

I modify “text align” of ticker but no effect in “optionnal style sheet”:

.image img { width:10%;}.cycle-overlay {color: white;background: black;opacity: .6;filter: alpha(opacity=60);position: absolute;bottom: 0;width: 100%;padding: 15px;text-align:TOP;}

Does anyone know how to text “top” ?
Maybe there is a “.text.txt”?

thx.

I find a solution:

I juste add this line in “optional data sheet”:

img {
  vertical-align:top;
}

And it work like a charme :slight_smile:


After some test issue is not very good. if text is long , 2sd line go bottom the pic :frowning:

Look ,
short text:

long text:

Does anyone know solution?

.image img {
    float: left;
    width: 20%;
}

well width, whatever you have there if you’re happy with the size, but float:left; should do the trick as far as alignment is concerned.

Thanks ! it look work fine.
Do think i can center the texte with a method?
Actualy I put it in in HTML because it’s not realy esthetic the text on top.

Maybe with css i can center (between ip and down, not left and right) the text ?