v0.2 Gallery (2015.7.17)

Features added in version 0.2

• Sort pictures by tag
• Beautify, increase waterfall flow effect
• Add Tag page and single picture page
• Add a picture page to publish

The following is an explanation.

Each additional feature is modified from four aspects of model, template, view, and route one by one.

Model: Add Tag Property

Thinking about the classification method according to yesterday's thinking is still no way to consider the complete, so decided to use tag tag classification.
Start by creating a new tag class in models.py with only one name property

class Tag(models.Model):    name=models.CharField(max_length=20,null=False,unique=True,default="")    def __unicode__(self):        return self.nameadmin.site.register(Tag)

Then specify the many-to-many attribute tags in the photo class

tags=models.ManyToManyField(Tag,related_name=‘has_photos‘,blank=True)

Template: Add tag page, photo page and post page

To show all the pictures and individual images that a tag contains. So the tag display should be the same as the home page,

Tag.html

    {% extends "base.html"%}    {% block title%}{{Tag.name}}{% endblock %}    {% block content%} <div class="Jumbotron"><H1 Align= "center">           {{Tag.name}} </H1></div><div class=" Grid-sizer "></div>             {%  for photo  in tag.has_photos.all%} <div class="Grid-item"><a href ="p/            {{photo.id}}  /"><img src="      {{Photo.url}}  "></a><p>             {{Photo.title}} </P><p>       {%  for tag  in photo.tags.all%} <a href='/t/  {{tag.id}} /'>{{Tag.name}} </a> {% endfor %} </P></div>         {% endfor %}    {% endblock %}

Here in the above set up a giant curtain to show the name of the tag, the following slice.
The tag variable is passed in by the view and gets all the pictures of the tag through Tag.has_photos.all.

Photo.html

    {% extends "base.html"%}    {% block title%}{{Photo.title}}{% endblock %}    {% block content%} <div class="Jumbotron" align="center">< h3>           {{Photo.title}} </h3><img src="        {{Photo.url}}  " ></div><div class=" Grid-sizer " ></div>             {% endblock %}

It's easy to pass in photo and show it.

Post.html

Post page requires a form to post picture information

    {% extends "base.html"%}    {% block title%}post a new picture{% endblock %}    {% block content%}<form class="form-horizontal panel Container" method="POST"  Action="." >    {% csrf_token %}        <div class="Form-group">            <labelclass="Control-label" for ="examplereply">  Title (required, each picture must have a name OH):</label>            <input type=' text ' name=' title ' Value= "" class="Form-control" id="examplereply" placeholder=" "></input>        </div>        <div class="Form-group">            <labelclass="Control-label" for ="Examplereply">   Link (does not support direct upload, you can first post to the heap of sugar and other sites and paste the link, thank you for your cooperation):</label>            <input type=' text ' name=' url ' value= '"  Class="Form-control" id="examplereply" placeholder= "" ></input>        </div>        <div class="Form-group">            <labelclass="Control-label" for ="examplereply">  tags (multiple free spaces):</label>            <input type=' text ' name=' tags ' value=  "" class="Form-control" id="examplereply" placeholder =""></input>            <labelclass="Control-label" for ="examplereply">  It is best to use a well-defined noun or adjective to indicate the best image source and image type. See the Existing Notes</label>        </div>        <div class="Form-group col-md-2">            <input type="hidden" name= "Next" value="/"/ >            <input type="Submit" class="btn btn-lg btn-primary" Value="Publish"/>        </div>    </form>    <ul class="List-group">    {%  for tag  in tags%} <li class="List-group-item"><span  Class="badge">     {{tag.}}</span>{{Tag.name}}</li>    {% endfor %}</ul>        {% endblock %}

Post pass three parameters, picture title, Image link URL, and Tag,tag as a string, split in the view file and bound to the picture.

Routing: Add links to Tag,photo and post

Added three lines:

    url(r‘^post/$‘,post,name=‘post_page‘),    url(r‘^t/(?P<id>\d+)/$‘,show_by_tag,name=‘tag_page‘),    url(r‘^p/(?P<id>\d+)/$‘,show_photo,name=‘show_photo_page‘),

To pass the information in the link in the way of the ID instead of the name, is actually steals a lazy, obtains the object directly according to the ID to be convenient many.

View: Add three views post view

A little bit more complicated to show the form, and also to receive processing data

     def post(Request):        ifrequest.method==' POST ': Title=request. Post.get (' title ') Url=request. Post.get (' URL ') Tags=request. Post.get (' tags '). Split () new_photo=photo.objects.create (Title=title, Url=url)ifTags forTaginchTags:new_tag,dummy=tag.objects.get_or_create (Name=tag) new_photo.tags.add (New_tag)#add tag to New_photoNew_photo.save ()returnHttpresponseredirect ('/')Else: Tags=tag.objects.all ()returnRender_to_response (' post.html ', RequestContext (request,{' tags ': tags}))

When the transfer method is post, get post data, create a photo object, and then cut the label string into a single label, add to the photo's tags attribute inside, and then save, jump to the home page.

When the transfer method is get, the form page is displayed directly, but here I show all the existing tags behind the form.

Tag and photo views

    def show_by_tag(request,id):        tag=Tag.objects.get(pk=id)        return render_to_response(‘tag.html‘,RequestContext(request,{‘tag‘:tag}))    def show_photo(request,id):        photo=Photo.objects.get(pk=id)        return render_to_response(‘photo.html‘,RequestContext(request,{‘photo‘:photo}))

Get the tag and photo for the ID in the link and pass the parameters on it.

is still released with Pythonanywhere:
The Sage Gallery

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

v0.2 Gallery (2015.7.17)