getResources help

437 Posts

distant_smile Reply #1, 8 years, 2 months ago

Hi,

I have set up a blog template on my site and have a few queries. Firstly I would like the Headline to be level with the date, rather than sitting below it.

My call is

[[!getResources?
  &showHidden=`1`
  &tpl=`newsTpl`
  &limit=`10`
  &includeContent=`1`
  &includeTVs=`1`
  &processTVs=`1`
  &parents=`8,9`]]

and the newsTpl chunk contains:

<div id="post-[[+id]]" class="post-[[+id]] post hentry category-latest-news tag-tag3 tag-tag5 tag-tag7">
<div class="post-top">
<div class="post-date"><span class="day">[[+publishedon:strtotime:date=`%d`]]</span> <span class="month">[[+publishedon:strtotime:date=`%b`]]</span> <span class="year">[[+publishedon:strtotime:date=`%Y`]]</span></div>
<h2><a title="Permanent Link to [[+pagetitle]]" href="[[~[[+id]]]]" rel="bookmark">[[+pagetitle]]</a></h2>
</div>
<div class="entry"><a href="[[~[[+id]]]]"><img class="alignleft" title="[[+tv.news_image_title]]" src="[[+tv.news_image]]" alt="" width="618" height="197" /></a> </br>[[+content:ellipsis=`350`]] <a class="more-link" href="[[~[[+id]]]]">Read the rest of this entry »</a></div>
<div class="postmetadata">Tags: <a href="#" rel="tag">tag3</a>, <a href="#" rel="tag">tag5</a>, <a href="#" rel="tag">tag7</a> Posted in <a title="View all posts in Latest News" href="#" rel="category">Latest News</a> | <a title="Comment on Blog Post 5" href="single.html#comments">6 Comments »</a></div>
</div>

I also need the introtext to sit below the image and not to the side, at present it is creating an ugly scroll bar. I think from before I had to use a wrapper? But not 100%. The page can be viewed here:

http://www.pawsforwildlife.co.uk/index.php?id=7

Any help appreciated thank you

This question has been answered by sottwell. See the first response.

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 8 years, 2 months ago

In the first place, you should validate the HTML. https://validator.w3.org/check?uri=http%3A%2F%2Fwww.pawsforwildlife.co.uk%2Findex.php%3Fid%3D7&charset=%28detect+automatically%29&doctype=Inline&group=0

You need to float the title and the date within their .post-top container. Put the <h2> first in the post-top container. They'll need to be given a width, preferably a percentage:

.post-top h2 {
float: left;
width: 70%;
}
.post-top .post-date {
float: left;
width: 30%;
}

Better still, use your grid framework's grid classes, and give the H2 element about 2/3 of the columns, and the .post-date about 1/3 of the columns. Something like 'class="grid_9' and 'class="grid_3"' or whatever divisions your grid framework uses.

Likewise with the body, use the grid classes in your template to position the image and the content.

The br method you are using isn't working, because it's
not </br>. Using breaks isn't the best way to position content, anyway.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

437 Posts

distant_smile Reply #3, 8 years, 2 months ago

Thank you Sottwell. Sorry to ask, but please could you expand a little on the grids? I am not sure how to integrate it into my newsTpl, have you any pointers/examples to get me started please?
Thank you

P.s. just a thought but my homepage is split into column classes, could I use specific columns to align my info? [ed. note: distant_smile last edited this post 8 years, 2 months ago.]

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 8 years, 2 months ago

What template are you using? From what I see of the source HTML of the page, it is using some kind of grid framework. There are a number of different ones. Basically they break a page up into a specific number of columns, and all you have to do is use classes to indicate how many columns you want an element to use. They take care of the floating and the widths and so forth for different device sizes.

For example, I see

<div id="top" class="grid_16">
...
<div id="logo" class="grid_9 alpha">
...
<div id="search" class="grid_5 alpha prefix_11">

This suggests to me that it's using a grid framework that breaks the page into 16 columns.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

☆ A M B ☆
24,524 Posts

sottwell Reply #5, 8 years, 2 months ago

Why are your stylesheets and javascript files in /manager/templates/ ? That is purely for the Manager layout! You should have your assets in /assets/.

If you go to System Settings, and look at the manager_theme setting, you'll see it's a drop-down that will now have your 7in1 theme available for the Manager besides "default", and it will obviously badly break the Manager! [ed. note: sottwell last edited this post 8 years, 2 months ago.]

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

437 Posts

distant_smile Reply #6, 8 years, 2 months ago

~~Ok I will have a look at the grids. So the template should go in setup/assets or revolution/assets. Or do I need to create an assets folder? Sorry I was used to Evolution and that was a while back~~

Ok I went to the FileSystem in my manager and lo and behold there is an assets file so have moved all my '7in1' folder to the assets folder, now I will update the templates. Thank you [ed. note: distant_smile last edited this post 8 years, 2 months ago.]

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

437 Posts

distant_smile Reply #7, 8 years, 2 months ago

Ok, so I have had a play and got some of it down. But the headline and date have a huge top margin for some reason, and the grey dividing lines are pushed to the bottom of the container? This is my revised newTpl code:

<div class="post-[[+id]] post hentry category-latest-news tag-tag3 tag-tag5 tag-tag7" id="post-[[+id]]">
<div class="post-top">
<div id=post-top" class="grid_9">
<h2><a href="[[~[[+id]]]]" rel="bookmark" title="Permanent Link to [[+pagetitle]]">[[+pagetitle]]</a></h2>
<a href="[[~[[+id]]]]" class="more-link">Read the rest of this entry »</a>
<div class="post-date">
<div id=post-date" class="grid_3">
<span class="day">[[+publishedon:strtotime:date=`%d`]]</span>
<span class="month">[[+publishedon:strtotime:date=`%b`]]</span>
<span class="year">[[+publishedon:strtotime:date=`%Y`]]</span>
</div>


</div>
</div>

I would appreciate any error spotting as grids are new to me and I am hoping to get my head around it. I also need to include a picture (from tv) and the first 350 characters from the content. My old Template had this line in it to call it:

<div class="entry"><a href="[[~[[+id]]]]"><img class="alignleft" title="[[+tv.news_image_title]]" src="[[+tv.news_image]]" alt="" width="618" height="197" /></a>
[[+content:ellipsis=`350`]] <a class="more-link" href="[[~[[+id]]]]">

So I also need to integrate this somehow. [ed. note: distant_smile last edited this post 8 years, 2 months ago.]

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

☆ A M B ☆
24,524 Posts

sottwell Reply #8, 8 years, 2 months ago

Usually you can right-click your mouse over the section of the page you are interested and the context menu will have something like "Inspect Element". This will open a bottom or side window that shows the HTML of the section, as well as the CSS that is applied to that element, and the .css file it's coming from.

Doing this, the first thing I noticed is that the post itself is wrapped in <pre> tags. There's no reason for that; pre tags are for listing code or other plain-text that is not formatted with HTML.

Beyond that, I don't see where the extra spacing is coming from.

Without seeing the template this is based on, I can't make any sense of it. If this is the 7in1 template from ThemeForest, it's been removed from their repository. Seeing the 960.css file, it looks like it's using this grid http://960.gs/

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

437 Posts

distant_smile Reply #9, 8 years, 2 months ago

Sorry you are correct, it is the 7 in template. I have had an issue with pre tags before, not sure why they are there but I will check it out. Other than that I am jus a little stumped on the image and divider bar. When added the image placeholder appears but stretches outside of its container creating another horizontal scrollbar?

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

☆ A M B ☆
24,524 Posts

sottwell Reply #10, 8 years, 2 months ago

It needs to be styled as "max-width: 100%", the template probably has a classname that already has such a styling. For Bootstrap, it's the "img-responsive" class, every image given that class will get that styling. The containing element also needs to have a size specified, usually that's in percentages. In your particular grid, it looks like it uses a 16-column grid, and if you want full-width you say class="grid_16", and then use "grid_8" if you want it half-width, and so forth.

So if a div has the class "grid_8" it will take up 8 of the 16 columns, then if an image is given whatever classname that system uses to define responsive images, it will have the styling max-width: 100%, and will be automatically resized down to fit that container div if necessary. A smaller image won't be increased in size, though. It's "max-width".

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

Answered getResources help