Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › Back End › [Solved] Thumbnail with caption

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 16, 2009 at 8:03 am #27221
    wingye
    Member

    Hi all,

    Lately I have play around with wordpress(wonderfull creation) and manage to create my own theme. However everything looks like the html page i have create but 1 thing i just cant get it to work is my portfolio section.

    Its actually working as intended, but inside my portfolio page i have seperate my project in thumbnails which display a small picture + client name and category of project.

    I can get this done in wordpress aswell but if want to add a new project to the page i have to dig into the code to do so which is not very efficient. So i came across http://wordpress.com/ (front page)site and saw they use something similar to what i would like to have in my portfolio page. So first of all i though it was a plugin so i tried and tried to look for it but nothing show up as i want.

    Do you guys know how i can get this effect to work and able to add new project just in the admin panel ?

    Best regard
    Wing

    And thanks in advance

    December 16, 2009 at 11:41 am #68221
    TheDoc
    Member

    You can accomplish this with a simple WordPress loop and a couple custom fields.

    Check out this video:

    https://css-tricks.com/video-screencasts … wordpress/

    December 16, 2009 at 12:11 pm #68227
    wingye
    Member

    Hey TheDoc thanks alot fo your reacton, I am going to check out the vid an hope to get it to work as i am kinda new to all this wordpress…

    if something doesnt go well i hope i can ask for more help

    December 16, 2009 at 12:27 pm #68228
    TheDoc
    Member

    Yea, the only reason you think it’s difficult to accomplish is because it just doesn’t look like a "normal" blog loop. But really, you can make WP output whatever you want!

    December 18, 2009 at 7:18 am #68278
    wingye
    Member

    Hey TheDoc,

    Sorry to bother you again but i have tried and tried but all i got is a white page.

    Code:

    50, ‘post_parent’ => 24, ‘post_type’ => ‘page’));

    while (have_posts()) {

    the_post(); // vital

    $thumbPath = get_post_meta($post->ID, ‘thumbnail’, true);

    if ($thumbPath == “”) {
    $thumbPath = “/images/nietbeschikbaar.png”;
    }

    ?>

    ” class=”inner”>

    December 18, 2009 at 1:27 pm #68282
    TheDoc
    Member

    I think this:

    Code:
    $thumbPath = get_post_meta($post->ID, ‘thumbnail’, true);

    if ($thumbPath == “”) {
    $thumbPath = “/images/nietbeschikbaar.png”;
    }

    ?>

    Needs to come before "while post".

    December 19, 2009 at 7:54 am #68316
    wingye
    Member

    hey TheDoc,

    Thanks for the reply.. i am going to give it ago soon.
    Btw i readed somewhere were they said wp 2.9 comes with thumbnail option is that true?
    if so do you have a link to how to use it .. i need it badly for my portfolio page where i want the thumbnail feed it self when ever i make a new page in the main page. like the vid you showed me ..

    greet

    wing

    December 20, 2009 at 5:13 am #68342
    wingye
    Member

    Hey TheDoc,

    I have tried what you suggest but all i get is a white page in return.. Is there something i did wrong ?
    pls enlighten me.

    Greetz

    wing

    December 21, 2009 at 12:42 pm #68319
    TheDoc
    Member

    You have set yours up in a way I haven’t before. Below you’ll find something that I am currently using on a site. There are two loops occurring, so you can ignore the second loop.

    Code:

    id=”post-“>
    ID, ‘thumb’, true);
    $featured = get_post_meta($post->ID, ‘featured’, true);

    if ($featured) {
    echo ‘‘;
    }

    if ($thumb) {
    echo ‘‘;
    }
    ?>

    ” rel=”bookmark” title=”Permanent Link to “>


    Posted in:

    [ Read More ]

    “); ?>

    Sort projects by category:

    id=”post-“>
    ID, ‘thumb’, true);

    if ($url) {
    echo ‘‘;
    }
    ?>

    ” rel=”bookmark” title=”Permanent Link to “>

    Not Found

    Yikes, something has gone seriously wrong here. I blame you. Yes, you.

    January 1, 2010 at 11:40 am #68811
    wingye
    Member

    Before i start another question i would like to wish you all a happy new year, and may all your wishes come true.

    Well i have one problem fixed which is the loop with caption on thumbnail using the video Chris provide.
    But after all i came across another problem.. but this problem shouldnt be hard for any of you i guyss.

    Its like this my footer at the main page it does what it should do but at the portfolio page where i use the loop it jump all the way up( so the footer doesnt scale with the content.

    i will include the css + html code for ya to make it easier

    Here is the footer.php

    Code:


    Wing


    and here is the ccss file..

    Code:
    * {
    margin: 0px; /* SET 0 MARGIN TO THE WHOLE WEBSITE */
    padding: 0px; /*SET 0 PADDING TO THE WHOLE WEBSITE*/
    }

    a img {
    border:none;
    }

    a:focus {
    outline: none;
    }

    html, body { /*SET BODY STYLE TO WHOLE WEBSITE*/
    background-position:50% -100px;
    background-repeat:repeat-x;
    color:#333333;
    font-family:arial;
    font-size:14px;
    line-height:22px;
    height:100%;
    }

    h1 {
    color:#333333;
    font-size:37px;
    font-weight:normal;
    margin-bottom:25px;
    }

    h2 {
    color:#333333;
    font-size:28px;
    font-weight:normal;
    margin-bottom: 33px;
    line-height: 33px;
    }

    h3 {
    color:#333333;
    font-size:20px;
    font-weight:normal;
    margin-bottom:33px;
    }

    h4 {
    color:#a1151a;
    font-size:16px;
    font-weight:normal;
    margin-bottom: 33px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    line-height: 33px;
    font-family: Arial, Helvetica, sans-serif
    }

    h5 {
    color:#a1151a;
    font-size:18px;
    font-weight:normal;
    margin-bottom: 15px;
    margin-top: 24px;
    }

    h6 {
    color:#a1151a;
    margin-top: 70px;
    font-size:45px;
    font-weight:normal;
    margin-bottom: 50px;
    margin-top: 100px;
    line-height: 33px;
    font-family: Arial, Helvetica, sans-serif
    }

    p { /*SET PARAGRAPH TO WHOLE WEBSITE*/
    padding-bottom:1em;
    }

    a {/*SET LINK STYLE TO WHOLE WEBSITE*/
    color:#dd5d5c;
    text-decoration:none;
    }

    a:hover { /*SET HOVER EFFECT ON LINKS TO WHOLE WEBSITE*/
    color: #551c1b;
    }

    /* STYLE OF BACKGROUND*/

    #main_background {
    background-color: #a1151a;
    height: 415px;
    width: 100%;
    background-image:url(images/bg.png);
    background-repeat:no-repeat;
    background-position:center;

    }

    #fake_body {
    position: absolute;
    top: 0;
    width: 100%;
    }

    #wrap {
    position: relative;
    min-height: 100%;
    height: 100%;
    height: auto;
    margin:0 auto;
    width: 950px;
    }

    /*START OF SLIDER*/
    .showtime{
    margin-bottom: 50px;
    width:950px;
    height:400px;
    background-color:#fff;
    }

    /*START OF GLOBAL_HEADER*/

    #global_header {
    height: 85px;
    position: relative;
    border-bottom: solid #FFF 1px;
    }

    #logo {
    background-image:url(images/logo.png);
    background-repeat:no-repeat;
    background-position: left 13px;
    display: block;
    height: 65px;
    width: 188px;
    padding-top: 13px;
    padding-bottom: 13px;
    }

    #nav {
    bottom:0;
    position:absolute;
    right:0;
    width:305px;
    }

    #nav li { /*–navigatie links–*/
    list-style:none;
    display:block;
    font-size: 12px;
    float: left;
    _display: inline;
    position: relative;
    text-transform: uppercase;
    right:0;

    }

    #nav li.current a { /*–navigatie huidige status–*/
    border-bottom: solid 4px #fff;
    font-weight: bold;
    }

    #nav a { /*–navigatie link–*/
    text-decoration: none;
    color: #fff;
    display: block;
    height: 20px;
    padding-bottom: 10px;
    padding-right: 8px;
    padding-left: 10px;
    }

    #nav a:hover { /*–navigatie rollover–*/
    border-bottom: solid 4px #fff;
    }

    #home_header {
    font-family: Verdana, Geneva, sans-serif;;
    height: 150px;
    color:#FFFFFF;
    font-size:50px;
    font-weight:normal;
    line-height:50px;
    padding-top:45px;
    }

    /* START OF GLOBAL_SUB_PAGE_HEADER*/

    #global_sub_page_header {
    font-family: Verdana, Geneva, sans-serif;
    height: 50px;
    margin-bottom: 30px;
    border-bottom: solid 1px #000;
    }

    .sub_header {
    color:#FFFFFF;
    font-size:30px;
    font-weight:normal;
    position: relative;
    margin-top: 45px;
    margin-bottom: 70px;
    }

    #global_sub_page_header .sub_page_nav {
    float: left;
    position: relative;
    }

    #global_sub_page_header .sub_page_nav li { /*–navigatie links–*/
    list-style:none;
    display:block;
    font-size: 12px;
    float: left;
    _display: inline;
    position: relative;
    text-transform: uppercase;

    }

    #global_sub_page_header .sub_page_nav li.current a { /*–navigatie huidige status–*/
    font-weight: bold;
    }

    #global_sub_page_header .sub_page_nav a { /*–navigatie link–*/
    text-decoration: none;
    color: #a1151a;
    display: block;
    padding-right: 10px;
    }

    #global_sub_page_header .sub_page_nav a:hover { /*–navigatie rollover–*/
    color: #551c1b;
    }

    /*START OF WORK PRESENTATION_BIG*/

    #global_work_intro{
    width:950px;
    height:325px;
    position:relative;
    top: 15px;
    }

    #global_work_intro .presentation_left {
    background-color: #f7f7f7;
    float: left;
    height: 300px;
    width: 600px;
    }

    #global_work_intro .presentation_right {
    background-color: #a1151a;
    float: right;
    height: 300px;
    width: 335px;
    }

    /*START OF WOKR_MODULE_ROW*/

    .work_module_row {
    height: 205px;
    background-color: #fff;
    margin-top:35px;
    }

    .work_module_row .border {
    height: 30px;
    border-top: solid 1px #d6d6d6;
    }

    .work_module_row .work_module_row_inner {
    position:relative;
    }

    .work_module_row .work_module_row_inner_portfolio {
    position:relative;
    }

    /*START WORK_S_END*/
    .work_s_end {
    width: 300px;
    height: 190px;
    background-color:#a1151a;
    display:block;
    float:left;
    margin-bottom:15px;
    position:relative;
    }

    .work_s_end a.inner {
    display:block;
    width: 300px;
    height: 190px;

    }

    .work_s_end a:hover.inner {
    display:block;
    width: 300px;
    height: 190px;
    background-color:#551c1b;
    }

    .work_s_end var.head {
    font-size: 14px;
    color: #fff;
    font-weight:bold;
    font-style:normal;
    position: relative;
    left: 10px;
    top:5px;
    }

    .work_s_end span.subhead {
    color: #dd5d5c;
    margin-left:10px;
    }

    /*START WORK_S_*/

    .work_s {
    width: 300px;
    height: 190px;
    background-color:#a1151a;
    display:block;
    left: 7px;
    float:left;
    margin-bottom:15px;
    margin-right:16px;
    position:relative;
    }

    .work_s .head {
    width: auto;
    font-size: 14px;
    color: #fff;
    font-weight:bold;
    font-style:normal;
    position: absolute;
    left: 0;
    bottom:25px;
    padding: 0 10px 0 10px;
    background-color: #000;
    }

    .work_s a:hover .head {
    background-color: #fff;
    border-color: #c25b08;

    }

    .work_s span.subhead {
    color: #dd5d5c;
    margin-left:10px;
    }

    /*START OF INSIDER DI INFORMATION*/

    .inside_di {
    height: 308px;
    background-color: #fff;
    margin-top:50px;
    padding-top:15px;
    border-top: solid 1px #d6d6d6;
    }

    .inside_di .inside_di_header {
    height: 50px;
    padding-top: 0px;

    }

    .inside_di .inside_di_inner {
    position:relative;
    }

    .inside_di .inner_di_info_l_row {
    width: 459px;
    height: 255px;
    display:block;
    float:left;
    position:relative;
    border-right: solid 1px #000;
    }

    .inside_di .inner_di_info_r_row {
    width: 459px;
    height: 255px;
    display:block;
    float:left;
    position:relative;
    }

    .inner_di_info_l_row {
    padding-right: 15px;

    }

    .inner_di_info_r_row {
    padding-left: 15px;
    }

    .inside_di .inner_di_info .image {
    width: 234px;
    height: 255px;
    float:left;
    }

    .inside_di .inner_di_info .text {
    width: 214px;
    height: 255px;
    float: left;
    padding-left: 10px;
    }

    .inside_di .inner_di_info .jumplink {
    right: 15px;
    bottom:0;
    font-weight:bold;
    position:absolute;
    weight: auto;
    }

    .inside_di .inner_di_info .jumplink a{
    color: #a1151a;
    }

    .inside_di .inner_di_info .jumplink a:hover {
    color:#551c1b;
    text-decoration:none;
    }

    /*START OF FOOTER MAKE-UP*/

    .footer {
    position: absolute;
    width: 950px;
    margin-top: 75px;
    height: 65px;
    }

    .footer .top_black_bar {
    height: 15px;
    background-color: #000;
    margin-bottom: 14px;
    }

    .footer .copyright {
    float: left;
    }

    .footer .footer_nav {
    float: right;
    position: relative;
    right: -10px;

    }

    .footer .footer_nav li { /*–navigatie links–*/
    list-style:none;
    display:block;
    font-size: 12px;
    float: left;
    _display: inline;
    position: relative;
    text-transform: uppercase;
    right:0;

    }

    .footer .footer_nav li.current a { /*–navigatie huidige status–*/
    font-weight: bold;
    }

    .footer .footer_nav a { /*–navigatie link–*/
    text-decoration: none;
    color: #a1151a;
    display: block;
    height: 20px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    }

    .footer .footer_nav a:hover { /*–navigatie rollover–*/
    color: #551c1b;
    }

    and last the code of my loop.

    Code:
    100, ‘post_parent’ =>40, ‘post_type’ =>’page’));

    while (have_posts()) {

    the_post(); //Vital

    $thumbPath = get_post_meta($post->ID, ‘thumbnail’, true);

    if ($thumbPath == “”) {
    $thumbPath = “/images/comingsoon.jpg”;
    }

    ?>

    ” class=”work_s”>

    ID, ‘klantinfo’, true); ?>

    i have tried to find a solution for days but cant come up with anything :/ tried to put the footer outside the wrap and inside but nothing help :/

    As on the portfolio page the the wrapper doesnt scale with the loop.

    i hope you guys can help me out of this missey

    regards

    wing

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘Back End’ is closed to new topics and replies.