Forums

Page list - Thumb next to text

Permalink
Hello,

I'am working on a website with the basic greek yogurt theme.
On the frontpage there will be coming a sort of news page.

I am willing to use the standaard blog-entry page for this, it has that cool function for thumbnail and header picture.

Everything is going alright and working, but i'am stuck at one moment.
On the frontpage i'am willing to get the news (blog) with a thumbnail next to the text.

|--------------| Titel
|---thumb---|
|--------------| Text
|--------------| Text
|----nail-----|
|--------------| Read more.

I have found the two options for the page list.

blog_index.php

This shows only text

blog_index_thumbnail.php

This put the thumbnail above the text, this is not nice on a website.

Why isn't there a standard third option with thumb next to text.

The only thing i need is a correct template for the page list that let me show the thumbnail next to the text. I have tried some cut and paste methodes but i am a noob on php code.

Who can tell me how i can do that.
 
PauloCarvalhoDesign replied on at Permalink Reply
PauloCarvalhoDesign
Hi, it requires you to know a bit of css and html.
I usually code it all from almost scratch but in your case in your in blog_index_thumbnail.php line 29 change the size to fit your needs.
After that take a look at the grid implemented in the theme.
and have 2 columns one with image one with the text.
If you need examples let me know.
Redzor replied on at Permalink Reply 1 Attachment
thanks for the reply,

i know a bit of css and html and i see that i can change the image size on line 29.

i noticed also that when i change the number of px for "grid_4 main-content-thumb" it would be larger. But there is the problem for me i don't know how to go further.

I think i must copy some of the thumbnail.php to the basic blog.php to have the newsitems 1 on 1 row with a thumb next to it.

i have placed a attachment to this reply, to let you see what i am looking for. I don't know if it is possible, i saw this news item on a site and it is really nice. But i would be happy if the thumb shows next to the text on one row each item.
PauloCarvalhoDesign replied on at Permalink Best Answer Reply
PauloCarvalhoDesign
if you want something like that you can do:
div class entry_wrapper
div class entry_post_short
div class entry_thumb

css


.entry_wrapper{
position:relative;
width:100%
overflow:auto;
}
.entry_post_short{
position:relative;
width:68%
float:left;

}
.entry_thumb{
position:relative;
width:28%
float:left;
margin:0 1%;
}
or something similar :)
PauloCarvalhoDesign replied on at Permalink Reply
PauloCarvalhoDesign
here:
http://jsfiddle.net/Sunw5/
this should do it!
Redzor replied on at Permalink Reply 1 Attachment
Wooh really thanks for this,
I have now the text next to the thumbnails, its need a littel bit formating of text etc. but i have the basic now..

There is one littel problem i think.

The colum next to it moves downwards, and the footer is also moved to the right.

i will put the code of the blog_index.php i am using here
<?php 
   defined('C5_EXECUTE') or die("Access Denied.");
   $textHelper = Loader::helper("text");
   $imgHelper = Loader::Helper('image');
defined('C5_EXECUTE') or die("Access Denied.");
?>
<div id="blog-index">
   <?php  
   $isFirst = true; //So first item in list can have a different css class (e.g. no top border)
   $excerptBlocks = ($controller->truncateSummaries ? 1 : null); //1 is the number of blocks to include in the excerpt
   $truncateChars = ($controller->truncateSummaries ? $controller->truncateChars : 45);
   foreach ($cArray as $cobj):
      $title = $cobj->getCollectionName();
      $date = $cobj->getCollectionDatePublic('F j, Y');
      $author = $cobj->getVersionObject()->getVersionAuthorUserName();
Viewing 15 lines of 94 lines. View entire code block.


I think i have closed something not right. i have put the code of the css in the main.css 
.entry_wrapper{
 position:relative;
 width:100%;
 overflow:auto;
background:#FFF;
    min-height:200px;
 }
 .entry_post_short{
 position:relative;
 width:68%;
 float:left;
 min-height:190px;
 }
 .entry_thumb{
 position:relative;
Viewing 15 lines of 20 lines. View entire code block.


Many thanks already that you took the time for me to explain and helped me so far.

I have attached a screenshot of the problem.
Redzor replied on at Permalink Reply
i have found it already.

i was forgotten to add a extra </div> somewhere.

so for the people who are searching for this here is the template file
<?php 
   defined('C5_EXECUTE') or die("Access Denied.");
   $textHelper = Loader::helper("text");
   $imgHelper = Loader::Helper('image');
?>
<div id="blog-index">
   <?php  
   $isFirst = true; //So first item in list can have a different css class (e.g. no top border)
   $excerptBlocks = ($controller->truncateSummaries ? 1 : null); //1 is the number of blocks to include in the excerpt
   $truncateChars = ($controller->truncateSummaries ? $controller->truncateChars : 45);
   foreach ($cArray as $cobj):
      $title = $cobj->getCollectionName();
      $date = $cobj->getCollectionDatePublic('F j, Y');
      $author = $cobj->getVersionObject()->getVersionAuthorUserName();
      $link = $nh->getLinkToCollection($cobj);
Viewing 15 lines of 94 lines. View entire code block.