drupal

Palms splattered sky with lasers ray in the background

Drupal 8 is the latest version of Drupal, including major improvements over version 7 and taking a major leap in technology, performance and extensibility, its new PHP object-oriented based "core" makes use of some of the best known and successful Symphony, Composer, Twig and more, improving user experience and facilitating development work. In this article we are going to show you the simplest and fastest way to have a Drupal 8 web working in Spanish in a very short time, in short 5 minutes will be enough (not counting file download/upload or installation time, which varies depending on the used server). What do we need? Before starting, we need to have an environment where you can perform the installation that meets the technical requirements to run Drupal 8, most commonly a server with Apache 2.x, MySQL (5.5.3 or higher) and PHP (5.5.9 or higher), These requirements are very common so virtually any hosting provider offers them within their services´ catalog. There are also some automated installation solutions (Installatron is one of the best known) that includes Drupal within its application catalog. In case you do not have a solution of these characteristics, the different control panels that are usually incorporated into each hosting service as (cPanel, DirectAdmin and other) greatly facilitate the different tasks to be carried out for the installation. Some specialized hosting providers like Pantheon.io even offer a complete automated installation making it possible to create a site in Drupal 8 in a few clicks. In any case, the manual installation system is very simple, and the tasks to be carried out are very similar using the hosting control panel that is used. There are two essential components to the operation of Drupal: The system source code. It consists of a tree of folders and files (most of which are written in php) that must be executed on the web server, usually in a folder called "public_html", "www" or "htdocs", both the location and the name Of this folder depends on the configuration that the hosting provider has established in the server operating system, for this article we will assume that the folder is "public_html" and we refer to it as the "root" folder. The database. All the information that the source code needs to store is stored in a database managed by the database server, the architecture of the systems depends on many factors and can be very varied and in this article we are going to assume that both The web server as the database are the same, as it is the most common configuration in the small size accommodations. Minute 1. Prepare the source code To prepare the environment we need to incorporate the elements that will shape our system, first we will obtain the necessary source code, performing the following steps: 1. Download the latest available version of Drupal 8 from Drupal's official website. We will get a compressed file with the tree of folders and files that make up the source code. 2. Next, either through the file manager of the hosting control panel or through an FTP client it is necessary to upload the downloaded file to the root folder of the web server. 3. The next step is to unzip the file that we just uploaded, normally the file manager of the panel has the option "Unzip" or "Extract", if we do not have these options, then instead of uploading the compressed file, We will do it will decompress it in our computer and upload to the root folder all the files and folders with the same structure that they have inside the compressed file. Once this operation is finished, we can delete the compressed file that we had uploaded initially, so that in our root folder it is as follows: 4. Create translation folder. This step is only necessary if you want to install Drupal in a language other than English, for this you need to create the folder "sites / default / files / translations", in the newly created folder structure we will navigate to "sites"> "default" and We will see that the folder "files" does not exist, we create it and within it we create "translations", to avoid problems of permissions during the installation, we will assign "777" permissions to both the files folder and translations, Installation can be modified to apply a more restrictive configuration. 5. Create settings.php file. In the "sites / default" folder, we will duplicate the default.settings.php file and name it "settings.php" in the new file. We will also assign "777" permissions. Minute 2. Prepare database The second essential component of our installation is the database, for it is necessary to create it from the panel of our hosting, in the option "Manage databases" or "Management of MySQL" or a similar name, the final objective is to arrange The name of a database and the name and password of a user authorized to operate with that database, the steps to follow vary depending on the control panel that is used, but are usually the following: 1. Create database by naming it. 2. Create database user, assigning him the newly created database so that he can operate with it. In some panels these two operations are performed simultaneously from the same database creation window. Minute 3. Run installer It is the moment to open with the browser our web page, if the source code has been correctly incorporated, the installation page will automatically appear in which we must go selecting the options that most interest us to configure our site drupal: 1. Select language. In this case select "Spanish" and click on "Save and continue" 2. Select profile. We will select the option "Standard", since it incorporates the most common preconfigured features, the option "Minimum" is indicated for advanced users who want to build the site from scratch by personalizing all the functions. 3. Configuration of the database. In this window we will introduce the names of the database and the user that we had created, as well as the password that we had defined, normally the advanced options do not need to be changed unless the server configuration requires it. After pressing "Save and continue" will begin the installation of the system components and then import the necessary translations into Spanish, the installation time may vary depending on the speed and power of the server that we are using, all this time , A progress bar and an informational text will appear on the screen indicating what is being done and the percentage completed. Minute 4. Set up site At the end of the process a screen will be displayed where we have to configure the basic system information: 1. Name and email of the site 2. Admin user name, email and password 3. Default country and time zone 4. Updates We click on the save button and our drupal site will load for the first time with the session started for the admin user. Minute 5. Change file permissions settings.php Once the installation is finished it is time to change the permissions of the settings.php file, the recommended permissions are 444, ie, to delete the permissions of writing and execution for all users, this is very important since if it was not done we would be Creating a huge security hole on our website. Got it! We already have operating our website in Drupal 8. With Drupal 8 we have a system with extensive configuration possibilities, we can add new functionalities by installing one of the thousands of modules available on drupal.org or by custom creating what we need and incorporating a personalized theme that gives a unique look and image. We will have a reliable, secure and scalable system focused on performance, we will not have to worry about whether it will respond to the growth rate of our business, since Drupal can meet the needs of both a small blog and a global corporate website with thousands of users and millions of page views. Main photo: Nathan Dumlao

The best Drupal modules for your responsive website

drupal, responsive

Responsive web design has gone from being an extra service for customers to almost an obligation. The possibility of making a website without following this paradigm is no longer contemplated. And not only in Drupal, but in any CMS. Much of this new guideline when designing has had Google, which in 2015 decided to give a new boost to this design philosophy including as an important factor of measurement for technical SEO positioning. To this day, websites that are perfectly adapted to any device have better ranking in Google, while the others suffer penalties. But Google has not been the only one that has driven this trend. The users themselves have been more demanding and have very positively valued the webs with this design, failing to use the ones they found uncomfortable navigating from their small devices. Drupal has not been left behind in this trend while every time is more and more established within the community and this does not stop to generate modules specifically developed for the creation of responsive webs. Currently there is no barrier between responsive design and web development in Drupal. Any design proposal can be perfectly executed thanks to all the modules that exist. Even design paradigms such as "Mobile First", which consists of designing the mobile versions of the web first and scaling the design to the desktop version, are perfectly compatible with the creation of a site based on Drupal. Here is a list of the best modules for responsive design in Drupal: Responsive Menus The famous "hamburger menu" is an indispensable element for any responsive design of quality. Ideally you should do a little development by combining Jquery with Css, but this module will save you that time. Once installed you will be able to configure many options, for example to what measure of pixels you want the menu to be activated or what style you want it to have. Responsive Images and styles One of the biggest problems of responsive design is the loading of images. A very heavy load of photos causes the web to load very slowly on mobile devices. This module allows us to create different image styles so that the web automatically serves the photos adapted to the size of the screen. It also supports the Media module, which will make uploaded images with the text editor also have this capability. Fitvids I do not know about you, but I find it quite annoying to enter a website that integrates videos and not being able to play because they appear maximized. With this module this problem is solved since, once configured, any video that you upload to the web will appear adapted to the correct size of the screen. FooTable Another of the headaches between designers and developers are the much feared (and hated) TABLES. This module finally attacks the problem "tables vs. mobiles" and solves it with an integration that converts the table into a very intuitive and with great usability box of drop-down options. Display Suite Created in source only for fluidly designed webs, it is currently used in virtually every development, and is a strong candidate to enter the next version of Drupal Core. The most useful thing is that you can choose the design of the templates of the nodes without theming. But it also allows you to create custom fields, such as fields with PHP code or fields that show existing blocks, and integrate them into the structure of the node. Flex Slider With this module we can keep the images of a slider fluid so they do not deform. Its load speed is very good and allows to configure its style and time of reproduction. It is not a complete solution since, depending on the format of the images, they can become very small in mobiles and give usability problems. Fields Groups + Easy Responsive Tabs to Accordion The greatest virtue of this module is that it allows us to create groups of fields without theming. Among the styles you can choose to display them is the tabs mode. This is where responsive restrictions come into play as tabs usually do not work properly on oversized mobiles. With the Easy Responsive Tabs to Accordion sub module you can convert the tabs into a simple, fluid vertical menu. It is one of the best responsive Drupal solutions we have used so far. Backstrech Background images or backgrounds that are used on covers or banners, are often another of the responsive headaches. Being a fluid design, the image is usually deformed as the container reduces its width. But with this module we will ensure that the image is maintained with the same high and ALWAYS centered, without deforming. As you can see there are a lot of modules that can make life easier for us when implementing a responsive design in our Drupal website. It is important to keep in mind that there will always be some adjustments in CSS and Jquery so that everything stays the way we want, but thanks to these modules we will get a 100% responsive website made with Drupal. Fotografía principal: Victor Xok

The 80 most important Drupal websites in the world

drupal, web design

In the last few years, Drupal has established itself as one of the most used CMS's in the world and is present on the servers of many top level companies and organizations. Tired of diving into typical outdated showcases, which show small subsites and microsites only due to the fact that they belong to renowned brands, I have decided to create my own selection. The sites in the list have been selected because they have very high traffic, a highly complex development or because they are the visible face of brands with worldwide relevance. It has not been easy, but here is my selection of the 80 most relevant websites on the Drupal scene. Tesla Motors The world's most cutting-edge and modern electric car maker tops our list of companies and organizations using Drupal. http://www.teslamotors.com/ Johnson & Johnson Manufacturer of medical devices, pharmaceuticals and personal care products with over 230 subsidiaries and presence in 175 countries. http://www.jnj.com/ Virgin Main site if the Virgin Group conglomerate. https://www.virgin.com/ General Electric The multinational mega corporation founded by the inventor of the light bulb, Thomas Alva Edison. http://www.ge.com/ Burger King Ultra well known fast food chain. http://www.bk.com/ Pfizer Multinational pharmaceutical. http://www.pfizer.com/ Mattel The world's largest toy company. http://play.mattel.com/ Time Warner Multinational corporation dedicated to the exploitation of media, cinema, tv and diverse publications. http://www.timewarner.com/ NBA One of the most important competitive sports organizations in the world. http://www.nba.com/ CSV Health Nora American giant of the sanitary and retail pharmaceutical. https://cvshealth.com/ Nokia Finnish telecommunications and technology multinational. https://nokia.com/ World Fuel Services Multinational dedicated to services related to fuel transportation and one of the 100 largest companies in the world. https://www.wfscorp.com/ Qualcomm Technological company producing hardware and software of various kinds. https://www.qualcomm.com/ PBF Energy Giant dedicated to the world of oil and its derivatives. http://www.pbfenergy.com/ Guerlain Multinational for perfumes and other cosmetic products. http://www.guerlain.com/ Stanley Black & Decker The mythical tool brand. http://www.stanleyblackanddecker.com/ Indra Sistemas Spanish Techonology, Consulting, Defense and Communications Multinational. http://www.indracompany.com/ Parrot A world leader in hands-free sales, it now also sells all kinds of "toys" for children and adults. https://www.parrot.com/ Clinique American cosmetic products multinational. http://www.clinique.com/ National Collegiate Athletic Association Association that handles most of the programs and sports scholarships in the USA. It is made up of more than 1200 institutions and generates huge profits each year. http://www.ncaa.com/ PGA The association of professional golfers of America and the most important golf circuit of North America have their website in Drupal. http://www.pga.com/ The Weather Channel Meteorological information company with various TV channels and websites. http://www.weather.com/ Government Organizations, City Halls, and Public Enterprises United Nations Supranational organization to promote international cooperation... or so they say they do. http://www.un.org/en/index.html The White House Portal for the United States Presidency. http://www.whitehouse.gov/ New York State Official site for the State of New York. http://ny.gov/ City of Boston Portal for Boston City Hall. https://www.boston.gov/ City of Los Angeles Portal for Los Angeles City Hall. https://www.lacity.org/ City of London London City Council. http://london.gov.uk/ French Government French Government Portal. http://www.gouvernement.fr/ Belgian Government Belgian Government Portal. http://www.belgium.be/ New Zealand Parliament New Zealand Parliament Portal. https://www.beehive.govt.nz/ National Institutes of Health Institutions of the Unites States Government dedicated to medical research. https://www.nih.gov/ Sydney Sydney city tourism website. http://www.sydney.com SNCF The French state-owned railway company. http://www.sncf.com/ The world's top universities Harvard University The best university in the world, according to most university classifications. http://www.harvard.edu/ Oxford University Probably the most famous university in the world, with more than 1,000 years of history. http://www.ox.ac.uk/ The George Washington University Another great university in the USA. https://www.gwu.edu/ University of Calgary University of Calgary, one of the most prestigious in Canada. http://www.ucalgary.ca/ Yale University One of the most prestigious educational institutions in the world. http://www.yale.edu/ Columbia University Another of the great universities of the USA. http://www.columbia.edu/ MIT Media Lab MIT Lab dedicated to technology, design and multimedia projects. http://www.media.mit.edu/ Media, music and entertaiment The Economist Economic newspaper of worldwide circulation. http://www.economist.com/ Le Figaro The oldest newspaper in France and one of the 3 largest in the country. http://www.lefigaro.fr/ Independent Independent newspaper from the UK (recently, only a digital edition). http://www.independent.co.uk/ NBC Radio and TV Giant. http://www.nbc.com/ MSNBC One of the most important news channels in the world . http://www.msnbc.com/ MTV UK Site of the musical chain in the United Kingdom. http://www.mtv.co.uk/ Popular Science A classic among science geeks. http://www.popsci.com/ Patch Independent news portal. http://patch.com/ El Espectador Mythical Colombian newspaper. http://www.elespectador.com/ Elmogaz Egyptian news portal. http://www.elmogaz.com/ Warner Bros Giant of the world of cinema, music and television. http://www.warnerbros.com/ Turner Broadcasting System Company that manages the channels and television groups that are property of Time Warner. Some of its brands are CNN, TBS, TNT, Cartoon Network, Boomerang and TCM. http://www.turner.com/ Entertaiment Online magazine about cinema, series, music and tv. http://www.ew.com/ Health Health magazine that occupies a prominent position in the ranking world traffic. http://www.health.com/ Windows Central Magazine about the Windows operating system. http://www.windowscentral.com/ Linux Journal And now its namesake for Linux, although its glorious times have long passed. https://www.linuxjournal.com The Grammy’s The Grammy Awards of the National Academy of Recording Arts and Sciences. http://www.grammy.com/ The Beatles Official Website The Beatles use Drupal, Yoko Ono uses wordpress. http://www.thebeatles.com/ Non-governmental organizations Oxfam Main site of the set of organizations to combat poverty on the world. https://www.oxfam.org/ Médicos sin fronteras One of the largest NGOs in the world. http://www.msf.org/ World Food Programme Website of the United Nations program to combat hunger un the world. http://www.wfp.org/ Electronic Frontier Foundation Fundation for human rights in the digital world. https://www.eff.org/ The main museums of the world Louvre The most important museum in the world. http://www.louvre.fr/ Reina Sofia Museum of contemporary art in Madrid. http://www.museoreinasofia.es/ Tate Gallery British National Museum of Modern Art. http://www.tate.org.uk/ The Metropolitan Museum of Art Subsite of the Metropolitan Museum of New York. http://82nd-and-fifth.metmuseum.org/ Sities about religion and spirituality Bible.org Drupal paths are inscrutable. https://bible.org/ Al Islam Leading platform for studying Islam online. https://www.al-islam.org/ and to finish, a few organizations, startups and companies of diverse nature Icann Whois ICANN's whois tool uses Drupal for such tasks. http://whois.icann.org/en Real Academia de la Lengua Española The Royal Academy of the Spanish Language also relies on Drupal to defend Spanish. http://www.rae.es/ Zoho Hindy multinational that provides a number of tools for companies in the cloud. https://www.zoho.com/ Typepad Blogging platform in the doldrums for several years, but still with a great deal of traffico. http://www.typepad.com/ Bodeboca The biggest online club and wine shop in Spain. http://www.bodeboca.com/ Mint Personal finance management platform. https://www.mint.com/ Box Box is a toolkit for working on the cloud. https://www.box.com/ Taboola Content marketing platform that has become one of the most trafficked Drupal sites in the world. https://www.taboola.com/ Legacy.com The biggest digital obituary site in the world. It has brutal traffic and Alexa attributes to it position of 1363 in the world. http://www.legacy.com/ Rackspace One of the biggest hosting companies in the world. https://www.rackspace.com/ Magento One of the most powerful e-commerce sites in the world uses Drupal for its commercial web. https://magento.com/ Main photo: Sebastian Gabriel

How to organize the “files” folder in Drupal 7

drupal, performance

An organized file system is more efficient and makes faster and easier searches possible. A web server consumes many resources to find a file in a folder with a million files. However, if in the folder there are a thousand subfolders with a thousand files in each folder, access is much faster. The maximum number of files per folder for increased efficiency depends on the hardware available on the server, but generally should not exceed 10,000 that elements. The “files” folder Drupal has a public file system where the modules can save all necessary files. To configure it we’ll set in admin / config / media / file-system the path of the folder that will serve as root. The default for this route is sites / default / files, but it can be configured wherever is most interested us. Making the “files” folder have an efficient tree structure is very simple, since the modules use available public file system configuration options to create subfolders to store the files. Most files that are stored usually correspond to images or documents that users upload in the fields of content types when nodes are created, so the final path where the file will be saved depends on the settings you have set in each field. Some of the modules included in the core of Drupal that allow the creation of fields to upload files are Field, File and Image, in these fields you can configure a “files” route within the folder to be able to separate files for each. File (Field) Paths helps you organize Sometimes it is not enough to have a folder field, it is also necessary to create a subfolder structure in greater depth so that the maximum number of files that were set as folder limit is not exceeded. The perfect tool for creating this structure is the module File (Field) Paths, Paths, it allows you to set a pattern for the file storage path using the node values using the Token module. Once the new module is installed new options appear in the configuration of every field. The most interesting is the "file path" field where you can type a pattern that will be used to generate the final path where the file will be stored. Un ejemplo de patrón podría ser: An example of pattern could be: With this pattern a file called example.jpg loaded in a field called "MainImage" of a node created on June 25, 2016 would be stored in the example "sites / default / files / main-image / 2016/06/25 / example .jpg " The module also provides additional options such as eliminating slashes (/) or transliterating and cleaning the values of the tokens to make the routes friendly and uniforms. Si lo hubiera sabido antes… In many cases the system has been created without taking into account all these tips and so all files are in the root of the files folder. Gradually that folder fills up and there comes a time when it “jams” the management of the file system by the server risking the overall performance of the web. At this point you can install and configure the File (Field) Paths module, which also provides several useful options to avoid problems and make the management of existing files easier: Create redirect. Automatically creates a redirection between the old and the new file. Retroactive update. The system will move all existing files to the path that it should have based on the pattern established in the field. Active updating. The system won’t move existing files when saving the field, but each time a node is edited and saved the system will move the file to a new location if necessary. It is important to note that the physical location of the existing files will be modified, so these options must be used with caution to avoid the creation of broken links. If the number of existing files is very large, it is not advisable to mark the "Retroactiveupdate" option, as it can launch a process that takes too much and might not able to finish in the browser. In these cases the recommended configuration is marking "Active updating" and then carrying out a controlled update process of the nodes whose images we want to reorganize. This process can be done with a small module that creates a process queue in which each node is loaded with node_load () and is saved with node_save ().When saving the node all the images you have in your fields will be moved automatically to its new location. Better being safe than sorry Having to rearrange images of a running website is a potential source of problems, however, in the early stages of development creating an organized structure for the files folder is very fast and easy. It won’t delay the project and having such a system is much better even if the number of web files grows indefinitely. The benefits of developing this always make up for spending a few minutes on it because after a short time we get great benefits in the medium and long term. When starting a web project you almost never know how it will evolve; as time passes it may disappear, stay the same or grow into a project with millions of users, so it is important for both design and development to be as scalable as necessary. Main photo: Anders Jilden

Essential configuration for the SEO of a website with Drupal

web positioning, drupal

SEO (Search Engine Optimization)is a set of very different techniques focused on a common goal: to make a website appear in the top pages of search engine results. The success of the page depends largely on your position, since most users do not exceed the first page of results. Even within this first page there are big differences depending on the position: between the second and eighth may be several thousands of clicks apart. Each page results vary depending on the words that the user has typed, but not only that: Google, Bing and other search engines modify those results depending on who is that person looking thanks to the navigation data collected on their online activity. To complicate matters further, the algorithm used for the classification is secret (the company that owns each search engine is not interested in anyone knowing how the system works internally), so the work of the SEO consultant is very complicated and, in some cases, it’s based on the experience gained after many trials with the infallible trial/error method. Last but not least, the results of each change—however small—often take time to become apparent, forcing to have a measurement strategy and analysis sometimes more complex than the own corrective actions. In any case, there are a number of basic techniques that any website should carry out not to try to be the best, but rather to not be the worst since an incorrectly configured level SEO in a website can harm your position in the search results the same way as the most advanced techniques can improve it. In Drupal there are many modules to manage different SEO techniques available, but any installation should at least have the following: Pathauto. It is one of the most used modules in Drupal. It allows you to create patterns to build the alias of the URL's in the website by content type, user or taxonomy vocabulary, so that each of the aliases include relevant content for the search. It is important to use it in conjunction with the Transliteration module and activate the cleanurl's configuration included in Drupal’s core. Custom Breadcrumbs. To improve the breadcrumbs format and code. Metatag. "Goal" label management that is included in each of the pages of the website. You can set different type of meta-tags existing as well as the "page title". It has a cascade system that establishes a global labels and go specifying by content type, user, taxonomy vocabulary, even node or term. The more specific this configuration is, it will be more likely to succeed. Global Redirect. It performs automatic redirects on the basis of rules to prevent the existence of several URL's pointing to the same content., this practice that is considered harmful to the SEO. Redirect. This module facilitates the management of redirections to avoid “404” errors and losing positioning if you have to make any changes to an alias. XML Sitemap. With this sitemap module you’re provided with management in XML format, setting priorities by content type or taxonomy vocabulary, and also allowing automated shipping to some search engines. Alinks. To create automatic links in the content pointing to other areas of the website. Link checker. Practical module to check for broken links. There are many other modules that can help improve the SEO of a website, in this article we have highlighted the most basic, but a simple search on drupal.org with the keyword SEO returns more than 400 modules available, some very specific and others more general, but all available for use. As mentioned above, in SEO it’s just as important to carry out the right practices as it is knowing to evaluate the performance of the same. There is another set of modules that function as tools for measurement, evolution analysis and extraction of information that can be used to improve: Google Analytics, SEO Tools, Yoast SEO for Drupal, SEO Checklist, SEO Compliance Checker, Content Optimizer, etc. Of course the most important SEO are not the modules used but the settings established with them, these modules are not going to decide what kind of techniques should be applied: it is the responsibility of the architect of the site, the developer, SEO consultant, the content manager and all those involved in a website, but having good tools always facilitates the achievement of the objectives. Main photo: Nacho Rochon

How to add MagnificPopup to a view of your web in Drupal

drupal, coding

Popups are an excellent and sometimes beautiful idea to show the user some secondary or related content without overdoing the website. There are many methods and plug-ins that allow you to get this effect, the all have their pros and cons that make them better or worse in relation to what we need to make of them. However, in this article we’re going to show you one of the best, or at least the most versatile: Magnific Popup, a plug-in that allows to be used in multiple situations: galleries, modal windows, forms, content via AJAX, etc, whine being fast, light (it has a tool for generating a customized view), responsive and easily modifiable by CSS. What else can we ask for? A simple example on how to incorporate a plug-in in Drupal and really taking advantage of it is using it inside of a view, for this example we’re assuming we have a consistent content view in a list of nodes with the content type “product”. The view will have the name “products” with a block-type display showing the name of the product. If the user clicks on it a popup will open and give them detailed information on the product. The first step is configuring the view we’re going to use, we’ll initially add two more fields plus the Nid of every product that will be used as a unique identifier for each product’s popup: Nid (system name: nid) Name of the product (sytem name: title) Description of the product (system name: description) The goal is the “name” field has a link that activates the popup and that from inside the popup the content under the name “description” must come up, for that we’ll try the following: 1. We mark the option “exclude from presentation” from the “nid” field and we deactivate the node to which it’s linked, the goal is to get it out from the node’s id in a plain text format so we can reuse it in the other fields. 2. We mark the option “rewrite the output of this field” in the field “name” we write the following code: <div class="popup-trigger"> <a href="#popup-[nid]">[title]</a> </div> 3. We mark the "Write output this field" in the field "Description" and enter the following code: <div id="popup-[nid]" class="inline-popup mfp-hide"> [descripcion] </div> With this we have finished our view, of course this HTML can be changed to customize it for one’s needs, so we have to consider that there must be a link pointing to the pop-up’s id and the div has got to have already the defined classes for the use of the plug-in. In this example these are “inline-popupmfp-hide” but they can vary depending on the options we want to use, all valid options are available in the documentation. The second step for the popup to work is getting the plug-in’s javascript file to work and the pop-ups to initialize in our view; there are several ways for incorporating the js code to a Drupal website, in this example we’re going to use a preprocessing function in order to only change the code when the view to which we have added it is showing, we’ll add that function to the template.php file of the theme: /** * Añadir Magnific Popup a bloque de view. */ function THEME-NAME_preprocess_views_view(&$vars) { $view = &$vars['view']; if ($view->name == 'productos' && $view->current_display == 'block') { // add needed javascript drupal_add_js(drupal_get_path('theme', 'THEME-NAME ') . '/js/jquery.magnific-popup.min.js'); drupal_add_js(drupal_get_path('theme', 'THEME-NAME ') . '/js/inicio-popup.js'); // add needed stylesheet drupal_add_css(drupal_get_path('theme', 'THEME-NAME ') . '/magnific-popup.css'); } } The files .magnific-popup.min.js and magnific-popup.css belong to the plug-in’s code, the file “inicio-popup.js” is one that we’ll create as we need it, the code for this example would be: (function($) { Drupal.behaviors.inicioPopup = { attach : function(context, settings) { $(".view-productos .title > a").magnificPopup({ type:"inline", removalDelay: 300, mainClass: "mfp-fade", midClick: true }); } }; })(jQuery); Note: Both in code of the preprocessing function and in this js we’re taking into account that the view we’ve created is called “productos”. With this the popup should be completely functional, but it is necessary to add some CSS to the general style sheet of the theme so it has a nice look. .inline-popup { position:relative; width:auto; max-width:650px; margin:20px auto; background-color:#fff; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; padding:30px; } /* Overlay ------------ */ .mfp-fade.mfp-bg { /* at start */ opacity:0; -webkit-transition:all 0.15s ease-out; -moz-transition:all 0.15s ease-out; transition:all 0.15s ease-out; } .mfp-fade.mfp-bg.mfp-ready { /* animate in */ opacity:0.8; } .mfp-fade.mfp-bg.mfp-removing { /* animate out */ opacity:0; } /* Content ------------ */ .mfp-fade.mfp-wrap .mfp-content { /* at start */ opacity:0; -webkit-transition:all 0.15s ease-out; -moz-transition:all 0.15s ease-out; transition:all 0.15s ease-out; } .mfp-fade.mfp-wrap.mfp-ready .mfp-content { /* animate it */ opacity:1; } .mfp-fade.mfp-wrap.mfp-removing .mfp-content { /* animate out */ opacity:0; } Of course, from here you can change everything you need for it to honor its name and be magnific! Main photo: Noah Buscher

Diana tiro con arco olimpico representado el remarketing de Google

Google remarketing with Drupal webforms

drupal, coding

Google remarketing is a powerful tool for displaying AdWords ads to visitors to our web site based on a set of rules that can be customized. The drupal webform module is one of the most used, especially to create contact forms, information requests, registrations, etc. In this article we will explain how to make a module that allows us to remarket to users who have submitted a form with a specific value selected, which will create a callback in our module responsible for creating the webform submission confirmation url, including only a single parameter of product, service or topic on which we want to remarket. We will use as an example a webform that has a product selection component in which there are 3 options: 1 | Premium 2 | Advanced 3 | Basic The aim is for the webform submission confirmation page to include the selection code for which the user has requested information, so that we can configure our AdWords product knowing what the user is interested in. To do this, we will set a confirmation page with a fixed part and a second dynamic part, including the selected product from the webform, so the possible URLs in our example would be: /envio-realizado/1 /envio-realizado/2 /envio-realizado/3 We must additionally configure the webform to use a custom URL that we create as the confirmation page and add it to the parameters that the user has selected on the form. The first thing to do is create the module, in Drupal's hook_menu, which will provide a custom URL and callback to handle these requests. We will call our example "webform_remarketing." /** * Implements hook_menu(). */ function webform_remarketing _menu() { $items = array(); $items['envio-realizado/%'] = array( 'title' => 'Submission received', 'description' => 'Confirmation page for webform', 'page callback' => 'webform_remarketing _confirmation_page', 'page arguments' => array(1), 'access arguments' => array('access content'), ); return $items; } Once we have created the menu, we need to add the function defined in the callback page that will provide the content for display on screen: /** * Confirmation page menu callback. */ function webform_remarketing _confirmation_page ($producto) { return . t('Submission received') . ; } This function is an example for teaching purposes, so it just shows a simple message. Logically, it's common to want to show more content, so it's good to remember that all content displayed to the user should use a theming feature so it can be easily modified by the site developer. The next step we need to take is to modify the configuration webform to use the confirmation page that we created in our module and pass the value selected by the user. To do this, edit the webform options in the "form settings" tab. Among other options, there is a section called "address redirection" which offers 3 options. We need to select "Custom URL" and enter the URL that we defined in our module and make the webform correctly pass to the second part of the URL the value set by the user in the product selection component. For this we use the corresponding token, which in this case would be [submission: values :?] where the “?” must be replaced by the form_key of the component. Assuming that the value is “product," what we should put in this field would be: envio-realizado/[submission:values:producto] With this, we have achieved our goal. When a user fills out the form and requests information about a product, the confirmation URL includes the code for that product, so we can configure remarketing using these URLs in AdWords and set our campaigns.

Cómo crear un bloque de contenido relacionado con views en Drupal 7

How To Create A block content related In Drupal 7 Views

drupal, tutorials

As usual in Drupal, there are always several ways to solve a problem. In this case we want to make a block content related to be displayed on a node, for example the typical block of related news shown in the node of a story. What we need to do is to create a view that shows the news with the same taxonomy term that the node on which the block will be displayed and, of course, that it doesn’t show us the same node we are. For this we must follow these steps: 1. Create a view with a block type display. 2. We add the fields you want to appear as the title, date and photo. 3. We add a context filter to exclude the current node. Click on "Add contextual Filter" Select "Content: Nid (The node ID)". Now if the filter is not available, select "Provide default" and Type select "Content ID from URL" Finally we go to the "More" section and check the "Exclude box - If checked, the numbers indicated for the filter will be excluded rather than limiting the view. " 4. We add a second contextual filter: Select "Content: It has an id from a taxonomy term." When the filter is not available select "Provide default" and Type select "ID taxonomy term from URL" and then mark the box "Load default filter from node page, that's good for related taxonomy blocks" and select the vocabulary we want. If you do not load the list of vocabularies, click Save and re-click on the conceptual filter. 5. Now you only have to go to the block settings and locate the block in the region and the type of content that interests you. And that’s it, we have our block content related to views in Drupal 7. Main photo: Nicolas Hoizey

How to add placeholder text to forms in Drupal 7

drupal, ux

With the advent of HTML5 few years ago, the possibility to add placeholder has appeared The placeholder text is displayed in a text field on a form before the user complete, it’s very useful since it clarify what information must be entered in this field. For example, the HTML code: <form> <label for="search">Subscribe to the newsletter</label> <input id="news" type="text" placeholder="Enter your email" name="seach"> <button id="subscribebutton" type="submit">Send</button> </form> It show something like this Adding placeholders to the forms is a good practice that improves usability and of course the user experience. The W3C recommends using the placeholder always with the Label that, since they are supposedly complementary, but in Wild Wild Web, we often use only one of the two, since using both will be redundant. Support for placeholder will only be visible in most modern web browsers but usually a jquery fallback is implemented for the same functionality in older browsers. There are several ways to add a placeholder to a field on a form in Drupal 7. Below we highlight 4 which we consider the most useful. Form module Placeholder https://www.drupal.org/project/form_placeholder This module allows us to add placeholders to any form of the site from the Drupal administration. Hints Webform module https://www.drupal.org/project/webform_hints This module allows automatic placeholders to incorporate any textfield, testarea, select list and email field forms created with the webform module (https://www.drupal.org/project/webform) This module also comes with support for older browsers that do not support the placeholder attribute will and implement the fallback using jQuery. Field placeholder module https://www.drupal.org/project/field_placeholder It allows you to add the placeholder attribute to any field of a drupal entity, as fields of a content type, terms of taxonomy, user, etc. When activated, it displays a new option to enter the placeholder when you edit or create a field. Function in the template.php Finally the more advanced technical approach that involves all code but it’s the most powerful of all. It is about adding the following function to template.php file from our theme. function YOURTHEMENAME_form_alter( &$form, &$form_state, $form_id ) { if (in_array( $form_id, array( 'user_login', 'user_login_block'))) { $form['name']['#attributes']['placeholder'] = t( 'Username' ); $form['pass']['#attributes']['placeholder'] = t( 'Password' ); } } This case introduces a placeholder for the login form. Remember to change the name of the function YOURTHEMENAME by the name of your theme, and change the id of the form and name of the field you want to make the change. Learn how to get the id of a form.

How to install Boost in Drupal 7

tutorials, drupal

Optimize the performance of your website with Drupal Boost, a module that provides a cache for static pages Drupal allowing a significant improvement in the performance for sites that receive traffic preferably from anonymous users. It is the best option to improve and optimize our sites hosted on shared hostings. Boost stores and compresses (gzip) HTML content, XML, Ajax, CSS and JavaScript. In this tutorial videoe, we explain to you how to install and configure the Boost module in Drupal 7. I hope you have find this helpful, you can leave your comments or questions and we’ll try to answer them all. Esperamos que os haya servido de ayuda, podéis dejar vuestros comentarios o dudas y trataremos de responderos a todos.

Mandrill: Send transactional emails from Drupal

ux, drupal

Email is one of the most powerful tool for a website for enhancing customer service and increasing brand loyalty in all regards. If they’re used in the right way, transactional emails can improve the user’s experience, immediately arriving with the website’s and brand’s design style. What are transactional emails? Well, they aren’t newsletters or any other type of email. They’re sent on an individual basis because of a user’s action (or inaction) and act like notifications. Examples of transactional emails include the typical user registration email, password reminders from Badoo, order confirmation of a plane ticket to Marrakesh, wall posts from Francis on Facebook, profile visits from Lucy on LinkedIn, notifications you have joined an S&M group in your neighborhood, etc… If at some point you’ve had problems sending these types of emails from your site and your users can’t get them, or they go directly to the Spam folder, it’s probably because your server has been blacklisted as spam. Most of the time it’s because the server has been hacked and has become part of a zombie network that’s used for spamming. When this happens, antispam systems add the server’s IP address to a blacklist, and all the connected websites are affected too. To fix this problem, you have to use an external SMTP service to send transactional emails. These services guarantee your emails’ quick delivery. Users demand immediacy, and email delays will noticeably hurt the user’s experience. In Drupal, we can configure an SMTP server to send emails using the smtp module. But we can also use an external platform that specializes in this. Some of the most popular are Mailjet, Amazon SES, and Mandrill, but there are many more. Socialcompare has made a comparative list of transactional email services. Here at Wild Wild Web, we recommend you use Mandrill, the transactional email sending service from Mailchimp which can send up to 12,000 email per month for free and has fantastic integration with Drupal. If your website requires a larger volume of emails, there are also paid options. About Mandrill SPF and DKIM support that guarantees the emails aren’t marked as Spam Globally distributed infrastructure with servers in 5 continents which reduces latency Extensive email delivery statistics: openings, custom tagging, etc… Template system for personalizing emails Android and iOS apps Much more… Installing Mandrill into Drupal In order to install and configure Mandrill into Drupal, follow the following steps: 1. Download and install the modules: Mailsystem Mandrill 2. Download the Mandrill PHP API library installer and upload it to the folder /sites/all/libraries/mandrill 3. Activate the Mandrill, Mandrill Reports, and Mandrill Template modules 4. Create an account at mandrillapp.com 5. Get an API Key for your account 6. Put the API Key into the Drupal configuration screen and save it 7. Do some final adjustments to the module’s configuration Check the preferences for tracking or Google Analytics integration to track emails this way. Once this configuration is done, send a test email using (surprise) Send Test Email in order to see if it all works right. Now Drupal sends emails through Mandrill, but the results are only plain text… We’re back in the 90’s! 8. Make a template in Mandrill In order for emails to be branded with the logo and colors of your brand, we need to make a custom template. In your mandrillapp account, go to Outbound – Templates and hit Create a Template. While editing a new template, you just have to paste the HTML that you want to use for your email and use the Email Template Language from Mailchimp in order to tell Mandrill which part of the email is dynamic. It should be something like this: <body bgcolor="#202020" style="margin: 0;padding: 0;"> <table bgcolor="#202020" width="100%"> <tr> <td> <center> … HTML for customized email … <div mc:edit="main" style="color:#000000;"></div> … HTML for customized email … </center> </td> </tr> </table> </body> The key is the tag <div mc:edit="main" style="color:#000000;"></div> which separates the body of the email from the rest. 9. Create a mapping template in Drupal In order for Drupal to understand the new Mandrill template, you have to create a new Mandrill Template Map from admin/config/services/mandrill/templates, creating a name, selecting the template name and the region. Also, you have to select the Email Key that you want, which will usually be Site-wide Default. Conclusions Transactional emails are very important in improving user experience so you need to guarantee that their delivery will be rapid by using third-party tools. Mandrill is a fantastic application for sending transactional emails from Drupal because it offers 12,000 free emails, is a well-developed application, and has great integration with our favorite CMS (Content Management System).