Slider: a slide with text, linking to an existing posting

Vfxdude » BigFeature

Slider: a slide with text, linking to an existing posting - how to?

(9 posts) (4 voices)

Started 2 years ago by Colorit
Latest reply from vfxdude

Tags:

Colorit
Member

Hi,

I have read your tutorial concerning the slider here:

http://www.vfxdude.com/bigfeature/2009/08/the-bf-slider/

It works fine, if I add just images to this slide "pages".

But what I still haven't understand is, how to add an excerpt of a post to this slider, like you have done it with the headline text: "At vfxdude we speak in code and dream in colors" in this example page:

http://www.vfxdude.com/bigfeature/example-pages/frontpage/

Could you please explain again, how to add an post's excerpt with an image and text like you have done it in this example?

I have:

1 parent page "startslider"

then 6 children pages, linking to "startslider", called "startslide1", "startslide2", ...

Each "startslide"-page has an image from the media library in it. So far, so good, it works fine.

But I still don't know, how to get an image, headline and text in such a children page, that links to an existing posting.

Thanks for any help.

Posted 2 years ago #
zedc
Member

Would be nice to learn more on this.

What I have always done is use any photo editing s/ware to merge text with an image as one file and then link the image.jpg to the relevant post in the slide pages.

Not sure if this makes sense to you?

Posted 2 years ago #
zedc
Member

see what i mean here: http://bit.ly/duDTpd

Posted 2 years ago #
vfxdude
admin

you can wrap a div around the content and set a height:
<div style="height: 346px; border: #eee 1px solid;">lorem ipsum</div>

to position the text next to the image, you add a alignleft class on the image, like this:

img src="#" class="alignleft" /> Lorem ipsum....

This can also be done with div's. Here's the code used in the example slide:

<div style="height: 346px; border: #eee 1px solid;"> <div class="alignleft mr40">place image here...</div> <div class="mt40 mr20"> <h1>heading</h1> <p class="intro">Lorem ipsum...</p></div> <div class="clear"></div></div>

If you want to display posts in the slider (preformated), use a shortcode like this:

[bfslider name="featured" type="category" imagesize="normal" numwords="40" height="350" maximageheight="300" bgcolor="#666" color="#fff"]

or like this for feature sized default images with the title as a caption:

[bfslider name="featured" type="category" imagesize="feature" height="420" maximageheight="350"]

Posted 2 years ago #
Colorit
Member

@ admin

Thanks a lot for your time, I think, I have now understand it.
I will try it with the shortcodes first.

Thanks.
Chris

Posted 2 years ago #
Colorit
Member

Strange ...

I used your suggested code:

[bfslider name="malerei" type="category" imagesize="normal" numwords="40" height="350" maximageheight="300" bgcolor="#666" color="#fff"]

"malerei" is the name of the category, from which I would like to show the (one) post with its text in the Slider.

But all the image-slides, as described before, appear well, but in the slide, where I added your shortcode appears just the code as it is:

[bfslider name="malerei" type="category" imagesize="normal" numwords="40" height="350" maximageheight="300" bgcolor="#666" color="#fff"]

with no effect or "interpretation" as slide.

The category "malerei" definitively exists and the post, I would like to show within the slider, is really within this category.

Look:

http://tinyurl.com/ycnuwjc

Posted 2 years ago #
Colorit
Member

Now I have inserted just the image :-(

If I add the shortcode in the "startslid10"-page (= a children of "startslider") it shows exact this code in "real text", not formatted/showing the post.

Posted 2 years ago #
bhalliburton
Member

When you find out let me know. I am curious about this and I would love to get this working. It would be great if there was a video for this too :-)

Posted 2 years ago #
vfxdude
admin

you have to add the slider code in html mode (press the html tab on the editor).

Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.