Recent Widgets


Register for DashboardWidgets

Recent Forums Posts

Partners


iCompositions

MacDesktops.net

RSS Showcase
RSS Comments
RSS Forums

This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies. Posted in: Widget Design

Adjust size of RSS feed images

Author Message
sechlerm



Joined: 27 Sep 2009
Posts: 6

Posted: Sun Sep 27, 2009 - 3:11 pm    Post subject: Adjust size of RSS feed images Reply with quote

Is the a way to adjust the size of the images that are posted on the RSS feed on the widget, or code to turn off the images from the original RSS feed.

Thanks
Mat
View user's profile Send private message Send e-mail Widgets
Hawkman



Joined: 12 Jun 2005
Posts: 28
Location: Derby, UK

Posted: Sun Sep 27, 2009 - 4:30 pm    Post subject: Reply with quote

Assume you mean images in the article body. Do it in CSS.

Scale images down to fit horizontally if they're too big:
Code:
#content .articlebody img {
    max-width: 100% !important;
    height: auto !important;
}


Turn post images off completely:
Code:
#content .articlebody img {
    display: none;
}
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
sechlerm



Joined: 27 Sep 2009
Posts: 6

Posted: Sun Sep 27, 2009 - 4:52 pm    Post subject: Reply with quote

Thanks a lot.

Is there a way to make a box on back to switch in between those choices?
View user's profile Send private message Send e-mail Widgets
Hawkman



Joined: 12 Jun 2005
Posts: 28
Location: Derby, UK

Posted: Sun Sep 27, 2009 - 7:07 pm    Post subject: Reply with quote

It's Teach sechlerm Dashcode Day, is it? Wink

I'm going to do this largely through code comments, rather than an entire tutorial. You'll probably follow it a little better if you try this one after the multiple feeds tutorial I posted.

We need to alter our CSS slightly:
Code:
/*
(This is a non-code comment in CSS.)
Elements are styled by a kind of path; it specifies an element to be styled by which elements contain it.

For example, the first one means:

any IMG element, inside an element with the class "articlebody", inside the element with id "content", inside the element with id "front"
*/

#front #content .articlebody img {
    max-width: 100% !important;
    height: auto !important;
}

/*
This is almost the same, but with an important difference:

any IMG element, inside an element with the class "articlebody", inside the element with id "content", inside the element with id "front" AND the class "noimage"

Our javascript adds and removes this "noimage" class on the "front" element, and thereby makes this style apply when we want it to, and not apply when we don't want it.
*/

#front.noimage #content .articlebody img {
    display: none !important;
}


Drag a new checkbox from the library onto the rear of the widget, select it in the source pane (see image; make sure you select the whole thing, not one of its children) and name it "Show Images".



Under Behaviours, set imageToggle as its onclick handler.



Now, use this code:

Code:
// This is called whenever the checkbox or its label is clicked.
// ID CRASHCOURSE: only one element in a document can have a
// particular "id". That's why we use "getElementById" to find
// one element, because we know it's unique. In CSS, ids are
// shown as #something in the hierarchy.
// CLASS CRASHCOURSE: elements can have mutiple classes and
// lots of elements are allowed the same class. They're
// used for adding styling information (CSS) to
// elements.
function imageToggle(event)
{
    // checks the id of the element which was clicked; if
    // it was the element with id "input", it was the checkbox
    // itself -- so it will have automatically toggled. But, if the
    // id is NOT input (that's the "!=") we have to toggle it ourselves:
    if (event.target.id!="input") {
        // the "!" means "not"... here, we set the checked state of the
        // our checkbox ("document.getElementById("input").checked") to the
        // "not", or opposite, of its current state.
        document.getElementById("input").checked = !document.getElementById("input").checked;
    }
    // now, having switched the state if necessary, we need
    // to do things based on whether it is checked or not.
    // It may be easier to understand if you read the "else" part first!
    if (document.getElementById("input").checked) {
        // if it's now CHECKED, we remove the class
        // from #front and the images will display.
        document.getElementById("front").className = "";
    } else {
        // if it's now NOT CHECKED, we add a
        // class "noimage" to the element with id "front" (that's
        // what holds all of the front of the widget). This class will
        // cause our second CSS rule to be applied automatically
        // and hide all the images.
        document.getElementById("front").className = "noimage";
    }
}


Anywhere I say "input", I'm assuming that's the correct id for you. It should be, by default, but compare to this image and rename yours if necessary:

View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
sechlerm



Joined: 27 Sep 2009
Posts: 6

Posted: Sun Sep 27, 2009 - 7:14 pm    Post subject: Reply with quote

Man you RULE!!! Thanks for all your help sorry for being a pain.
View user's profile Send private message Send e-mail Widgets
Hawkman



Joined: 12 Jun 2005
Posts: 28
Location: Derby, UK

Posted: Sun Sep 27, 2009 - 7:16 pm    Post subject: Reply with quote

No worries. Gotta learn somehow, right?
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.

 
Powered by phpBB © 2001, 2002 phpBB Group