Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
I've just about got my Backlight site tweaked to where I want it but I'm stuck on one thing that I liked about CE4. In the CE4 Pages layout, The Home, Galleries, Services, Info, About, and Contact pages had the option of including a Page Image that would show in the Primary Content, Float on one side, the other, or the center, and could be width adjusted. I want to have this in my Backlight pages as well, but attempting to mix HTML and Markdown isn't looking that elegant.
Here's what I was working with on the CE4 site:
http://www.divinemayhem.com/info.php
Here's what I currently have on the Backlight site:
http://www.divinemayhem.com/sandbox/NEWSITE/dms-info/
It works, sort of, but I'm wondering if there's a cleaner way of implementing it without using all of the hard line breaks or the (possibly) unnecessary <span> and/or <div> tags.
That section of the Main Copy is as follows:
<span><div>
<img src="http://www.divinemayhem.com/sandbox/NEWSITE/photos/Info_Image.jpg" width="400px" align="right" style='border:1px solid white'></img>
# <i style="color: #81A276;" class="fa fa-info-circle fa-lg"></i> Welcome to DivineMayhem Studios!
</div></span>
<br><br><br><br><br><br><br>
<hr />
As always, thanks for the assistance on this!
Offline
first, don't use align="right", that's deprecated in html5 (it may still work, but for how long?). Instead, use class="alignright". Matt's included alignright, alignleft, and aligncenter classes. These are also the same classes you'd use in WordPress to align images.
Secondly, divs don't go in span elements. And it's probably best not to mix Markdown and html the way you are. It looks like it works though. ( I think it's that you can't put Markdown inside html)
And images don't have and end tag.
Try something like this instead:
<div>
<img src="http://www.divinemayhem.com/sandbox/NEWSITE/photos/Info_Image.jpg" width="400px" class="alignright" style='border:1px solid white'>
<h1><i style="color: #81A276;" class="fa fa-info-circle fa-lg"></i> Welcome to DivineMayhem Studios!</h1>
</div>
<hr />If you need more space around the hr, then you can use inline styling or create a custom class and apply that.
If you wanted more space above it:
<hr style="margin-top: 1.5em;"/>
you can use pixels instead if you want.
Another option that I think can look really good is using the TTG Responsive Grid Framework. You can better control the text and the image by placing them in their own columns.
For what it's worth, I think the layout you have going looks pretty nice.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Thanks Rod!
I took your suggestions and combined them.
<div class="grid_12"> <!-- this sets up the 12 column grid -->
<div class="col_8 push_4" > <!-- this sets up the 2/3 width column -->
<img src="http://www.divinemayhem.com/sandbox/NEWSITE/photos/Info_Image.jpg" width="400px" class="alignright" style='border:1px solid white'>
</div>
<div class="col_4 pull_8"> <!-- this sets up the 1/3 width column -->
<h1><i style="color: #81A276;" class="fa fa-info-circle fa-lg"></i> Welcome to DivineMayhem Studios!</h1>
</div>
</div>
<hr />
The only thing that I'd like to change is that the text splits when the browser is resized to and below 700px (inner) / 715px (outer) wide. Is there a way to force the text to go entirely below the image if that size is reached? I'm uncertain if this is the correct terminology, but a "breakpoint" of sorts?
Offline
looks like it's the alignright class being applied to the image. Try removing that.
(I'm not sure why the float is affecting the div with the text, I thought that clear was being applied to each div using a grid_x class. I'll have to take a closer look tomorrow.)
You may want to put the image in a narrower column after that. Maybe switch the image div to four columns and the text div to eight columns. Adjust the push and pull classes as needed.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Just took a look. The clearfix is applied to the .grid_x class, which keeps anything floating on either side of the rows.
But the columns, the .col_x classes, don't have this.
If you're going to float anything in one of those columns, then add the "clearfix" class to the div:
<div class="col_4 pull_8 clearfix>...
But if you're just placing an image in a column, you should have no need of floats, so you can remove the alignright class from the div containing the image. Just use a column width that ends up placing the image where you want it.
Right now you have a text div of four columns and the image div is 8 columns. Just reverse that. Doing so will place the image on the far right of the overall grid_12 div. If you need to move it around even more, like to align it with other elements above or below, you can use some inline css to do that.
Just one strategy: use margin-right to move the picture a bit. Negative margin will move it more to the right. Positive margin to the left.
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
I think that I've got it how I'd like it. Thanks so much for sharing your knowledge!
Offline
any time!
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline