Nieuws/blog met diverse grootte images in samenvatting (OPGE

[Haghorst]

Hoi allen,

Graag wil een blog aanmaken met video's. De werking wil ik op een soortgelijke manier doen als op: http://habbekrats.nl/

Iemand enig idee hoe ik dit het beste aan kan pakken? Het lijkt mij het makkelijkst als het zo zou werken:
- Image uploaden in CMSMS
- Titel meegeven
- Tekst toevoegen
- Youtube link (die automatisch fullscreen is) toevoegen

- Het laatste item wordt groot weergegeven op de website. Daarna zal de image, afhankelijk van de plaats, kleiner worden geschaald.

Ik hoor graag wie me hiermee kan helpen.
Alvast bedankt.

[Rolf]

Wil ik nog eens een blog over maken op https://www.cmscanbesimple.org/blog. Maar die is er nog niet...

[Haghorst]

@Rolf

Okay! Kun je mij misschien uitleggen hoe ik dit kan realiseren? Bij wordpress heb ik een soortgelijk template gevonden: http://theme.wordpress.com/themes/autofocus/

Ik wil het graag in CMSMS doen. Iemand tips?

[Haghorst]

Sorry voor het dubbele bericht maar ik vroeg me af of iemand hier misschien een oplossing voor heeft? Ik heb het niet kunnen vinden

[velden]

Wat is de concrete vraag?

In CMSMS zijn er diverse modules die je kunt gebruiken voor het plaatsen van een tekst met titel, foto en een vrij te kiezen veld.

Denk daarbij aan de News module, CGBlog (denk ik), ListitExtended etc.

Allen bieden zij templates die je kunt aanpassen en dus integreren met een systeem naar keuze (bijvoorbeeld je Wordpress voorbeeld).

[Haghorst]

Mijn vraag is welke module ik inderdaad het beste kan gebruiken hiervoor. En wat ik zelf qua codering moet toepassen.

Ik wil graag een veld hebben om de foto up te loaden, een voor de titel, een voor meer informatie en een voor de youtube link.

Wanneer je met een hover over de foto gaat zie je: meer info + bekijk video. Wanneer je op meer info klikt zou een veld boven de 'nieuws berichten' prima zijn met de info/inhoud. Wanneer je op bekijk video klikt ga je naar de youtube link.

Daarnaast zou ik aan willen geven dat de eerste post de totale breedte heeft. Daaronder 2 posts met de helft van de breedte en daaronder eentje met een van 2/3 + 2 van 1/3. Dit kan zich dan herhalen.

Hopelijk is het duidelijk. Ik hoor graag of iemand met kan helpen.

[velden]

Het kan allemaal gemaakt worden met de modules die ik noemde. Je moet het alleen zelf doen. Voor zover ik weet is er geen kant-en-klare module voor.

Waarschijnlijk is het gebruik van CGSmartImage module ook nog handig. Ligt aan hoe de foto's geschaald moeten worden (server side of client side).

Maak het eerst werkend in een statische html file. Daarna zet je het om met een module.

[Jos]

Ik denk gewoon CGBlog voor alle info+foto, in combinatie met CGSmartImage voor de diverse foto-formaten

Maar het is nogal een werkje om die habbekrats site na te maken. Het is zeker heel goed mogelijk, maar er zal nogal wat tijd in gaan zitten, niet iets voor een forumpostje denk ik

[Haghorst]

Bedankt voor de tips.
Ik ga het eerst in html maken

[Haghorst]

Ik heb de pagina in html en css gemaakt. Zie hier het resultaat http://tinyurl.com/testpoasfd

Nu wil ik dit dus implementeren in cms made simple.
Dit ga ik dan proberen met CGBlog & CGSmartImage.

Het is ook mogelijk om bij CGBlog een apart veld aan te maken voor de youtube link (play)?.

Als er tips zijn hoor ik het graag.

HTML

Code: Select all

<div class="container">
    <div class="large">
       <img src="images/image.jpg" class="image" width="960px" height="500px" />
       <h1>TITEL</h1>
       <div><a href="#">PLAY</a> <a href="#">INFO</a></div>
    </div>
    <div class="middle">
       <img src="images/middle.jpg" class="image" />
       <h1>TITEL</h1>
       <div><a href="#">PLAY</a> <a href="#">INFO</a></div>
    </div>
    <div class="spacer20">
    </div>
    <div class="middle">
       <img src="images/middle.jpg" class="image" width="460px" height="242px" />
       <h1>TITEL</h1>
       <div><a href="#">PLAY</a> <a href="#">INFO</a></div>
    </div>
    <div class="smallarge">
       <img src="images/small_large.jpg" class="image" width="640px" height="338px" / />
       <h1>TITEL</h1>
       <div><a href="#">PLAY</a> <a href="#">INFO</a></div>
    </div>
    <div class="small">
       <img src="images/small_small.jpg" class="image" width="290px" height="153px" />
       <h1>TITEL</h1>
       <div><a href="#">PLAY</a> <a href="#">INFO</a></div>
    </div>
    <div class="small">
       <img src="images/small_small.jpg" class="image" width="290px" height="153px" />
       <h1>TITEL</h1>
       <div><a href="#">PLAY</a> <a href="#">INFO</a></div>
    </div>
</div>

CSS

Code: Select all

html, body {height: 100%;}
.clear {clear: both;}
.clearleft{clear:left}

html, body {
    height:100%;
    margin:0;
    padding:0;  
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #323232;
	line-height: 20px;
}

.container {
	width: 960px;
	left: 50%;
	margin-left: -480px;
	position: relative;
}

.image {
	position: absolute;
	z-index: -1;
}

.large {
	width: 960px;
	height: 500px;
	margin-bottom: 32px;
}

.middle {
	width: 460px;
	height: 242px;
	background-image:url(../images/middle.jpg);
	display: inline-block;
	margin-bottom: 32px;
}

.smallarge {
	width: 640px;
	height: 338px;
	display: inline-block;
	float: left;
}


.small {
	width: 290px;
	height: 153px;
	display: inline-block;	
	float: right;
	margin-bottom: 32px;
}


.spacer20 {
	width:32px;
	height: 1px;
	display: inline-block;
	background-color:#FFF;
}

.large h1, .middle h1, .smallarge h1, .small h1{
	display: table-cell; 
	width: 960px;
	height: 500px;  
    text-align: center;
    vertical-align: middle;
	font-size: 36px;
	line-height: 36px;
	padding-left: 10px;
	padding-right: 10px;
}

.middle h1{
	width: 460px;
	height: 242px;
}

.smallarge h1{
	width: 640px;
	height: 338px;
}

.small h1{
	width: 290px;
	height: 153px;
}

.large div, .large:hover>h1, .middle div, .middle:hover>h1, .smallarge div, .smallarge:hover>h1, .small div, .small:hover>h1 {
    display: none;
}

.large:hover>div, .middle:hover>div, .smallarge:hover>div, .small:hover>div {
	display: table-cell; 
	width: 960px;
	height: 500px;  
    text-align: center;
    vertical-align: middle;
}

.middle:hover>div {
	width: 460px;
	height: 242px;
}

.smallarge:hover>div {
	width: 640px;
	height: 338px;
}

.small:hover>div {
	width: 290px;
	height: 153px;
}

.large div a, .middle div a, .smallarge div a, .small div a {
	text-decoration:none;
	padding: 10px;
	margin-right: 10px;
	display: inline-block;
	width: 40px;
	background-color:#FFF;
	color:#000;
}

.large div a:hover, .middle div a:hover, .smallarge div a:hover, .small div a:hover  {
	text-decoration:none;
	padding: 10px;
	background-color: transparent;
	display: inline-block;
	width: 40px;
}

[velden]

Ik adviseer je om niet de youtube url in te laten voeren, maar enkel de video ID.

Dan kun je namelijk de url zelf samenstellen. Mocht er ooit iets aan de url syntax wijzigen dan kun je dat met één aanpassing gelijk regelen voor alle video ID's.

[Haghorst]

Ik adviseer je om niet de youtube url in te laten voeren, maar enkel de video ID.

Dan kun je namelijk de url zelf samenstellen. Mocht er ooit iets aan de url syntax wijzigen dan kun je dat met één aanpassing gelijk regelen voor alle video ID's.

Goede tip
Thanks

[Haghorst]

Het aanroepen van de velden is gelukt. Zie hier het resultaat: http://tinyurl.com/rewera. Play werkt en info toont de content, prima dus.

Graag zou ik weten hoe ik het nieuwste item, 2e item etc. apart kan aanroepen. Nu gaat het via foreach, dus voor ieder item het grote blok.

Alvast bedankt

Om het grote blok aan te roepen gebruik ik de volgende code:

Code: Select all

{foreach from=$items item=entry}
<div class="CGBlogSummary">
<div class="large">
{if $entry->Afbeelding}
{assign var=path value=$entry->file_location}
{assign var=image value=$entry->Afbeelding}
{CGSmartImage src1=$entry->file_location src2=$entry->Afbeelding class="image" filter_croptofit="960,500,tc"}
{/if}
 <h1>{title}</h1>
{if $entry->YoutubeID}
 <div><a href="http://www.youtube.com/v/{$entry->YoutubeID}" target="_self">PLAY</a>
 {/if} 
 <a href="{$entry->detail_url}">INFO</a></div>
</div>
{/foreach}

[velden]

Ik denk dat ik ze niet apart zou aanroepen maar gewoon de foreach loop zou blijven gebruiken.

Maak daarbij de gebruik van de @iteration property (of eventueel @index)

Code: Select all

{foreach from=$items item=entry}
<div class="CGBlogSummary">
{if $item@iteration == 1}
  {assign var='classname' value='large'}
  {assign var='imageWidth' value='960'}
  {assign var='imageHeight' value='500'}
{elseif $item@iteration == 2 || $item@iteration == 3}
  {assign var='classname' value='medium'}
  {assign var='imageWidth' value='480'}
  {assign var='imageHeight' value='250'}
{else}
  {assign var='classname' value='small'}
  {assign var='imageWidth' value='240'}
  {assign var='imageHeight' value='125'}
{/if} 

<div class="{$classname}">
{if $entry->Afbeelding}
{assign var=path value=$entry->file_location}
{assign var=image value=$entry->Afbeelding}
{CGSmartImage src1=$entry->file_location src2=$entry->Afbeelding class="image" filter_croptofit="$imageWidth,$imageHeight,tc"}
{/if}
 <h1>{title}</h1>
{if $entry->YoutubeID}
 <div><a href="http://www.youtube.com/v/{$entry->YoutubeID}" target="_self">PLAY</a>
 {/if}
 <a href="{$entry->detail_url}">INFO</a></div>
</div>
{/foreach}

Did not test it, but you get the point I guess.

[Haghorst]

Thanks.
Ik heb het toegevoegd, hij pakt alleen de small (else dus). Ik weet niet hoe $item@iteration werkt? Het is in de goede richting denk ik..

Hier nogmaals de testurl: http://tinyurl.com/rewera.

Deze code gebruik ik voor het sjabloon:

Code: Select all

{foreach from=$items item=entry}
<div class="CGBlogSummary">
{if $item@iteration == 1}
  {assign var='classname' value='large'}
  {assign var='imageWidth' value='960'}
  {assign var='imageHeight' value='500'}
{elseif $item@iteration == 2 || $item@iteration == 3}
  {assign var='classname' value='medium'}
  {assign var='imageWidth' value='460'}
  {assign var='imageHeight' value='242'}
{else}
  {assign var='classname' value='small'}
  {assign var='imageWidth' value='290'}
  {assign var='imageHeight' value='153'}
{/if}

<div class="{$classname}">
{if $entry->Afbeelding}
{assign var=path value=$entry->file_location}
{assign var=image value=$entry->Afbeelding}
{CGSmartImage src1=$entry->file_location src2=$entry->Afbeelding class="image" width="$imageWidth" height="$imageHeight"}
{/if}
 <h1>{$entry->title}</h1>
{if $entry->YoutubeID}
 <div><a href="http://www.youtube.com/v/{$entry->YoutubeID}" target="_self">PLAY</a>
 {/if}
 <a href="{$entry->detail_url}">INFO</a></div>
</div>
{/foreach}

Grt