I'm making a project, it's a website that list some events, here its preview:
https://i.imgur.com/yo20mTo.jpg
I can modify the html and css and post more events like the image above, but it's not practical if I have to alter the html every single time I want to post an event or update it.
Is there any way to make a script to do it? Like a page where I just put things like event name, date, a image and stuff, and it generate an event like in the image above?
To be more specific, an script that makes this just by typing the information I want:
<div class="item active">
<img class="img-responsive" src="imagens/aero.jpg" alt="Image">
<div class="carousel-caption">
<h3>Aerosmith em São Paulo</h3>
<p>Mais informações</p>
</div>
</div>
Like a form that it automatcly creates it:
<div class="item active">
</div>
</div>
Then i put an image:
<div class="item active">
<div class="item active">
<img class="img-responsive" src="imagens/aero.jpg" alt="Image">
<div class="carousel-caption">
</div>
</div>
and then some info about it:
<div class="item active">
<img class="img-responsive" src="imagens/aero.jpg" alt="Image">
<div class="carousel-caption">
<h3>Aerosmith em São Paulo</h3>
<p>Mais informações</p>
</div>
</div>
and finally i post it and it gets like the image above.
You are talking about building a CMS. You may want to build your own, which can be fun, but likely you will want to use something that already exists and is easy to host. One easy to use example would be Wordpress.
Alternatively you could look at a static site generator (such as hugo), which will generate html pages for you on your computer, which you can then upload to your hosting provider.
If you go the Hugo route, you will have to create a page template for each event, and then make a data file (it can use several formats like json or yml) which contains the data for every event.
Related
OK so I am trying to build my own website using HTML templates and well i created a few additional pages of my own to incorporate to the template however and I linked them together well i thought i did and when i click the button linked to my created pages it does nothing it does not even refresh the page.
ill put a snippet of the part of the code i have problems with
<div class="col-lg-4 course_col">
<div class="course">
<div class="course_image"><img src="images/Physics.png" alt=""></div>
<div class="course_body">
<div class="course_title">Physics</div>
<div class="course_info">
<ul>
<li>Edward Nkadimeng</li>
<li>Grade 12</li>
</ul>
</div>
<div class="course_text">
<p>Physics Curriclum.</p>
</div>
</div>
</div>
</div>
I downloaded this html5 template for a project https://html5up.net/overflow and I dont know how to put a link for github on the pictures displayed in the gallery (those 8 ) I want that when I click the pic and expand , the next click should sent me to a link and not to scroll over the next or previous picture.I tried to check the code but i found it to complicated for my actual level to figure it out . I am hoping that i can get some help here :) thank you
EDIT: I actualy need help in this part of code
<div class="inner gallery">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/thumbs/Pairs.png" alt="" title="A little game in"/></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/Chrome.png" alt="" title="Dressed in Clarity" /></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/MP3.png" alt="" title="Raven" /></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/Studenti.png" alt="" title="I'll have a cup of Disneyland, please" /></div>
</div>
</div>
When I click them twice I would like to send me to other links on other sites
if im understanding correctly what do you want do this
Change in your code..
Proceed as anticipated
for
Proceed as anticipated
dont forget to remove remove class="..."
I have an ng-repeat in my html that creates around 750 divs (i am producing labels for my products), i have designed them how i would like them to look and i am happy with this, but as they are quite big the print preview doesn't look anything like my design.
I want to know if it is possible in Angular to easily iterate through each of the ng-repeat items and save them as a png?
Below is my ng-repeat :
<div class="col-lg-4" ng-repeat="p in productcodes">
<div class="contact-box" style="padding:0px !important;height:370px;width:650px;">
<span ui-sref="profile">
<div class="col-lg-3" style="padding:0px">
<img alt="image" class="img m-t-xs img-responsive rotateimage" style="max-width:1000% !important;width:200%" ng-src="">
</div>
<div class="col-lg-2" style="padding:0px">
<div >
<h3 style="margin-top:45px;">Code:</h3>
<h3>Colour:</h3>
<h3>Item:</h3>
<h3>EN Cert:</h3>
<h3>Size GB:</h3>
<h3>Size SE:</h3>
<h3>Size EU:</h3>
<h3>Length:</h3>
</div>
</div>
<div class="col-lg-3" style="padding:0px">
<h3 style="margin-top:45px;"><strong>{{p.pcode}}</strong></h3>
<strong>
<h3>{{p.Colour}}</h3>
</strong>
<h3>
{{p.shortdescription}}</h4>
<h3>N/A</h3>
<strong>
<h3>{{p.Size}}</h3>
</strong>
<h3>C62</h3>
<h3>3XL+</h3>
<strong>
<h3>{{getsize(p.SizeCode)}}</h3>
</strong>
</div>
<div class="col-lg-4 col-md-12 col-sm-12" style="padding:0px">
<img alt="image" class="img-circle m-t-xs img-responsive" style="margin-top:60px;width:200%;" src=".{{p.localimg}}">
</div>
<div class="clearfix"></div>
</span>
</div>
</div>
I want to know if it is possible in Angular to easily iterate through
each of the ng-repeat items and save them as a png?
Short answer
No
Long answer
Save as png where? You can store them on server side or your comp. Its not related to Angular. For example, if you would use cloudinary as image storage, you will be able to transform image resolutions for preview by changing URL:
http://res.cloudinary.com/demo/image/upload/w_70,h_53,c_scale/turtles.jpg:
http://res.cloudinary.com/demo/image/upload/w_30,h_23,c_scale/turtles.jpg
Further, its not good practice to show 750 images at once, you gonna kill your web page. Keep in mind, after 2K of watchers the web view performance slows down.
I believe if you have fixed height of ng-repeat item, I would use infinite scrolling. For example take a look on Google Material virtual Repeat approach.
Other solution
If your image preview is small, you can convert image to base64 and it will save you from calling 750 HTTP requests
I make gallery on my onepage website. I try use show/hide and scrollit
to show more details about my work. But I do not know how to connect it together to make it work.
Here code gallery. When I push it open information about it.
<li>
<a href="#single-project" class="show_hide more" rel="#slidingDiv8" >
<div class="item web-design" data-ref="mixitup-target">
<img src="img/1.png" alt="project 9">
</div>
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h6>Amazing Caption</h6>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</a>
</li>
Here is Scrolit which I want to put in the code above.
<li><a data-scroll-nav='4'></a></li>
In the start div i have add
<section data-scroll-index='4'>
How do I connect them show/hide and scrollit to work together? Trying for some time and will only show/hide but not scroll.
Are you trying to use Jquery toggle class ? If yes, Jquery trigger can be call like this $(selector).toggle(speed,callback);
Hope this helps
https://jsfiddle.net/pq8ef3dw/
I am trying to create a slideshow with an onload event through a separate JS file. I've tried looking for possible solutions online and all of them require the coding to be all in one file. What would be the best way to approach this issue?
I have attached my HTML coding for the JS reference.
<div class="slideshow-container">
<div id="slideshow">
<div class="numbertext">1 / 5</div>
<img src="images/LakeYellowstoneSunset.jpg" height="408px" width="616px"/>
<div class="text">Yellowstone National Park<div>
<div class="numbertext">2 / 5</div>
<img src="images/SanMural.jpg" width="408px" height="616px"/>
<div class="text">San Francisco, CA</div>
<div class="numbertext">3 / 5</div>
<img src="images/SanJelly.jpg" height="408px" width="616px"/>
<div class="text">San Francisco Aquarium</div>
<div class="numbertext">4 / 5</div>
<img src="images/AKGold.jpg" height="408px" width="616px"/>
<div class="text">Alaska Yukon</div>
<div class="numbertext">5 / 5</div>
<img src="images/SaltLake.jpg" height="408px" width="616px"/>
<div class="text">Salt Lake City, UT</div>
</div>
</div>
I'm not exactly sure what you are asking since you didn't give us the JS code you are working with. I am assuming you only want 1 image displayed and we should start cycling through the images after the web pages loads.
I updated your HTML slightly and added JS code to do this in the below codepen/
http://codepen.io/anon/pen/WopMzb
I updated your "slide" html to the be wrapped in a div so we can easily hide/show the "slide"
<div class="slide active">
<div class="numbertext">1 / 5</div>
<img src="images/LakeYellowstoneSunset.jpg" height="408px" width="616px"/>
<div class="text">Yellowstone National Park<div>
</div>
This will only show 1 "Slide" at a time and will change the slide every 3 seconds.
For future questions it may be best to create a codepen or something similar with the CSS/JS/HTML that you are having trouble with. You are more likely to receive a response if it is easier for someone to debug.
"All of them require the coding to be all in one file". That's false. There is no difference, how you include, for example, Javascript code for your HTML:
Creating separate js file and include it via script tags like this (in your HTML):
<script src="yourFile.js"></script>
Or you include all the Javascript logic in your HTML like this:
<script>
// Your Javascript logic here
</script>
Your html structure reminds me of bootstrap's carousel option. If you don't mind adding bootstrap to your project it might be worth a look:
Bootstrap carousel
Added bonus is that you don't have to write anything custom for your slideshow control.