• Hi,

    I’m using Minimatica as a theme for my photography blog. I really want to add a table for thumbnail sized images within my posts so I can use them like buttons to other pages. I’ve tried just adding thumbnail images to the post but it’s really difficult to get them lined up correctly. My site is https://courtneyscottphotography.com/

    For example, on my ‘Vietnam’ post I would like to have thumbnail images above the links: Trekking in Sapa, Ho Chi Minh City (Saigon), Hoi An, Hanoi, Ha Long Bay – and for these to be in rows of 3 or 4 across the page.

    Please help if you can!
    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • yes, entirely do-able…
    simplest but longest way is html… you gonna have to replace all of your links and images, and you gonna want to use 100px by 100px thumbnails… this is just simple html, i can help with some dynamic solutions, with less work on your end if you think you can handle it…reply back..
    for this though, open the post or page, above the area where you enter content there is an option for visual or html, click html… then paste this, and fix the links…make sure to save…


    <div id="linksbar" style="width:100%; height:140px; float:left; display:visable;">
    <div id="imageandlink" style="width:100px; margin-left:20px; margin-right:20px; height:100%; float:left;">
    <div id="yourimage" style="width:100%; height:100px; float:left;">
    <img height="100px" width="100px" src="https://courtneyscottphotography.com/wp-content/uploads/2012/06/IMGP4234-600x400.jpg"></img>
    </div>
    <div id="yourlink" style="width:100%; height:40px; padding-top:10px; float:left; text-align:center;">Inle Lake
    </div>
    </div>
    <div id="imageandlink" style="width:100px; margin-left:20px; margin-right:20px; height:100%; float:left;">
    <div id="yourimage" style="width:100%; height:100px; float:left;">
    <img height="100px" width="100px" src="https://courtneyscottphotography.com/wp-content/uploads/2012/06/IMGP4234-600x400.jpg"></img>
    </div>
    <div id="yourlink" style="width:100%; height:40px; padding-top:10px; float:left; text-align:center;">Inle Lake
    </div>
    </div>
    <div id="imageandlink" style="width:100px; margin-left:20px; margin-right:20px; height:100%; float:left;">
    <div id="yourimage" style="width:100%; height:100px; float:left;">
    <img height="100px" width="100px" src="https://courtneyscottphotography.com/wp-content/uploads/2012/06/IMGP4234-600x400.jpg"></img>
    </div>
    <div id="yourlink" style="width:100%; height:40px; padding-top:10px; float:left; text-align:center;">Inle Lake
    </div>
    </div>
    <div id="imageandlink" style="width:100px; margin-left:20px; margin-right:20px; height:100%; float:left;">
    <div id="yourimage" style="width:100%; height:100px; float:left;">
    <img height="100px" width="100px" src="https://courtneyscottphotography.com/wp-content/uploads/2012/06/IMGP4234-600x400.jpg"></img>
    </div>
    <div id="yourlink" style="width:100%; height:40px; padding-top:10px; float:left; text-align:center;">Inle Lake
    </div>
    </div>
    <div id="imageandlink" style="width:100px; margin-left:20px; margin-right:20px; height:100%; float:left;">
    <div id="yourimage" style="width:100%; height:100px; float:left;">
    <img height="100px" width="100px" src="https://courtneyscottphotography.com/wp-content/uploads/2012/06/IMGP4234-600x400.jpg"></img>
    </div>
    <div id="yourlink" style="width:100%; height:40px; padding-top:10px; float:left; text-align:center;">Inle Lake
    </div>
    </div>
    </div>

    Thread Starter cscott14

    (@cscott14)

    thanks so much Gavin! I’ll give this a try when I get some time. I’m working about 14 hours a day at the moment so my site has been put on the back burner a bit. I’d love t hear some suggestions that would make things a bit easier though?

    Thanks again

    sure…

    ok..here…

    go to your dashboard, appearance, edit…
    look on the right for content.php..
    under <section class=”entry-content”>

    paste this…

    <?php
    	$custom_fields = get_post_custom(get_the_ID());
    	$my_custom_field = $custom_fields['postid'];
    	$enddiv = '</div>';
    	$lcounter = 0;
    	foreach ( $my_custom_field as $key => $value ){
    		if($lcounter == 0):
    			echo '<div id="linksbar" style="width:100%; height:140px; float:left; display:visable; margin-top:10px; margin-bottom:10px;">';
    		elseif($lcounter/4 == 1):
    			echo '<div id="linksbar" style="width:100%; height:140px; float:left; display:visable; margin-top:10px; margin-bottom:10px;">';
    		endif;
    		echo '<div id="imageandlink" style="width:100px; margin-left:20px; margin-right:20px;
    		 height:100%; float:left;"><div id="yourimage" style="width:100%; height:100px;
    		float:left;"><a href="';
    		echo get_permalink($value);
    		echo '"><img height="100px" width="100px" src="';
    		echo get_the_post_thumbnail($value, 'small');
    		echo '"></img></a></div><a href="';
    		echo get_permalink($value);
    		echo '">';
    		echo get_the_title($value);
    		echo '</a>';
    		echo '</div>';
    		$lcounter++;
    		}
    		$newcount = ceil($i/5);
    		echo str_repeat($enddiv, $newcount);
    	?>


    go to your page or post, at the top right you will see screen options… click that, and then click custom fields…

    all you have to do now is scroll down to the custom fields area, and enter in the name column: “post id”

    with no quotations….

    then the the post id of the page you would like listed out… quick way to find it, open another browser window, and go to the page, look at the top, it should say page id 300 or 205 or whatever…

    for each link you want in your page, add another, postid and number..

    the code will automatically line up 4, and go to the next line, and make 4 more…

    you also have to have a post thumbnail set….

    load it up, tell me when its done and we will tweak from there…

    Thread Starter cscott14

    (@cscott14)

    great thanks so much! It might be a few weeks until I get a chance to play around with it but i’ll let you know when I do.

    Thanks again!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘how to add a table for images to Minimatica’ is closed to new replies.