Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Where are the actual php pages in SS? And does image alignment work in tinymse?


Go to End
Reply


19 Posts   1446 Views

Avatar
timetraveler

Community Member, 10 Posts

14 March 2012 at 11:57am

I have two questions:

1. While trying out SS today, I created a new page, which appears in the browser address bar as mysite/test-page-1/ . But I cannot see any such page in the cPanel File Manager. As a self-taught php dabbler with limited knowledge, I expected to see a file called test-page-1.php.

Where does SS keep user-generated web pages? How does the browser find them?

2. Anyway, the reason I was looking for the file was that I could not get image alignment to work in tinymse. Specifically, images always align to the left side of the page, and text does not flow around them.

I found some discussions about this online, but the solutions offered don't work for me. Is there a fix for this?

Thanks.

Avatar
swaiba

Forum Moderator, 1805 Posts

14 March 2012 at 12:55pm

Hi,

Welcome to the forums!

Take a look at the .htaccess file for the urlrewriting this is how silverstripe takes the URL and dymanically creates the page to serve.

The image issue is likely to make more sense how to solve after reading / doing the Tutorials (http://doc.silverstripe.org/sapphire/en/tutorials/).

Best of luck!

Avatar
Willr

Forum Moderator, 5513 Posts

14 March 2012 at 10:02pm

2. Anyway, the reason I was looking for the file was that I could not get image alignment to work in tinymse. Specifically, images always align to the left side of the page, and text does not flow around the

Make sure your theme has the typography img styles for wrapping etc. Take a look at the default theme and how it's typography file contains the styles for floating images.

All the pages are in the database. You can see them in the backend / your database but like swaiba said, read the tutorials to get to grips with the concepts!

Avatar
timetraveler

Community Member, 10 Posts

20 March 2012 at 7:30am

Thank you for your replies, swaiba and Willr.

Following up on your advice, I realized that I did not understand php classes and css well enough. After researching css in particular, I found that code such as the following can help align tables:

<div style="width:40%; margin-left:auto; margin-right:0%;">
<table style="width:200px; margin-left:auto; margin-right:auto;" border="5">

or this for images:
<p style="text-align:center;margin-left:auto;margin-right:auto;"><img etc

I hope this is helpful for anyone struggling with the basics, as I do.

But I wonder, am I the only person who finds the tinymce editor annoying? One alternative might be the free Amaya editor, which is described here http://www.w3.org/Amaya/Overview.html. As a mostly WYSIWYG editor, I find it less frustrating, though direct CSS editing is still sometimes necessary.

As for dynamic page creation, I did not find anything in the first 2 tutorials about that. In which tutorial is this particular concept explained?

To learn more about this, I looked in my .htaccess file, and found some code that I do not understand:

   RewriteCond %{REQUEST_URI} ^(.*)$
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule .* sapphire/main.php?url=%1&%{QUERY_STRING} [L]

Is this the relevant code?

Thanks.

Avatar
novaweb

Community Member, 115 Posts

20 March 2012 at 9:10am

Timetraveller,

You should do what Will said with regards to aligning images. The CMS is set up to do this automatically once you use the correct CSS in your CSS file.

For reference see themes/blackcandy/css/typography.css Line 183

/* WYSIWYG EDITOR ALIGNMENT CLASSES
-------------------------------------------- */
.typography .left {
   text-align: left;
}
.typography .center {
   text-align: center;
}
.typography .right {
   text-align: right;
}

/* IMAGES
-------------------------------------------- */
.typography img {
   border: none;
}
   .typography img.right {
      float: right;
      margin-left: 20px;
   }
   .typography img.left {
      float: left;
   }
   .typography img.leftAlone {
      float: left;
      margin-right: 100%;
   }
   .typography img.center {
      float: none;
      margin-left: auto;
      margin-right: auto;
      display: block;
   }

Follow the tutorial from the start:

http://doc.silverstripe.org/sapphire/en/tutorials/

This should take you no more than 2 hours and will bring you up to speed and will solve all of your problems, then you won't have to be confused by .htaccess directives.

If you follow the tutorial you should then be able to log in to SilverStripe's back end and create a page: http://userhelp.silverstripe.org/for-website-content-editors/creating-and-editing-content/

I hope this answers all of your queries?

Cheers,
Josh

Avatar
timetraveler

Community Member, 10 Posts

20 March 2012 at 11:13am

Thanks novaweb.

I added your lines to the css file, but still the alignment does not work. I even switched the theme back to Black Candy, and that did not help either. So I switched it back to Tutorial, with your css lines pasted in the right file and saved.

Next, I tried to place an image in my doc again. When doing so, I selected the following from the Alignment / Style dropdown box "On the right, with text wrapping around". But the image appeared on the left, with no text wrapping.

I checked the html box, and found the following code:

<div class="captionImage right" style="width: 100px;"><img class="right" src="assets/MyImage.JPG" alt="test" title="test" width="100" height="100" />
<p class="caption">test</p>
</div>

Seeing that the class was captionImage, I searched for "captionImage" in every file in the css folder in both the Tutorial theme and the Black Candy theme, but I could not find it.

If the captionImage class is not available, why is it being inserted automatically by tinymse when I use the Alignment / Style dropdown box as described above?

As for the tutorials, I did complete the first 2. Though I did not time my effort, I believe much more than 2 hours passed. As I progressed, I did understand some of the concepts, but increasingly, I found myself mindlessly pasting code without really understanding. So I stopped, and read up on php classes instead.

On the one hand, I realize I am lacking some knowledge, but on the other hand, I have programmed in php and MySQL for years, not as a pro but merely as my work requires it, so I feel a bit silly that I cannot figure this out.

Avatar
novaweb

Community Member, 115 Posts

20 March 2012 at 11:20am

Hi TimeTraveler,

What version of SilverStripe are you running? (2.X.X)

Do you have <div class="typography"> somewhere in your template to correspond with the .typography calls in your CSS file?

Cheers,
Josh

Avatar
timetraveler

Community Member, 10 Posts

20 March 2012 at 11:47am

I'm running SL 2.4.7 on a linux server.

I found this: <div id="Content" class="typography">

In the following files:

ArticleHolder.ss
ArticlePage.ss
HomePage.ss
Page.ss

which are in themes/tutorial/templates/layout/

btw, I am able to position my image on the right side with text wrap in tinymse by manually surrounding it in the following div, instead of the one that is automatically generated by tinymse:

<div style="text-align: right; margin-left: auto; margin-right: 0; width: 100%;"><img class="right" src="assets/MyImage.JPG" alt="test" title="test" width="100" height="100" /></div>

What do you think?

Thanks.

Go to Top