Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blog template and design improvements #305

Closed
steviepubliclab opened this issue Aug 17, 2015 · 23 comments
Closed

Blog template and design improvements #305

steviepubliclab opened this issue Aug 17, 2015 · 23 comments

Comments

@steviepubliclab
Copy link
Contributor

@steviepubliclab steviepubliclab commented Aug 17, 2015

Looking for some tips or functions in helping people publish to the blog with consistent layout. (ie picture/text placement)

http://publiclab.org/blog

@jywarren

This comment has been minimized.

Copy link
Contributor

@jywarren jywarren commented Aug 17, 2015

Do you mean a style guide of some sort? Or maybe a template?

@steviepubliclab

This comment has been minimized.

Copy link
Contributor Author

@steviepubliclab steviepubliclab commented Aug 17, 2015

Maybe a template.

On Mon, Aug 17, 2015 at 2:44 PM, Jeffrey Warren notifications@github.com
wrote:

Do you mean a style guide of some sort? Or maybe a template?


Reply to this email directly or view it on GitHub
#305 (comment).

@jywarren

This comment has been minimized.

Copy link
Contributor

@jywarren jywarren commented Aug 17, 2015

Would you like input on the design itself, or just on how it might be
implemented? I think very broadly speaking, paragraphs with single images
between them is a good pattern. Maybe 5 paragraphs? This post has good
overall text/image rhythm:
http://publiclab.org/notes/nicholas/07-08-2015/measuring-particulate-matter-with-the-girl-scouts

On Mon, Aug 17, 2015 at 3:51 PM, steviepubliclab notifications@github.com
wrote:

Maybe a template.

On Mon, Aug 17, 2015 at 2:44 PM, Jeffrey Warren notifications@github.com
wrote:

Do you mean a style guide of some sort? Or maybe a template?


Reply to this email directly or view it on GitHub
#305 (comment).


Reply to this email directly or view it on GitHub
#305 (comment).

@steviepubliclab

This comment has been minimized.

Copy link
Contributor Author

@steviepubliclab steviepubliclab commented Aug 18, 2015

I think something like a outline for people to use in terms of text and
photo placement could be helpful.

On Mon, Aug 17, 2015 at 3:10 PM, Jeffrey Warren notifications@github.com
wrote:

Would you like input on the design itself, or just on how it might be
implemented? I think very broadly speaking, paragraphs with single images
between them is a good pattern. Maybe 5 paragraphs? This post has good
overall text/image rhythm:

http://publiclab.org/notes/nicholas/07-08-2015/measuring-particulate-matter-with-the-girl-scouts

On Mon, Aug 17, 2015 at 3:51 PM, steviepubliclab <notifications@github.com

wrote:

Maybe a template.

On Mon, Aug 17, 2015 at 2:44 PM, Jeffrey Warren <
notifications@github.com>
wrote:

Do you mean a style guide of some sort? Or maybe a template?


Reply to this email directly or view it on GitHub
<#305 (comment)
.


Reply to this email directly or view it on GitHub
#305 (comment).


Reply to this email directly or view it on GitHub
#305 (comment).

@jywarren

This comment has been minimized.

Copy link
Contributor

@jywarren jywarren commented Aug 18, 2015

Maybe we could post an example layout at
http://publiclab.org/wiki/blog#Authoring

On Tue, Aug 18, 2015 at 3:38 PM, steviepubliclab notifications@github.com
wrote:

I think something like a outline for people to use in terms of text and
photo placement could be helpful.

On Mon, Aug 17, 2015 at 3:10 PM, Jeffrey Warren notifications@github.com
wrote:

Would you like input on the design itself, or just on how it might be
implemented? I think very broadly speaking, paragraphs with single images
between them is a good pattern. Maybe 5 paragraphs? This post has good
overall text/image rhythm:

http://publiclab.org/notes/nicholas/07-08-2015/measuring-particulate-matter-with-the-girl-scouts

On Mon, Aug 17, 2015 at 3:51 PM, steviepubliclab <
notifications@github.com

wrote:

Maybe a template.

On Mon, Aug 17, 2015 at 2:44 PM, Jeffrey Warren <
notifications@github.com>
wrote:

Do you mean a style guide of some sort? Or maybe a template?


Reply to this email directly or view it on GitHub
<
#305 (comment)
.


Reply to this email directly or view it on GitHub
<#305 (comment)
.


Reply to this email directly or view it on GitHub
#305 (comment).


Reply to this email directly or view it on GitHub
#305 (comment).

@steviepubliclab

This comment has been minimized.

Copy link
Contributor Author

@steviepubliclab steviepubliclab commented Aug 18, 2015

with a template?

On Tue, Aug 18, 2015 at 3:20 PM, Jeffrey Warren notifications@github.com
wrote:

Maybe we could post an example layout at
http://publiclab.org/wiki/blog#Authoring

On Tue, Aug 18, 2015 at 3:38 PM, steviepubliclab <notifications@github.com

wrote:

I think something like a outline for people to use in terms of text and
photo placement could be helpful.

On Mon, Aug 17, 2015 at 3:10 PM, Jeffrey Warren <
notifications@github.com>
wrote:

Would you like input on the design itself, or just on how it might be
implemented? I think very broadly speaking, paragraphs with single
images
between them is a good pattern. Maybe 5 paragraphs? This post has good
overall text/image rhythm:

http://publiclab.org/notes/nicholas/07-08-2015/measuring-particulate-matter-with-the-girl-scouts

On Mon, Aug 17, 2015 at 3:51 PM, steviepubliclab <
notifications@github.com

wrote:

Maybe a template.

On Mon, Aug 17, 2015 at 2:44 PM, Jeffrey Warren <
notifications@github.com>
wrote:

Do you mean a style guide of some sort? Or maybe a template?


Reply to this email directly or view it on GitHub
<
#305 (comment)
.


Reply to this email directly or view it on GitHub
<
#305 (comment)
.


Reply to this email directly or view it on GitHub
<#305 (comment)
.


Reply to this email directly or view it on GitHub
#305 (comment).


Reply to this email directly or view it on GitHub
#305 (comment).

@jywarren

This comment has been minimized.

Copy link
Contributor

@jywarren jywarren commented Aug 18, 2015

Yep, did you have some headings you'd like to include? We can make the
template include hints like <!-- consider inserting a nice photo here -->
which won't show up when it's published.

On Tue, Aug 18, 2015 at 4:24 PM, steviepubliclab notifications@github.com
wrote:

with a template?

On Tue, Aug 18, 2015 at 3:20 PM, Jeffrey Warren notifications@github.com
wrote:

Maybe we could post an example layout at
http://publiclab.org/wiki/blog#Authoring

On Tue, Aug 18, 2015 at 3:38 PM, steviepubliclab <
notifications@github.com

wrote:

I think something like a outline for people to use in terms of text and
photo placement could be helpful.

On Mon, Aug 17, 2015 at 3:10 PM, Jeffrey Warren <
notifications@github.com>
wrote:

Would you like input on the design itself, or just on how it might be
implemented? I think very broadly speaking, paragraphs with single
images
between them is a good pattern. Maybe 5 paragraphs? This post has
good
overall text/image rhythm:

http://publiclab.org/notes/nicholas/07-08-2015/measuring-particulate-matter-with-the-girl-scouts

On Mon, Aug 17, 2015 at 3:51 PM, steviepubliclab <
notifications@github.com

wrote:

Maybe a template.

On Mon, Aug 17, 2015 at 2:44 PM, Jeffrey Warren <
notifications@github.com>
wrote:

Do you mean a style guide of some sort? Or maybe a template?


Reply to this email directly or view it on GitHub
<
#305 (comment)
.


Reply to this email directly or view it on GitHub
<
#305 (comment)
.


Reply to this email directly or view it on GitHub
<
#305 (comment)
.


Reply to this email directly or view it on GitHub
<#305 (comment)
.


Reply to this email directly or view it on GitHub
#305 (comment).


Reply to this email directly or view it on GitHub
#305 (comment).

@steviepubliclab

This comment has been minimized.

Copy link
Contributor Author

@steviepubliclab steviepubliclab commented Aug 19, 2015

That's a good idea. Is there also something that can help center the photos
people upload as well so it looks consistent with the blog layout?

What do you think of this draft template:

###Where my story starts:

Text here

<!- consider inserting a nice photo here ->
Insert photo caption here

Text here

###Why this is important to me:

Text here

<!- consider inserting a nice photo here ->
Insert photo caption here

Text here

###This has made me reflect on:

Text here

<!- consider inserting a nice photo here ->
Insert photo caption here

Text here

@jywarren

This comment has been minimized.

Copy link
Contributor

@jywarren jywarren commented Aug 20, 2015

I think that template can work, but maybe we could put hidden prompts for
content as well as images, and have the section headings be something
shorter -- since many folks may not write in their own titles, so we should
be prepared for the ones we supply to actually be published.

We could force centering on images... i'm a bit worried it'll take some
trickery and not work 100% of the time, but can give it a try.

On Wed, Aug 19, 2015 at 10:42 AM, steviepubliclab notifications@github.com
wrote:

That's a good idea. Is there also something that can help center the photos
people upload as well so it looks consistent with the blog layout?

What do you think of this draft template:

###Where my story starts:

Text here

Insert photo caption here

Text here

###Why this is important to me:

Text here

Insert photo caption here

Text here

###This has made me reflect on:

Text here

Insert photo caption here

Text here

On Tue, Aug 18, 2015 at 3:27 PM, Jeffrey Warren notifications@github.com

wrote:

Yep, did you have some headings you'd like to include? We can make the
template include hints like <!-- consider inserting a nice photo here -->
which won't show up when it's published.

On Tue, Aug 18, 2015 at 4:24 PM, steviepubliclab <
notifications@github.com

wrote:

with a template?

On Tue, Aug 18, 2015 at 3:20 PM, Jeffrey Warren <
notifications@github.com>
wrote:

Maybe we could post an example layout at
http://publiclab.org/wiki/blog#Authoring

On Tue, Aug 18, 2015 at 3:38 PM, steviepubliclab <
notifications@github.com

wrote:

I think something like a outline for people to use in terms of text
and
photo placement could be helpful.

On Mon, Aug 17, 2015 at 3:10 PM, Jeffrey Warren <
notifications@github.com>
wrote:

Would you like input on the design itself, or just on how it
might
be
implemented? I think very broadly speaking, paragraphs with
single
images
between them is a good pattern. Maybe 5 paragraphs? This post has
good
overall text/image rhythm:

http://publiclab.org/notes/nicholas/07-08-2015/measuring-particulate-matter-with-the-girl-scouts

On Mon, Aug 17, 2015 at 3:51 PM, steviepubliclab <
notifications@github.com

wrote:

Maybe a template.

On Mon, Aug 17, 2015 at 2:44 PM, Jeffrey Warren <
notifications@github.com>
wrote:

Do you mean a style guide of some sort? Or maybe a template?


Reply to this email directly or view it on GitHub
<

#305 (comment)

.


Reply to this email directly or view it on GitHub
<

#305 (comment)

.


Reply to this email directly or view it on GitHub
<
#305 (comment)
.


Reply to this email directly or view it on GitHub
<
#305 (comment)
.


Reply to this email directly or view it on GitHub
<
#305 (comment)
.


Reply to this email directly or view it on GitHub
<#305 (comment)
.


Reply to this email directly or view it on GitHub
#305 (comment).


Reply to this email directly or view it on GitHub
#305 (comment).

@jywarren

This comment has been minimized.

Copy link
Contributor

@jywarren jywarren commented Aug 21, 2015

I think that this will work, but it won't in all circumstances:

.blog > p > a {
  text-align: center;
  width: 100%;
  display: block;
}
@jywarren jywarren changed the title Blog layout Blog layout template and design improvements Aug 21, 2015
@jywarren jywarren changed the title Blog layout template and design improvements Blog template and design improvements Aug 21, 2015
@steviepubliclab

This comment has been minimized.

Copy link
Contributor Author

@steviepubliclab steviepubliclab commented Aug 21, 2015

Does that plug into the template somewhere? And do you have other heading
suggestions?

On Thu, Aug 20, 2015 at 10:57 PM, Jeffrey Warren notifications@github.com
wrote:

I think that this will work, but it won't in all circumstances:

.blog > p > a {
text-align: center;
width: 100%;
display: block;
}


Reply to this email directly or view it on GitHub
#305 (comment).

@jywarren

This comment has been minimized.

Copy link
Contributor

@jywarren jywarren commented Aug 24, 2015

The best way to do it will be to set this in the site's code (stylesheet). For heading suggestions:

###The beginning OR The story begins

###What we did

###Why it matters

###How you can help


Also, here's an improved stylesheet with help from @zenhack (on an unrelated project):

section > p img {
  display: block;
  margin: 0 auto
} 
@jywarren

This comment has been minimized.

Copy link
Contributor

@jywarren jywarren commented Sep 8, 2015

Did these headings look good to you?

@ebarry ebarry added the outreach label Sep 8, 2015
@steviepubliclab

This comment has been minimized.

Copy link
Contributor Author

@steviepubliclab steviepubliclab commented Sep 8, 2015

Would this just be another template or would it help with the look of the
posts?

On Tue, Sep 8, 2015 at 2:16 PM, Jeffrey Warren notifications@github.com
wrote:

Did these headings look good to you?


Reply to this email directly or view it on GitHub
#305 (comment).

@jywarren

This comment has been minimized.

Copy link
Contributor

@jywarren jywarren commented Sep 8, 2015

This issue covers both, but we can start with the template. I think we can
pretty easily add both!

On Tue, Sep 8, 2015 at 3:19 PM, steviepubliclab notifications@github.com
wrote:

Would this just be another template or would it help with the look of the
posts?

On Tue, Sep 8, 2015 at 2:16 PM, Jeffrey Warren notifications@github.com
wrote:

Did these headings look good to you?


Reply to this email directly or view it on GitHub
#305 (comment).


Reply to this email directly or view it on GitHub
#305 (comment).

@jywarren

This comment has been minimized.

Copy link
Contributor

@jywarren jywarren commented Oct 1, 2015

image centering fixed in b5f7596 and bcf5383

@steviepubliclab

This comment has been minimized.

Copy link
Contributor Author

@steviepubliclab steviepubliclab commented Oct 9, 2015

Thanks Jeff! Looks much better with them all centered.
-Stevie

On Thu, Oct 1, 2015 at 12:42 PM, Jeffrey Warren notifications@github.com
wrote:

image centering fixed in b5f7596
b5f7596
and bcf5383
bcf5383


Reply to this email directly or view it on GitHub
#305 (comment).

@sudheesh001

This comment has been minimized.

Copy link
Contributor

@sudheesh001 sudheesh001 commented Apr 12, 2016

Does this need more work or can this be closed ? It looks the fixes are already in place in b5f7596 and bcf5383

@jywarren

This comment has been minimized.

Copy link
Contributor

@jywarren jywarren commented Apr 12, 2016

I am leaving this open a bit longer as I think we need a few more
improvements, mostly design work. But one thing we badly need is pagination
-- there's none right now -- so if you'd like to tackle that, it'd be much
appreciated. You can borrow pagination view code here:

https://github.com/publiclab/plots2/blob/master/app/views/notes/_notes.html.erb#L50

And in the controller, it just needs: .paginate(page: params[:page]) as
is shown in several other controller actions. The blog code is in the Tag
controller.

On Apr 12, 2016 12:25 AM, "Sudheesh Singanamalla" notifications@github.com
wrote:

Does this need more work or can this be closed ? It looks the fixes are
already in place in b5f7596
b5f7596
and bcf5383
bcf5383


You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#305 (comment)

@jywarren

This comment has been minimized.

Copy link
Contributor

@jywarren jywarren commented May 6, 2016

At some point, I'm thinking of adapting some of the styles from the new dashboard at https://publiclab.org/dashboard -- it'd be pretty fast and easy. Stevie, are you interested in seeing research notes in a sidebar or something? Or a link from the blog to all research notes -- thinking that folks might start reading the blog, and be drawn into the rest of the site?

@steviepubliclab

This comment has been minimized.

Copy link
Contributor Author

@steviepubliclab steviepubliclab commented May 9, 2016

Hi there,
I don't want to crowd the blog, but a link to research notes or the
dashboard might be nice.
-Stevie

On Fri, May 6, 2016 at 5:27 PM, Jeffrey Warren notifications@github.com
wrote:

At some point, I'm thinking of adapting some of the styles from the new
dashboard at https://publiclab.org/dashboard -- it'd be pretty fast and
easy. Stevie, are you interested in seeing research notes in a sidebar or
something? Or a link from the blog to all research notes -- thinking that
folks might start reading the blog, and be drawn into the rest of the site?


You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#305 (comment)

@jywarren

This comment has been minimized.

Copy link
Contributor

@jywarren jywarren commented Nov 15, 2016

Closing this issue and opening a new one for the template! #988

@jywarren jywarren closed this Nov 15, 2016
@jywarren

This comment has been minimized.

Copy link
Contributor

@jywarren jywarren commented Nov 15, 2016

And I'll make a new one at #989 for the "link to research notes or the dashboard".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.